All new to this trying to understand

p5.js Beginners
1

I’m trying to understand something very basic looking at the exemple and trying to modify them but i don’t get it yet.
For exemple with the code here:

what should i do to get many circles doing the same thing ?

2

hi
you can use for loop instead of repeat this line ellipse(x+30, y+30, 24, 24);

// Where is the circle
let x, y;

function setup() {
  createCanvas(720, 400);
  // Starts in the middle
  x = width / 2;
  y = height;
}

function draw() {
  background(200);
  
  // Draw a circle
  stroke(50);
  fill(100);
  ellipse(x, y, 24, 24);
  ellipse(x+30, y+30, 24, 24);
 
  // Jiggling randomly on the horizontal axis
  x = x + random(-1, 1);
  // Moving up at a constant speed
  y = y - 1;
  
  // Reset to the bottom
  if (y < 0) {
    y = height;
  }
}
1 Like
3

Great, thank you very much.
So my logic was good because i tried changing the numbers at the same place but my knowledge is too little.
I was playing with the examples to understand the logic and i started the courses for the knowledge part, so all is well.

4

And if i wanted to move the second ellipse differently not in sync with the first, how would you do it?

5

play with this

// Where is the circle
let x, y;

function setup() {
  createCanvas(720, 400);
  // Starts in the middle
  x = width / 2;
  y = height;
}

function draw() {
  background(200);
  
  // Draw a circle
  stroke(50);
  fill(100);
  for (var f=0; f<= 240; f = f + 30){
  ellipse(x, y, 24, 24);
   ellipse(x+f, y+f, 24, 24);
 
  x = x + random(-1, 1);
  // Moving up at a constant speed
  y = y - .1;
  
  // Reset to the bottom
  if (y < 0) {
    y = height;
  }
}
}
6

Thank you, i see what the ‘f’ is doing but they all move together, is it difficult to make them move independently ?

7

the f was answer how to draw many

no it is not difficult to make them move independently

8

Thank you for your time your answers and your examples, i really like learning this language.

1 Like
9

@visnudeva
you are most welcome

2 Likes
10

Hello @visnudeva.

Take a look at the Objects examples here:
examples | p5.js

:)

11

@glv,

yes, that’s where i was looking at, thanx

1 Like
12

Hello,

A couple of tutorials that may help:

:)

13

I will watch them, thanx.