Example 0 - Make a circle

[Please ignore the embed above. I am unable to delete it.](<iframe src="https://editor.p5js.org/a-partha/full/yMLU8M-jf"></iframe>)

Please ignore the embed above. I am unable to delete it.

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

function draw() {
  circle(200,200,50);
}

Example 1 - Basic Set-up

setup() runs the function createCanvas(400,400) once to create a canvas with a width of 400 px and height of 400 px.

draw() continuously executes fill(random(255), random(255), random(255)) and ellipse(width/2, height/2, 50, 50) until the program is stopped. An ellipse with a width of 50 px and a height of 50 px is placed at (200,200). The fill function above causes the ellipse’s color to keep changing to random rgb colors from 0 to 254.

Example 2 - Frame by frame movement

The circle leaves a trail because the x value is incremented by 1 and since it’s in the draw() function, it keeps incrementing until the the program is stopped.

We can remove it by either deleting the increment or putting everything in the setup() function.

We can change the speed by changing the increment value.

Example 4 - Making a row

function setup() {
  createCanvas(400, 400);
  background(240)
}

function draw() {

  noLoop();
  noStroke();
  fill('red');
  let numCircles = 50;
  let r = (width)/numCircles;
    
  for (x = 0; x < numCircles; x+=2)
  {
    for (y = 0; y < numCircles; y+=2)
      {
        ellipse(x*r, y*r, r);
      }
  }
}

Open Sketching

function setup() {
  createCanvas(700, 100);
  background(240)
}

function draw() {
  noLoop();
  noStroke();
  fill('rgb(125,125,125)');
    
  for (x = 0; x <= width; x+=10)
  {
      rect(x,height,10,random(-90));
  }
}