# All new to this trying to understand

**URL:** <https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429>\
**Category:** Beginners\
**Created:** [January 2, 2022, 9:17am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429 "2022-01-02T09:17:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 2, 2022, 9:17am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/1 "2022-01-02T09:17:51Z")

</div>

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:

> **[examples | p5.js](https://p5js.org/examples/hello-p5-animation.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 2, 2022, 9:52am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/2 "2022-01-02T09:52:27Z")

</div>

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

```auto
// 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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 2, 2022, 10:08am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/3 "2022-01-02T10:08:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 2, 2022, 10:14am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/4 "2022-01-02T10:14:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 2, 2022, 10:22am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/5 "2022-01-02T10:22:42Z")

</div>

play with this

```auto
// 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;
  }
}
}

```

---

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 2, 2022, 10:25am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/6 "2022-01-02T10:25:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 2, 2022, 10:28am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/7 "2022-01-02T10:28:37Z")

</div>

the f was answer how to draw many

no it is not difficult to make them move independently

---

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 2, 2022, 10:38am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/8 "2022-01-02T10:38:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 2, 2022, 10:39am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/9 "2022-01-02T10:39:14Z")

</div>

@visnudeva  
you are most welcome

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 2, 2022, 12:25pm UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/10 "2022-01-02T12:25:57Z")

</div>

Hello @visnudeva.

> [@visnudeva](#):
>
> they all move together, is it difficult to make them move independently ?

Take a look at the _Objects_ examples here:  
_[examples | p5.js](https://p5js.org/examples/)_

`:)`

---

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 2, 2022, 12:44pm UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/11 "2022-01-02T12:44:56Z")

</div>

@glv,

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 2, 2022, 12:51pm UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/12 "2022-01-02T12:51:52Z")

</div>

Hello,

A couple of tutorials that may help:

[![](https://img.youtube.com/vi/-e5h4IGKZRY/maxresdefault.jpg "2.3: JavaScript Objects - p5.js Tutorial") ](https://www.youtube.com/watch?v=-e5h4IGKZRY)

> **[Using Objects in p5.js](https://happycoding.io/tutorials/p5js/using-objects)**
>
> Learn how to use objects in p5.js to group related variables together.

`:)`

---

<div class="post-metadata">

**Author:** ![visnudeva](https://avatars.discourse-cdn.com/v4/letter/v/bbe5ce/32.png) [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Post date:** [January 3, 2022, 7:54am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429/13 "2022-01-03T07:54:30Z")

</div>

I will watch them, thanx.