ICM Blog Post 2

Our goal for week 2 was to create a sketch that had an element controlled by the mouse, an element that changed over time (independently of the mouse), and an element that is different every time you run the sketch. I decided to alter my sketch from last week and implement the changes into the already existing code. The element that is controlled by the mouse, is the level of the background, which is controlled by the mouseY function. The element that changes over time independently of the mouse, is the light beam shades. I used the random function to implement a different greyscale color every time the draw function runs again. The color continuously changes over time. The element that is different every time you run the sketch is the color of the alien’s head and body markings. I used the random function again to change the value of the color. Click here to view my sketch. Below is a copy of the code used to create this sketch.

let x = 0;
let r, g, b, alpha;

function setup() {
  createCanvas(500, 300);
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

function draw() {
  noStroke();
  background(200);
  fill(100, 100, 100); //grey
  rect(0, mouseY, 500, 300); //background "ground"
  fill(57, 225, 20); //neon green color
  ellipse(250, 190, 125, 145); //head
  ellipse(250, 350, 50, 200); //body
  fill(0, 0, 0); //black
  arc(281, 180, 10, 30, 0, PI, OPEN); //bottom half right eye
  arc(219, 180, 10, 30, 0, PI, OPEN); //bottom half left eye
  ellipse(281, 180, 10, 10); //top half right eye
  ellipse(219, 180, 10, 10); //top half right eye
  ellipse(250, 230, 15, 20); //mouth
  fill(r, g, b); //random head and body marking color 
  ellipse(250, 130, 30, 15); //head mark top
  ellipse(250, 145, 20, 10); //head mark mid
  ellipse(250, 155, 10, 5); //head mark bot
  ellipse(250, 275, 15, 5); //body detail top
  ellipse(250, 285, 15, 5); //body detail mid
  ellipse(250, 295, 15, 5); //body detail mid

  //light beam
  fill(random(255), 20);
  quad(220, 0, 150, 300, 350, 300, 280, 0);
  fill(random(255), 40);
  quad(240, 0, 170, 300, 330, 300, 260, 0);
  fill(random(255), 60);
  quad(249, 0, 240, 300, 260, 300, 251, 0);
  //moon and details
  fill(211, 213, 180);
  ellipse(405, 100, 100, 100);
  fill(215, 220, 190);
  ellipse(405, 95, 80, 84);
  fill(220, 225, 200);
  ellipse(410, 90, 60, 68);
  fill(225, 230, 210);
  ellipse(415, 85, 40, 52);
  fill(165, 180, 180);
  ellipse(430, 97, 20, 17);
  fill(175, 192, 189);
  ellipse(430, 97, 15, 13);
  fill(165, 180, 180);
  ellipse(390, 65, 20, 15);
  fill(175, 192, 189);
  ellipse(390, 65, 15, 10);
  fill(165, 180, 180);
  ellipse(380, 135, 10, 5);
  fill(175, 192, 189);
  ellipse(380, 135, 5, 3);
  fill(165, 180, 180);
  ellipse(385, 125, 15, 13);
  fill(175, 192, 189);
  ellipse(385, 125, 10, 9);
  fill(175, 192, 189);
  ellipse(420, 130, 2, 1);
  ellipse(425, 120, 3, 2);
  ellipse(400, 80, 5, 3);
  ellipse(370, 70, 4, 2);
}
ICMOlivia KungICM