code with notes and changes for part 0.3 objects

mariana_objects_feedback.js

// 1- declare your global variables at the top so all the functions can use them
var thing1;
var thing2;
var rainbow;

function setup () {
  createCanvas(400, 400);
  
  // 3- assign values to your global variables inside of setup so that helper functions are available
  // 4- use the color function, not just numbers
  rainbow = color(255,250,225);

  thing1 = {
    color1:color(255,100,225),
    color2:color(200,225,225),
    height:100,
    width:75,
    xOffset:60,
  };

  thing2 = {
    color1:color(200,200,180),
    color2:color(255,150,190),
    height:90,
    width:80,
    xOffset:100,
  };
}

function draw () {
  // 5- use the background function at the start of draw so that your sketch always has a background
  // 6- using a color variable for the background color allows you to update the variable with changes
  background(rainbow);

  fill(thing1.color2);
  rect(mouseX-85,mouseY-100,50,50);
  stroke(220,220,100);
  fill(thing1.color1);
  ellipse(mouseX-thing1.xOffset, mouseY,thing1.width,thing1.height);
  stroke(225,0,225);
  line(mouseX-30, mouseY-30,mouseX, mouseY);
  line(mouseX-90, mouseY-30,mouseX-120, mouseY);
  ellipse(mouseX-50,mouseY-90,5,5);
  ellipse(mouseX-65,mouseY-90,5,5);

  stroke(thing2.color1);
  fill(thing2.color2);
  rect(mouseX+75,mouseY-98,52,52);
  stroke(200,225,225);
  fill(200,200,190);
  ellipse(mouseX+thing2.xOffset, mouseY,thing2.width,thing2.height);
  stroke(225,200,225);
  line(mouseX+75,mouseY-30,mouseX, mouseY);
  line(mouseX+200,mouseY+15,mouseX+120, mouseY-30);
  fill(255,255,225);
  ellipse(mouseX+85,mouseY-90,5,5);
  ellipse(mouseX+100,mouseY-90,5,5);
}

// #4 Add mousePressed()
function mousePressed() {
  var a = random(150,255);
  var b = random(150,255);
  var c = random(150,225);

  // 7- update the variable that the background function uses
  rainbow = color(a, b, c);
}