We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › Auto layout program. Dont understand.
Page Index Toggle Pages: 1
Auto layout program. Dont understand. (Read 922 times)
Auto layout program. Dont understand.
Aug 3rd, 2009, 2:18pm
 
Hi, im doing the auto layout exercise from the book CREATIVE CODING AND...

i more less understand it , but if someone could explain a bit how it all works i would be very thankfull.


Some questions.


Where does the i++ ( in line 15) affects ?

I see there is a condition if "i" is smaller than shapes(3) then i++
bu then i dont see anything using that "i"


Then, how come does there can be plotted 3 or more shapes and there are only 4 line functions???


So could you somehow explain it in english ? Please keep in mind im a newbie.

thanx !!! Smiley


Code:
size(500,300); 
smooth();
background(255);
int[]caps = {ROUND, PROJECT, SQUARE};
strokeWeight(20);
int shapes=6;
int padding = 200;
float w=(width-padding)/shapes;
float h=w;
float colSpan=(width-shapes*w)/(shapes+1);
float x = colSpan;
float y=height/2-h/2;
for(int i=0,j=0;i<shapes; i++){
strokeCap(caps[j++]);
if(j>2)j=0;
line(x, y, x+w, y);
line(x+w,y,x+w,y+h);
line(x,y+h,x+w,y+h);
line(x, y+h, x, y);
x+=w+colSpan;
}

 
 
Re: Auto layout program. Dont understand.
Reply #1 - Aug 3rd, 2009, 3:11pm
 
If you mean the i++ in:

Code:
for(int i=0,j=0;i<shapes; i++){ 
   strokeCap(caps[j++]);
   if(j>2) j=0;

   line(x, y, x+w, y);
   line(x+w,y,x+w,y+h);
   line(x,y+h,x+w,y+h);
   line(x, y+h, x, y);
   x+=w+colSpan;
}


Then that's not too difficult to explain.  That's a 'for loop'.  Basically it's used to repeat the block of code contained within {braces}, which is how you manage to draw six shapes with only 4 lines: that section of code is being repeated over and over and the variable i is used to count how many times the loop repeats.

So i starts off as 0 (the 'int i=0' declares and sets the variable), then you have a condition (in this case 'i<shapes'), which determines the number of repetitions, and then you have the increment: i++.  Without this i wouldn't change and you would have an infinitely repeating loop.
i++ is simply a shorthand way of saying: i = i+1;

So basically you're adding one to the value of i with each loop.  So in the first loop it will be equal to 0, in the second loop it will be equal to 1, in the third loop it will be equal to 2 and so on.  You might think it's weird that it starts at zero, but if you want the loop to repeat for the number of shapes then that's the best way to do it, especially when you start working with arrays (but maybe leave those till later Wink ).

This is because of the condition 'i<shapes'.  shapes=6, so you want to draw six shapes and want the loop to repeat 6 times.  If i started at 1 you would find that the loop only repeats 5 times: not what you wanted.  You could start with i=1, but you would then have to make your condition 'i<(shapes+1)' which makes less sense and is just plain ugly.

In your example i is just being used as a counter, but it's not unusual to use it in the code too, but I expect you'll come onto an exercise explaining that later, and also the many different ways of using for loops.

Re: Auto layout program. Dont understand.
Reply #2 - Aug 4th, 2009, 4:37am
 
Thanx so much man!


So the for loop runs once but does many things at once.

I though that i needed to have a void draw function in order to draw more than one shape with 4 lines each one.


And the "i" , of course , its used in the local scope of the for loop.

I´ll have to revise the code again at home and really understand it all so i can move on.

Thanx !!! Cheesy
Re: Auto layout program. Dont understand.
Reply #3 - Aug 4th, 2009, 7:44am
 
TweakingKnobs wrote on Aug 4th, 2009, 4:37am:
So the for loop runs once but does many things at once.


Not quite:  it's a loop so it doesn't run once but repeats itself over and over.  In fact it repeats and keeps repeating until the condition fails - i.e. when i is no longer less than squares (i.e when i==6).  Perhaps it's easier to explain it with code:

Code:
int repetitions = 5;

void setup() {

 println("before the for loop");

 for(int i=0; i< repetitions; i++) {
   println("for loop.  i = " + i);
 }

 println("after the for loop");  

}


When you run this notice how the for loop repeats itself until i is no longer less than repetitions.  Also notice that the code after the for loop (i.e. 'println("after the loop")') only executes after the for loop has completed the set number of repetitions.

Hopefully that should make it clearer.  This is fairly fundamental so you would do well to make sure you understand it before moving on to more complex stuff...
Page Index Toggle Pages: 1