This is an example for Lab 5 - a simple animation

using functions for code modularity and easy reusability

*/

// start by making two objects with the data we want to use in our functions

​

// Patrol Car and Party Kitty lighting the way to protect from big brother, sacrificing their pigments

​

//bg default state

​

let darkness = false;

​

//default colors

​

let colorMaps = [

  {

    //Red Color

    r: 255,

    g: 0,

    b: 0,

  },

  {

    //White Color

    r: 255,

    g: 255,

    b: 255,

  },

  {

    //Skin Color

    r: 255,

    g: 204,

    b: 153,

  },

    {

    //Brick Color

    r: 200,

    g: 200,

    b: 200,

  },

];

​

//Merged red car and white car

let car1 = {

  x: 50,

  y: 300,

  xspeed: 5,

  yspeed: -9,

  col: colorMaps[0],

  tireSize: 15,

};

​

//Party kitty

​

let kitty = {

  x: 80,

  y: 200,

  xspeed: 3,

  yspeed: -2,

  col: colorMaps[1],

  tireSize: 15,

};

​

//Big brother is watching

​

let bigBrotherFace = {

  x: 300,

  y: 200,

  col: colorMaps[2],

  xspeed: 6,

  yspeed: -4,

};

​

let bigBrotherPupil1 = {

  x: 300,

  y: 200,

  col: 'black', // pupil color

  xspeed: -1,

  yspeed: 0.2,

}

​

//for checking gradient values

let direction = [

  { towardsWhite: true },

  { towardsWhite: false } 

];

​

​

function updateColor(index) {

  let color = colorMaps[index];

  let dir = direction[index];

​

  if (dir.towardsWhite)

  {

    color.g = min(color.g + 10, 255);

    color.b = min(color.b + 10, 255);

    // Check if the color is white

    if (color.g >= 255 && color.b >= 255)

    {

      dir.towardsWhite = false; // Change to red

    }

  }

  else

  {

    color.g = max(color.g - 10, 0);

    color.b = max(color.b - 10, 0);

​

    // Check if the color has is red

    if (color.g <= 0 && color.b <= 0)

    {

      dir.towardsWhite = true; // Change to white

    }

  }

}

​

​

​

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  init();

}

​

​

​

​

​

function init() {

  background(colorMaps[3].r,

             colorMaps[3].g,

             colorMaps[3].b

            );

  drawGrid();

  // call obj and movement functions

  BigBrother(bigBrotherFace); 

  pupil(bigBrotherPupil1);

  // Big brother watches in dark

  if (darkness)

    {

      move(bigBrotherPupil1);

      bouncePupil(bigBrotherPupil1);

      //patrol car in duty

      move(car1);

      bounce(car1);

      // Alternate colors during dark

      if (random() > 0.6)

      {

        updateColor(0); 

​

      }

      else

      {

        randomizeColor(1);

      }

    }

  car(car1);

  cat(kitty);

  //using car's movement functions for this lab

  move(kitty);

  bounce(kitty);

​

​

}

​

function randomizeColor(index) {

  let color = colorMaps[index];

  // Assign random values within the 0-255 range

  color.r = Math.floor(Math.random() * 256);

  color.g = Math.floor(Math.random() * 256);

  color.b = Math.floor(Math.random() * 256);

}

​

//change bg

​

function mousePressed() {  

​

  if (!darkness)

    {

      colorMaps[3].r = 0;

      colorMaps[3].g = 0;

      colorMaps[3].b = 0;

      darkness = true;

    }

  else

    {

      colorMaps[3].r = 200;

      colorMaps[3].g = 200;

      colorMaps[3].b = 200

      darkness = false;

    }

  draw();

​

}

​

// these functions take generic objects as parameters

​

function BigBrother(obj) {

  noStroke();

  // face

  fill(obj.col.r,obj.col.g,obj.col.b);

  ellipse(obj.x, obj.y, 350, 350);

  // eyes

  fill(255);

  ellipse(obj.x - 70, obj.y - 50, 70, 100); // Left eye

  ellipse(obj.x + 70, obj.y - 50, 70, 100); // Right eye

  // mouth

  fill(65,0,0);

  rect(obj.x - 40, obj.y + 80, 80, 10);

​

}

​

// Big Brother pupil action

​

function pupil(obj) {

  noStroke();

  // Draw eyes

  fill(obj.col);

  ellipse(obj.x - 70, obj.y - 50, 20, 20); // Left eye

  ellipse(obj.x + 70, obj.y - 50, 20, 20); // Right eye

}

​

function bouncePupil(obj) {

  if (obj.x < 278 || obj.x > 324) {

    obj.xspeed = -obj.xspeed;

  }

  if (obj.y < 178 || obj.y > 228) {

    obj.yspeed = -obj.yspeed;

  }

}

​

​

//Attempting a cat..

​

function cat(obj) {

  noStroke();

  fill(obj.col.r, obj.col.g, obj.col.b);

​

  //// Head

  ellipse(obj.x, obj.y - 50, 42, 40); // Head

​

  //// Ears

  fill(obj.col.r, obj.col.g, obj.col.b);

  //Triangles are no bueno.. hardest part for me

  // Left ear

  triangle(obj.x - 20,

           obj.y - 70,

           obj.x - 10,

           obj.y - 50,

           obj.x,

           obj.y - 60);

  // Right ear

  triangle(obj.x + 20,

           obj.y - 70,

           obj.x + 10,

           obj.y - 50,

           obj.x, obj.y - 60);

​

  //// Eyes

  fill(0);

  ellipse(obj.x - 10, obj.y - 50, 5, 5); // Left eye

  ellipse(obj.x + 10, obj.y - 50, 5, 5); // Right eye

​

  // Nose

  fill(255, 0, 0);

  ellipse(obj.x, obj.y - 46, 5, 5);

​

  // Mouth

  stroke(0);

  strokeWeight(1);

  noFill();

  arc(obj.x, obj.y - 42, 10, 10, 0, PI); //Smile Curve

}

​

//Default car object

​

function car(obj) {

  noStroke();

  // use dot notation to get the objects' values

  fill(obj.col.r,obj.col.g,obj.col.b);

  rect(obj.x, obj.y, 60, 20);

  rect(obj.x + 20, obj.y - 10, 40, 10);

  fill(0);

  ellipse(obj.x + 10, obj.y + 20, 15, 15);

  ellipse(obj.x + 50, obj.y + 20, 15, 15);

}

​

function move(obj) {

  // can also use dot notation to set values

  obj.x = obj.x + obj.xspeed;

  obj.y = obj.y + obj.yspeed;

}

​

​

function bounce(obj) {

  if (obj.x < 0 || obj.x > width) {

    obj.xspeed = -obj.xspeed;

  }

  if (obj.y < 0 || obj.y > height) {

    obj.yspeed = -obj.yspeed;

  }

}

​

function drawGrid() {

 for (let i = 0; i <= width; i += 20) {

    for (let j = 0; j <= height; j += 20) {

      // line(i, j + 20, i + 20, j);

      noFill();

      rect(i, j, 20);

    }

  } 

}