let angle = 1;

let speed = 5;

let rotateAmount = 200;

let count = 6;

let c;

let xpos = 0;

let ypos = 200;

let xstep = 30;

let x = 0;

let y = 0;

​

function setup() {

  c = createCanvas(400, 400);

​

  textSize(20);

  textAlign(CENTER, CENTER);

  angleMode(DEGREES);

  frameRate(60);

  colorMode(HSB);

  // noLoop();

}

​

function draw() {

  // let r = map(mouseX, 0, 1000, 0, 225);

  // let g = map(mouseX, 0, 1000, 225, 0);

  let b = map(mouseX, 0, 1000, 70, 110);

  background(225, 10, b);

  push()

​

  fill('orange') 

  circle((frameCount / 6) % width, 150, 200) 

  pop()

  push();

  push();

  // rectangle

  noStroke()

  fill('red')

  circle(120, 100, 20)

  // earth

  translate(120, 100);

  rotate(angle);

  fill('white')

  text("rotate", 0, 0);

​

  pop();

​

​

​

  // fan

  // let shearXAmount = dist(20, 20, mouseX, mouseY);

  // let shearYAmount = dist(20, 20, mouseX, mouseY);

​

  fill("blue");

  stroke("orange");

  translate(300, 100);

  let r1 = map(rotateAmount, 100, 0, 100, mouseX);

  rotate(r1);

  shearX(20);

  shearY(10);

  textSize(40);

  text("ROTATE", 0, 0);

​

  pop();

​

  // circle

  push();

​

  translate(50, 105);

  for (let i = 0; i < count; i++) {

    let c = map(mouseX, 0, width, 0, 255);

    fill(c);

    circle(xpos + xstep * i, ypos, 20);

  }

​

  pop();

  // line 

  push();

  line(300, 100, 300, 300);

  strokeWeight(1);

  noFill();

  beginShape();

    curveVertex(300, 300);

    curveVertex(284, 291);

    curveVertex(268, 219);

    curveVertex(211, 37);

    curveVertex(132, 91);

    curveVertex(232, 91);

  endShape();  

  push()

  fill('white')

  translate(240, 240);

  rotate(rotateAmount * 6);

  rect(0, 0, 80, 60);

  pop()

  push()

  fill('black')

  text('washing machine', 240, 240);

  pop();

  push();

​

  rotateAmount = rotateAmount + speed;

  angle = angle + speed;

}

​