Basic set-up:

setup() vs. draw()

• Color keeps changing because the function is constantly running. setup() and draw() functions are different. setup() runs only once while draw() runs on a loop. Thus, the program is constantly choosing colors at random to fill the ellipse color. We could use the method frameRate() to slow down the randomness.

variables & frameRate()

• The circle that moves doesn’t really leave a trail (i think), rather the variable ‘x’ it’s telling the function that each time it runs it must create an ellipse where the x-coordinate will increase by 1 pixel. So, if we change the number by which x-variable increases the x-coordinate in the ellipse will not leave a trail, as shown in the code below. I used frameRate() method once again to slow down the process.

let x = 0
function setup() {
  createCanvas(400, 400);
  background(100);
}

function draw() {
	ellipse(x, height/2, 20, 20);
    x = x + 40;
    frameRate(2);
    console.log(x)  
}

Gaps in a row

• So, in this exercise the x-coordinate is calculated by multiplying the radius each time the loop runs. Thus, when the x-coordinate starting at 0 (’x=0’) draws the first ellipse it immediately runs again and starts the next ellipse at the next x-coordinate, meaning the next value of x, which is +1 pixel, and then it draws another ellipse at the next value of x, which is +2 pixels, and so on, as stated in the expression 3 of the for loop (’x++’) x value increases by 1. The x-coordinate takes each new x-value and multiplies it by the radius, which in turn has been set by the variable ‘numCircles’. ‘numCircles’ ensures and equal distribution of # of circles by the width of the canvas. If we have a higher number of circles, say ‘50’ the radius decreases (r=8) and we have smaller circles 😞; but if we have a smaller number of circles, like ‘10’ the radius increases. To create a gap we need to move the x-coordinate position and shift it a bit so the next ellipse starts a bit farther than the other one. Below, I created ‘gap’ to account for the white space at 5 pixels and then modified the xCoor to include ‘gap’

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

function draw() {

  noLoop();
  noStroke();
  fill('purple');
  let numCircles = 10;
  let r = (width)/numCircles;
  let gap = 5;
    
  for (x = 0; x < numCircles; x++){
    let xCoor = x * r + x * gap;
    ellipse(xCoor, height/2, r);
    console.log(x*r)
  }
}

• I guess one possible solution will be to create a bunch of for loops, but that doesn’t make sense. I tried it either way, adjusting size. Problem is, it just does it one, or rather it does it under x is not longer less than height or width 😖

//...sames as above plus

for (y = 0; y < numCircles; y++){
    let yCoor = y * r + y * gap;
    ellipse (width/2, yCoor, r)
    console.log(yCoor)
  }

Skyline

https://editor.p5js.org/mariatragonas/full/KJrvE68Rz

• https://editor.p5js.org/mariatragonas/sketches/KJrvE68Rz