P5JS – LA2 – Mini project

To close the LA block we got a mini project to create our own emoji, you could come up with one or think and create of something yourself. I choose to create something myself and had a lot fun making the code. I created a green monster with colorful glitters, a moving eye and a hat. This is the code:

var x;
var y;

function setup() {
  createCanvas(400, 400);

  x = 50;
  y = 100;
}

function draw() {
  background("#222222");
  //main//
  noStroke();
  fill("#b3ffb3");
  ellipse(200, 200, 250, 250);
  //eye//
  stroke(2);
  fill("ffffff");
  ellipse(200, 180, 100, 100);
  noStroke();
  fill("#222222");
  if (mouseX > 160 && mouseX < 230 && mouseY > 140 && mouseY < 255) {
    ellipse(mouseX, mouseY, 70, 70);
  } else {
    ellipse(215, 185, 70, 70);
  }
  if (mouseX > 160 && mouseX < 230 && mouseY > 140 && mouseY < 255) {
    ellipse(mouseX + 20, mouseY - 20, 15, 15);
  }
  noStroke();
  fill("ffffff");
  if (mouseX > 160 && mouseX < 230 && mouseY > 160 && mouseY < 255) {
    ellipse(mouseX + 20, mouseY - 20, 15, 15);
  } else {
    ellipse(230, 180, 15, 15);
  }
  //mouth//
  stroke(30);
  noFill();
  arc(200, 260, 100, 30, 0, PI);

  //glitters//
  noStroke();
  fill(mouseX, mouseY, 112);
  ellipse(random(x, x + 50), random(y + 150, y + 200), 20, 20);
  ellipse(random(x + 250, x + 300), random(y, y + 50), 20, 20);
  fill("#ffffff");
  ellipse(random(x, x + 50), random(y + 150, y + 200), 20, 20);
  ellipse(random(x + 250, x + 300), random(y, y + 50), 20, 20);

  //hat//
  noStroke();
  fill("#00cc44");
  ellipse(200, 90, 200, 50);
  rect(130, 30, 140, 70);
  ellipse(200, 30, 140, 30);
  stroke("#222222");
  noFill();
  arc(200, 75, 140, 40, 0, PI);
  arc(200, 30, 140, 25, 0, PI);

  //blush//
  noStroke();
  fill(255, 179, 217);
  ellipse(125, 230, 50, 20);
  ellipse(275, 230, 50, 20);
}

With this code I was able to create this: (use the link to get to the moving and interactive emoji)

I am really proud of what I made and this made me very excited for the final project of this unit.