Very simple question - I think

Processing Coding Questions
1

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…

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?

1 Like
2

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:

:)

2 Likes
3

Hi,

Welcome to the community! :wink:

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.

The basic structure is the following :

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 :

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.

2 Likes
4

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.

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!

:nerd_face:

2 Likes
5

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 :sweat_smile: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!!

1 Like
6

@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.

7

@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.

8

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 :blush::pray:

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);
}
9

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

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

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.
:nerd_face:

10

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

1 Like