Description

In this final project example we create a sea of text-based emojis that jiggle around the canvas. Implemented with an array of Emoji objects that have a text-based emoji symbol, a position, and functions for moving and displaying themselves.

Steps Outline

1. Gather a collection of emojis
2. Create an Emoji constructor
3. Draw many emojis
4. Draw many different emojis

Step by Step

1) Gather a collection of emojis

First, go to this page, and pick a collection of emojis for your sketch. Emojis are represented as text, so you can copy and paste some into any text document. Here, we pasted them into a comment on our sketch code to use later:

2) Create an Emoji constructor

Let's start by creating an Emoji constructor modeled after the Bubble constructor from LA 6.2. Instead of drawing ellipses though, we want to draw emojis. Emojis are represented by text (that's why different software renders them differently), so instead of drawing them with the image function, we use the text function.

Here is the constructor (this is a code snippet, not ready to run yet!):

function Emoji(x, y) {
  this.x = x;
  this.y = y;
  
  this.move = function() {
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
  
  this.display = function() {
       text("😀", this.x, this.y);
  }
}

3) Draw many emojis

Now let's use this constructor to create our emoji sea. We first declare an emoji array, then use a for loop to create 30 emojis on setup, and another for loop to move and display them in draw. Copy and paste this code in the p5 editor to see it working:

var emoji = [];

function setup() { 
  createCanvas(400, 400);
    
    for(var i = 0; i < 30; i++){
        emoji[i] = new Emoji(random(width), random(height));
    }
} 

function draw() { 
  background(220);
    
    for(var i = 0; i < 30; i++){
        emoji[i].move();
        emoji[i].display();
    }
}

function Emoji(x, y) {
  this.x = x;
  this.y = y;
  
  this.move = function() {
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
  
  this.display = function() {
       text("😀", this.x, this.y);
  }
}

4) Draw many different emojis

But we want each Emoji object to draw a different emoji from our collection. So instead of always drawing "😀", let's add an emoji property to our object. Apart from a this.x and this.y, it will have a this.emoji. Let's also add an extra parameter to the constructor function, so that we can set a different emoji to the object each time we create a new one ––just like we've been setting them to a different x,y position. Here is the new constructor code:

function Emoji(x, y, emoji) {
  this.x = x;
  this.y = y;
  this.emoji = emoji;
  
  this.move = function() {
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
  
  this.display = function() {
       text(this.emoji, this.x, this.y);
  }
}

To assign a different emoji to each object we create, let's put our collection into an array. Then, for each emoji in the array, we create a new object, passing the i-eth emoji as a third parameter to the constructor function:

var emoji_symbols = ["😀", "😬", "😁", "😂", "😃", "😄", "😅", "😆", "😇", "😉", "😊", "🙂", "🙃", "😋", "😌", "😍", "😘", "😗", "😙", "😚", "😜", "😝", "😛", "🤑", "🤓", "😎", "🤗", "😏", "😶", "😐", "😑", "😒", "🙄", "🤔", "😳", "😞", "😟", "😠", "😡", "😔", "😕", "🙁", "😣", "😖", "😫", "😩", "😤", "😮", "😱", "😨", "😰", "😯", "😦", "😧", "😢", "😥", "😪", "😓", "😭", "😵", "😲", "🤐", "😷", "🤒", "🤕", "😴"];
var emoji = [];

function setup() {
  createCanvas(600, 600);
  background(255, 194, 32);
  
  //for each symbol in the emoji_symbols array,
  //create an Emoji object and put it inside the emoji array
  for(var i = 0; i < emoji_symbols.length; i++){
    emoji[i] = new Emoji(random(width), random(height), emoji_symbols[i]);
  }
}

function draw() { 
  background(220);
    for(var i = 0; i < emoji.length; i++){
        emoji[i].move();
        emoji[i].display();
    }
}

You need to have both these snippets in the same sketch for this to work. The order is a matter of preference ––I like to have my variables on top, then setup, then draw, and then any other functions I create. Here is the complete sketch.

Now what would you change in order to have each emoji object be of a random, different size? Can you make them move at different speeds? Remember we went over the concept of speed in LA 4.1.