# Very simple question - I think

**URL:** <https://discourse.processing.org/t/very-simple-question-i-think/21851>\
**Category:** Coding Questions\
**Created:** [June 14, 2020, 12:03am UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851 "2020-06-14T00:03:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![alu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alu/32/9639_2.png) [@alu](https://discourse.processing.org/u/alu)\
**Post date:** [June 14, 2020, 12:03am UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/1 "2020-06-14T00:03:50Z")

</div>

Hi ! I’ve been teaching myself Processing with online resources and the Learning Processing book for a couple of months now. It’s so I can execute a project I’m working on.

But I can’t seem to find a way to do this seemingly simple thing. This is not the project but some code I’m practicing on…

```auto
float x = 100;
float y = 100;
float s = 50;
float fcol = 150;

void setup() {
  size(1000, 500);
  background(255);
    drawflower(x, y, 50, 0);
    drawflower(x, y, 20, 50);
    drawflower(x, y, 80, 100);
    drawflower(x, y, 100, 150);
    drawflower(x, y, 30, 200);
    drawflower(x, y, 60, 250);
  }

void drawflower(float x, float y, float s, float fcol) {
  ellipseMode(CENTER);
  fill(fcol);
  ellipse(x, y, s, s);
  stroke(0);
  line(x, y+s/2, x, height);
}

```

ISSUE: I want the x and of the flower to increment by say, 50, each drawflower object with its unique size and colour to appear in a new position and form a line.

I haven’t been able to figure out how to do this. I’ve tried WHILE loops and FOR loops, and am learning now about arrays but don’t know enough to apply it yet. When I use a while or for loop it only repeats the first flower.

I don’t even know if this is an easy fix. Can someone enlighten me a bit please?

---

<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:** [June 14, 2020, 12:33am UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/2 "2020-06-14T00:33:33Z")

</div>

> [@alu](#):
>
> I don’t even know if this is an easy fix. Can someone enlighten me a bit please?

One of the best tools in a programmers tool chest is knowing the resources available to you and learning to navigate and use them.

This is a very short list:

> **Resources \< Click here to expand !**
>
> I encourage you to review the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, etc.  
> [https://processing.org/](https://processing.org/)
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the tabs will reveal what is available; libraries, tools and local examples there.
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)  
> Many of the Processing functions are here:  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the tabs.  
> In the education tab, there is a reference to the Coding Train.
> - And the Internet. `:)`

`:)`

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 14, 2020, 12:33am UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/3 "2020-06-14T00:33:38Z")

</div>

Hi,

Welcome to the community! 😉

First of all you can format your code by using the `</>` button in the message editor on the forum to have code formatting and colors.

Note : by default, the mode for drawing ellipses is `CENTER` so you can omit this line : `ellipseMode(CENTER);`

Then you can take a look at the reference for the [foor loop](https://processing.org/reference/for.html).

The basic structure is the following :

```auto
for(int x = start; x < max_x; x += increment){
  // Do something
}

```

It means for `x` equal to `start`, while `x < max_x` then do `x = x + increment` (`+=` means add).

So in your example, you can do something like this :

```auto
for(int x = 0; x < width; x += 50){
    drawFlower(x, height/2, 30, 10);
}

```

So `x` is going to start at `0` then until it is superior to `width` (it reaches the right side of the window), it’s going to add `50` each time.  
Then we use x when displaying our flower for the x coordinate and `height / 2` for the y position.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 14, 2020, 2:05am UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/4 "2020-06-14T02:05:21Z")

</div>

Hello @alu!  
Yes, you are on the right track regarding using a **for loop to iterate the incremented x position.**  
And yes, to using **an array for the size variable**.

To combine the array with the for loop see below. And please note the comments for clarification.  
I’ve also made some adjustments to the initialization on some of your variables to streamline.

```auto
float x; // in this case better to initialize x in the for loop 
float y = 200;
int [] s = { 50, 20, 80, 100, 30, 60 }; // array list declared and initialized as a global variable
color fcol; // color variable type should be color (not float)

void setup() {
  size(1000, 500);
  background(255);
  noLoop(); // runs once
  
}

void draw() {
  
  int i = 0; // the variable i is used to increment through the int[]s array for each unique size

  for (x = 100; x<700; x+=100) { // for loop increments for each instance of the flower
    fcol +=50; // add +50 to each iteration of color
    drawflower(y, s[i], fcol); // y position, size as noted in array, color
    
    i++; // each loop iterates to next size element in the array and draws flower at new size
  }
  
}

void drawflower(float y, int s, color fcol) {
  ellipseMode(CENTER);
  fill(fcol);
  ellipse(x, y, s, s);
  stroke(0);
  line(x, y+s/2, x, height);
}

```

Check out D Shiffman’s playlist for arrays for a great introduction.  
Hope this helps!

🤓

https://www.youtube.com/embed/videoseries?list=PLRqwX-V7Uu6bO9RKxHObluh-aPgrrvb4a&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1

---

<div class="post-metadata">

**Author:** ![alu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alu/32/9639_2.png) [@alu](https://discourse.processing.org/u/alu)\
**Post date:** [July 2, 2020, 7:03pm UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/5 "2020-07-02T19:03:40Z")

</div>

Thank you @glv !! These are great and I’ll probably come back to this often.

Too many resources can get a little overwhelming for beginners like me though 😅I didn’t really know what I was looking for…but once I get the hang of it I’ll be checking back! Thank you!!

---

<div class="post-metadata">

**Author:** ![alu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alu/32/9639_2.png) [@alu](https://discourse.processing.org/u/alu)\
**Post date:** [July 2, 2020, 7:52pm UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/6 "2020-07-02T19:52:48Z")

</div>

@josephh Thank you so much for the tips! This is what I was trying at first, but it still only replicates the first flower, and makes a line of identical flowers… I’m not sure how to get it to draw a different flower each time.

---

<div class="post-metadata">

**Author:** ![alu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alu/32/9639_2.png) [@alu](https://discourse.processing.org/u/alu)\
**Post date:** [July 2, 2020, 7:54pm UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/7 "2020-07-02T19:54:45Z")

</div>

@debxyz Thank you so much!! This is the closest to what I was hoping to achieve! I guess I probably will have to learn how to use arrays properly to figure it out. But I need some of the parameters of the drawflower to remain separate from the array… I’m reposting my code here to show what I mean.

---

<div class="post-metadata">

**Author:** ![alu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alu/32/9639_2.png) [@alu](https://discourse.processing.org/u/alu)\
**Post date:** [July 2, 2020, 8:00pm UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/8 "2020-07-02T20:00:50Z")

</div>

Thanks for your help everyone, I guess i should clarify a little further. I’m working on a small infographic, so in my beginner brain I have a _LEGEND_ made up of floats! I want to apply those floats to the flower, and each new flower to display its own unique combination of the values in the legend.

So I am still trying to figure out how to get the X position to increment by +50 while retaining the unique values in brackets.

Does this make sense? I tried applying @debxyz array solution to this but I got a bit tangled up in it again. Any more help suggestions is highly appreciated 😊🙏

```auto
float x = 100;
float y = 100;
 
// LEGEND
// type
float dark = 0;
float light = 200;
//outer ring thickness
float thin = 1;
float thk = 5;

void setup() {
  size(1000, 500);
  background(255);
}

void draw() {   
    drawflower(x, y, 150, 150, light, thin);
    drawflower(x, y, 140, 140, light, thin);
    drawflower(x, y, 130, 130, light, thin);
    drawflower(x, y, 120, 120, dark, thk);
    drawflower(x, y, 110, 110, light, thin);
    drawflower(x, y, 100, 100, dark, thin);
  }

void drawflower(float x, float y, float w, float h, float type, float ring) {
  fill(type);
  ellipse(x, y, w, h);
  stroke(ring);
  line(x, y+w/2, x, height);
}

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [July 3, 2020, 1:28am UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/9 "2020-07-03T01:28:29Z")

</div>

> [@alu](#):
>
> how to get the X position to increment by +50

Based on your code as currently set up, **the answer to your question is actually IN your question…**

> [@alu](#):
>
> ```auto
> drawflower(x, y, 150, 150, light, thin); 
> drawflower(x+50, y, 140, 140, light, thin);
> drawflower(x+100, y, 130, 130, light, thin);
> etc
> 
> ```

**Or, add an int variable and initialize it to 50 for the +50 increment.**

```auto
float x = 100;
float y = 100;
int add_x = 50; //+50 increment

// LEGEND
// type
float dark = 0;
float light = 200;
//outer ring thickness
float thin = 1;
float thk = 5;

void setup() {
 size(1000, 500);
 background(255);
}

void draw() {   
   drawflower(x, y, 150, 150, light, thin);
   drawflower(x+add_x, y, 140, 140, light, thin); //increment X1
   drawflower(x+add_x*2, y, 130, 130, light, thin); //increment X2
   drawflower(x+add_x*3, y, 120, 120, dark, thk); //increment X3
   drawflower(x+add_x*4, y, 110, 110, light, thin); //increment X4
   drawflower(x+add_x*5, y, 100, 100, dark, thin); //increment X5
 }

void drawflower(float x, float y, float w, float h, float type, float ring) {
 fill(type);
 ellipse(x, y, w, h);
 stroke(ring);
 line(x, y+w/2, x, height);
}

```

First version, you do the math. Second version, the code does the math.  
🤓

---

<div class="post-metadata">

**Author:** ![alu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alu/32/9639_2.png) [@alu](https://discourse.processing.org/u/alu)\
**Post date:** [July 3, 2020, 3:35pm UTC](https://discourse.processing.org/t/very-simple-question-i-think/21851/10 "2020-07-03T15:35:19Z")

</div>

OH! Awesome! This does make it a bit more streamlined. Thanks!!