Unit 2 – LA 1 – 1.2

For the first assignmetn we had to use if and else statements and this is what I created using them:

var x, y, r, s;
function setup() {
  createCanvas(400, 400, WEBGL);
  x = 50;
  y = 50;
}

function draw() {
  background("#EFE9F4");
  //background2//
  noStroke();
  fill("#B0C2FD");
  rect(10 - 200, 10 - 200, 380, 380);

  //center and lower circles//
  noStroke();
  fill("#D74009");
  ellipse(50 - 200, 50 - 200, x, y);
  if (mouseX > 100) {
    ellipse(150 - 200, 50 - 200, x, y);
    if (mouseX > 200) {
      ellipse(250 - 200, 50 - 200, x, y);
      if (mouseX > 300) {
        ellipse(350 - 200, 50 - 200, x, y);
      }
    }
  }

  ellipse(150, 150, x, y);
  if (mouseX > 100) {
    ellipse(50, 150, x, y);
    if (mouseX > 200) {
      ellipse(150 - 200, 150, x, y);
      if (mouseX > 300) {
        ellipse(50 - 200, 150, x, y);
      }
    }
  }
  if (mouseX > 100) {
    ellipse(50 - 200, 150 - 200, x, y);
    if (mouseX > 200) {
      ellipse(50 - 200, 50, x, y);
    }
  }
  if (mouseX > 100) {
    ellipse(150, 50, x, y);
    if (mouseX > 200) {
      ellipse(150, 150 - 200, x, y);
    }
  }
  //background center square//
  fill("#EFE9F4");
  rect(100 - 210, 100 - 210, 220, 220);
  //center square//
  strokeWeight(10);
  stroke("#EFE9F4");
  fill("#F9A88B");
  rect(100 - 200, 100 - 200, 200, 200);
  //pink lines//
  stroke("#F9A88B");
  line(45 - 200, 50 - 200, 155, 50 - 200);
  line(50 - 200, 50 - 200, 50 - 200, 150);
  line(145, 150, 150, 50 - 200);
  line(150, 150, 45 - 200, 150);
  //cursor//
  cursor(CROSS);

  //rotating//
  push();
  noStroke();
  rotateZ((millis() / r) * s);
  fill("#D74009");
  arc(0, 0, 100 - 200, 100 - 200, 0, PI);
  fill("#B0C2FD");
  arc(0, 0, 100 - 200, 100 - 200, PI, TWO_PI);
  pop();

  if (mouseIsPressed) {
    r = 1000;
  } else {
    r = -1000;
  }

  print(mouseIsPressed);

  if (keyIsPressed) {
    s = 0.5;
  } else {
    s = 2;
  }
  print(keyIsPressed);
}

https://editor.p5js.org/BrainyZebra5/full/SHPfGo97G

Then we had to debug something and I succeeded which created this:

function setup() { 
  createCanvas(600, 120);
} 

function draw() { 
	rectMode(CENTER);
	background(0);
	fill(255,0,0);

	if(mouseX>500){
		ellipse(550, 60, 20,20);
	}else if(mouseX>400){
		ellipse(450, 60, 20,20);
	}else if(mouseX>300){
		ellipse(350, 60, 20,20);
	}else if(mouseX>200){
		ellipse(250, 60, 20,20);
	}else if(mouseX>100){
		ellipse(150, 60, 20,20);
	}else{
 	 ellipse(50,60,20,20);//draw an ellipse at 50
	}

}

https://editor.p5js.org/BrainyZebra5/full/PFE4jwADa

AS last assignment for this course we had to create a traffic light:

var greenlight, yellowlight, redlight;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  var greenlight = "white";
  var yellowlight = "white";
  var redlight = "white";
  background("#0BE2EA");
  
  fill("#F8F4A6");
  noStroke();
  ellipse(40, 40, 200, 200);
  
  noStroke();
  fill(50);
  rect(190, 320, 20, 100);

  strokeWeight(10);
  stroke(80);
  fill(150);
  rect(125, 50, 150, 300);
  
  if(mouseY < 165) {
    greenlight = "green";
  } else if(mouseY < 250) {
    yellowlight = "yellow";
  } else {
    redlight = "red";
  }
  
  fill(greenlight);
  ellipse(200, 105, 80, 80);
  fill(yellowlight);
  ellipse(200, 200, 80, 80);
  fill(redlight);
  ellipse(200, 295, 80, 80);
  
  noStroke();
  fill(0);
  textSize(20);
  if(greenlight == "green") {
    text('GO!', 250, 385);
  }
  if(yellowlight == "yellow") {
    text('Careful...', 250, 385);
  }
  if(redlight == "red") {
    text('STOP!!', 250, 385);
  }
}

https://editor.p5js.org/BrainyZebra5/full/-ApuoF9GP