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.
Index › Programming Questions & Help › Programs › what's the logic of this code???
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
what's the logic of this code?????? (Read 1045 times)
milc
what's the logic of this code??????
Sep 21st, 2007, 9:52pm  
hi,

i'm sorry to post a question from my personal dumbness,
but i MUST understand a code from Ira's book.
He mentioned that "take your time to understand this code" in his book and kindly included no explanation at all.

i definitely took my time but it gets more and more confusing.

what i don't understand is the logic.
i can't find any logic in this code.
the logic with makes "auto-layout".
all i can see is just some values set by someone who knows the logic very well.
but i can't see that logic because i don't know.

i know that you guys have not much time to explain line by line about such a basic code, but i think it's very important to me to get an answer so that next time i have a problem, i can imitate the way of reading code of that angel-person who will answer for me.

thank you very much,
please help me.

here's the code. (i removed the part that does stroke cap style, to simplify a bit.)


Quote:


/*
Auto Layout
Ira Greenberg, November 21, 2005
*/
size(500, 300);
background(255);

strokeWeight(2);
int shapes = 10;
//padding value determines size and distances between the forms
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; i<shapes; i++){

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



'sorry for my english..
Back to top
 
 
polymonkey
Re: what's the logic of this code??????
Reply #1 - Sep 21st, 2007, 11:58pm  
in the for loop you are drawing a square with four lines. at the end of the loop you increase the value of x and then start the loop again and draw another square. this keeps happening while i is less than the the number of shapes.

the trick is that the size of the lines comes from the bit of math before the loop that sets the length of the a line to w. w is the width minus a padding value divided by the number of shapes.

An easy way of seeing how it works is to copy it into processing and start changing the numbers.

The weirdest part is the setting of the colSpan variable. that bit is a little confusing.

hope this helps
Back to top
 
MattD(polymonkey)
WWW  
fjen
Re: what's the logic of this code??????
Reply #2 - Sep 22nd, 2007, 7:55am  
Code:

size(500, 300); 
background(255); 
 
strokeWeight(2); 
int shapes = 10; 
//padding value determines size and distances between the forms 
int padding = 200; 
 
float rectW = (width-padding)/shapes; 
float rectH = rectW; 
float colSpan = padding/(shapes+1.0); 
float x = colSpan; 
float y = height/2 - rectH/2;
float rectDist = rectW + colSpan;

for (int i=0; i<shapes; i++) {
    
  rect( x,y, rectW,rectH );
  x = x + rectDist;
  
}
Back to top
 
WWW  
milc
Re: what's the logic of this code??????
Reply #3 - Sep 26th, 2007, 11:26am  
thank you for the replies.

i still don't really get it.
but i think i'll skip it for now, if not, i'm going crazy.

what i don't understand is the math part,
(i didn't even finish highschool!!)
what the hell is w??
ok, it's a width-padding/shapes but with what logic it has to be added to each point value of the lines???
wow...

it'll be ok, thanks.
Back to top
 
 
fjen
Re: what's the logic of this code??????
Reply #4 - Sep 26th, 2007, 11:56am  
"w" is the name of a variable holding the value for the width of the rect. that's why i used "rectW" instead ..

the part:
w = (width - padding) / shapes;

calculates the width for the rects to be the width of the window devided by the number of rects to show. the padding adds the space between the rects, otherwise they would be edge to edge. clear?

F
Back to top
 
WWW  
milc
Re: what's the logic of this code??????
Reply #5 - Sep 26th, 2007, 3:06pm  
Quote:


size(500, 300);  
background(255);  

strokeWeight(2);  
//number of rectangles
int shapes = 10;  
//padding value adds the space between the rects
int padding = 200;  

//the width for the rects to be the window devided by the number of rects
float rectW = (width-padding)/shapes;  
//and the height for the rect, smae as rectW, that's why rects are squares?
float rectH = rectW;
// what is "colSpan"???
float colSpan = padding/(shapes+1.0);
//using "colSpan" for rect's x postion.
float x = colSpan;  
//rect's y position is half of the height and then substract half of the rect's height,
//to be positioned in the center...i guess.
float y = height/2 - rectH/2;
//the distance between rects, rect's witdth plus "colSpan"(space between rects
//devided by number of shapes plus one); this part, i really don't get it.
float rectDist = rectW + colSpan;

//make loop
for (int i=0; i<shapes; i++) {
   
 rect( x,y, rectW,rectH );
 //once the first rect are drawn, then x position of rect are added by rectDist value,
 //so it draws again, but in right side, with proper padding amount.
 x = x + rectDist;
 
}

//what is the difference between padding and colSpan?
//what's "colSpan" means?? collective span?? "span" means "lentgh of a whole", i guess..
Back to top
 
 
fjen
Re: what's the logic of this code??????
Reply #6 - Sep 26th, 2007, 3:48pm  
colSpan is short for column-span.

padding is a total amount for all columns together, therefore it has to be devided by the number of shapes:
float colSpan = padding/(shapes+1.0);
the (+1) results is because you want the space in between each two rects (which would be shapes-1), plus left and right:
"cRcRcRc" ( R = rect, c = colspan )

this answers your question about rectDist, it's the distance between two rects x positions, therefore it's one rects width plus one colspan ("cR" in the example above).

yes, rectH = rectW makes them squares.

clearer?
F
Back to top
 
WWW  
milc
Re: what's the logic of this code??????
Reply #7 - Sep 26th, 2007, 4:55pm  
thank you very much fjen for your kindness and patience.
below, I wrote everything i understood, I hope that it's correct.
I finally feel like to find out some logic, and it really excites me! i have lots of fun too.
I have to analyse some more codes in this way to transform my brain in programmer's one.
your replies helped me a lot to start that process.

I have to buy you a diner or something if you were around.

god bless fjen, thank you very much.



Quote:


 size(500, 500);  
background(255);  

strokeWeight(2);  
//number of rectangles
int shapes = 25;  
//total amount of spaces between shapes: if this value augments, there will be more
//spaces, therefore rects become smaller.
int padding = 200;  

//logically, a rect's width has to be (width-total spaces)/number of shapes
float rectW = (width-padding)/shapes;  
//same as width, that makes square, if i go like; rectH = rectW*2, it becomes
//as i expect.
float rectH = rectW;
//colSpan is a space between rects, while padding is a whole spaces.
//+1 is because i need sapces each side of square.
float colSpan = padding/(shapes+1.0);
//using "colSpan" for rect's x INITIAL postion. why? becuase rect starts to draw
//after a space (colSpan). Otherwise, it will stick to the window.
float x = colSpan;  
//rect's y position is half of the height and then substract half of the rect's height,
//to be positioned in the center...i guess. (almost sure about this)
float y = height/2-rectH/2;
//rectDist has to be initialized to repeat the draw excution properly.
//the first square satrts with left space, then square(rectW), then right space(colSpan)..so on.
float rectDist = rectW + colSpan;

//make loop
for (int i=0; i<shapes; i++) {
   
 rect( x,y, rectW,rectH );
 /*this part re-initialize rest's x position according to rectDist.
 if i add  " y = y + rectDist; ", it'll do the same for y position.
 but it goes out of the frame, why? because i didn't give colSpan value to
  y position. to do this, make float y = colSpan; */
 x = x + rectDist;
 //y = y + rectDist;
 
}  
Back to top
 
 
Ira
Re: what's the logic of this code??????
Reply #8 - Sep 26th, 2007, 6:47pm  
milc,
Sorry for the confusion. Even at over 900 pages, I apparently needed to add some more. I think it's great that you want to really understand this stuff and not just plug it in–any of my students reading this, please take note.

Thanks to the excellent responders who covered my butt.

Ira
Back to top
 
Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas
WWW irarobinian  
milc
Re: what's the logic of this code??????
Reply #9 - Sep 26th, 2007, 8:23pm  
you are the author of the book!

hey, i love your book, it's great.
of course, for me it's difficult but it's great to have the opportunity to learn Processing methodically thanks to this book.(before, i struggled with only Referneces on the web...)

I'd love to see some more creations from you,
keep it comin'!
Back to top
 
 
Ira
Re: what's the logic of this code??????
Reply #10 - Sep 26th, 2007, 9:05pm  
thanks milc.
I'm happy you find the book useful.
I do have another more advanced book in my head, but I'm currently still recoving from the last one.
Back to top
 
Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas
WWW irarobinian  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›