🎈 1. Moving Dot (Left → Right)

Only variable: x

https://editor.p5js.org/citizeninvention/sketches/8wdStTCH5

let x = 0;

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(220);

  circle(x, 100, 20);

  x = x + 2;   // move x to the right
}

Concept:

👉 One variable controls position.

👉 Add a number each frame = movement.

🌙 2. Fade In / Fade Out (Alpha/Transparency Animation)

https://editor.p5js.org/citizeninvention/sketches/r-J4Ldyzj

Only variable: a (opacity)

let a = 0;

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(220);

  fill(0, 0, 255, a); // a controls transparency; 0 = full transparent
  circle(200, 100, 80);

  a = a + 1;   // make the circle less transparent
}

Concept:

👉 Variable controls appearance, not movement.

👉 Increase alpha to make something fade in.

📏 3. Growing Circle (Size Animation)

https://editor.p5js.org/citizeninvention/sketches/UlfRv2vPS

Only variable: size