Cheat sheet!

Loop

while

while (**test**) {
    **statements**
  }

For

for (**initialize**; **test**; **change**) {
    **statements**
  }

to activate the function, let column 1 hold state by mouse over

i write two bools to constrain the statues

let whetherinline1 = true;
let whetherinline2 = true;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  if (whetherinline2) {
    if (mouseX < width / 3 && mouseX >= 0) {
      whetherinline1 = !whetherinline1;
    }
  }

  if ((mouseX < width / 3 && mouseX >= 0) || whetherinline1) {
    fill(255, 0, 0);
    whetherinline2 = false;
  } else {
    fill(255);
  }

  rect(0, 0, width / 3, height);
  if (mouseX < (width / 3) * 2 && mouseX > width / 3) {
    whetherinline2 = true;
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  rect(width / 3, 0, width / 3, height);
  if (mouseX < width && mouseX > (width / 3) * 2) {
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  rect((width / 3) * 2, 0, width / 3, height);
}

Slider without slide function

I use sin and constrain to build a spring slider~

sketch

video showcase

video showcase

let b = 10; //spring intensity
let c = 0;
let slideX = 10;
let slideY = 10;
let blank = 10;
let slideR = 20;
let isDrag = false;
function setup() {
  createCanvas(windowWidth, 600);
  slideX = width / 2;
  slideY = height / 10;
  blank = height / 10;
}

function draw() {
  b = 10 - c;
  background(220);
  for (i = 0; i * b + slideY <= height - blank; i += 0.01) {
    point(width / 2 + sin(i) * 150, i * b + slideY);
  }
  fill(100);
  ellipse(slideX, slideY, slideR);
  if (isDrag) {
    slideY = constrain(mouseY, height / 10, (8.5 * height) / 10);
    c = map(slideY, height / 10, (8.5 * height) / 10, 0, 9);
  }
  rectMode(CENTER);
  rect(width / 2, (9.2 * height) / 10, (8 * width) / 10, height / 15);
}

function mousePressed() {
  if (dist(mouseX, mouseY, slideX, slideY) < slideR) {
    isDrag = true;
  }
}
function mouseReleased() {
  isDrag = false;
}

work week3

team work -with Rachel