2025-01-31-Variables-And-Color

// Declare variables for positioning and coloring a rectangle

let rectWidth, rectHeight, rectColor;

let circleColor;

​

function setup() {

  // Usually, x (horizontal) and/or width comes first, followed by 

  // y (vertical) and/or height

  createCanvas(400, 400);

  // Define variables (i.e. give/assign them values)

  // We call this "initializing" when giving the first (i.e. initial) value

  rectWidth = 150;

  rectHeight = 100;

  rectColor = color(0, 255, 0, 50);

  circleColor = color("rgb(255,188,251)");

}

​

function draw() {

  // By putting a call to background here, in draw(), 

  // we clear the canvas every frame

  background(100);

  // noStroke();

  strokeWeight(10);

  fill(circleColor);

  circle(200, 100, 100);

  circle(100, 200, 100);

  circle(300, 300, 100);

  // Draw the rectangle using our variables

  fill(rectColor);

  rect(200, 200, rectWidth, rectHeight);

}