how to use for() to do this?

Programming Questions

ww1way

in Programming Questions • 2 years ago

also I wonder if it's possible or not.

as you saw, I wrote the rect one by one, I know it's stupid, and it does have some clear patterns, but every time I try to put it into a for(), the image go weired...

help...

Replies(14)

arthurG

Re: how to use for() to do this?

2 years ago

It's possible, here is a way (not the most elegant I think) :

void setup () {
size (300,300);
}
void draw () {
int nX = 12;
int nY = 12;
pushMatrix();
for (int j=0; j<nY; j++) {
pushMatrix();
for (int i=0; i<nX; i++) {
pushMatrix();
rotate (PI/4.0f);
rect (0,0,20,20);
popMatrix();
translate (28.0f,0.0f);
}
popMatrix();
translate (0,28.0f);
}
popMatrix();
}

ww1way

Re: Re: how to use for() to do this?

2 years ago

after run your code, I noticed that the lines of your result are very smooth, but ours are a bit rough, do you know why?

ww1way

Re: how to use for() to do this?

2 years ago

thanks arthurG! one of my smart friends gave me an elegant answer, but I'd like to see more possibilities

PhiLho

Re: Re: how to use for() to do this?

2 years ago

Don't give code as screenshots, we cannot copy/paste it...

arthurG

Re: how to use for() to do this?

2 years ago

I think your lines are a bit rough because you use integers instead of floats.

Try to replace rotate(PI/4) by rotate(PI/4.0f) or translate(i*LENGTH*SQRT2...) by translate(((float)(i*LENGTH))*SQRT2...).

ww1way

Re: Re: how to use for() to do this?

2 years ago

I'm sorry to tell you, after I amended the code as you suggested, the lines are still rough...

and I think maybe put it within draw() will repeat drawing and make the line smooth, but after my test, the lines are still rough..

PhiLho

Re: Re: how to use for() to do this?

2 years ago

Actually, if you remove the .0f occurrences from your code, you get the exact same result... PI constant is already a float, and so is SQRT2.
Note: in the PDE, no need for the trailing f, but perhaps you code in Eclipse...

ww1way

Re: Re: how to use for() to do this?

2 years ago

yes..i do think so too

fiveagon

Re: how to use for() to do this?

2 years ago

Try

float LENGTH = 15.0

and most importantly

size(230, 230);
smooth();

smooth()

;)

ww1way

Re: Re: how to use for() to do this?

2 years ago

thank you. of course I know smooth(), but I think now, the main issue is without smooth(), why arthurG's result is smoother than mine, it's an interesting question I think (maybe relate to some functions or features of p5?). lol

about.me/ww1way

PhiLho

Re: how to use for() to do this?

2 years ago

I was intrigued by the smoothness question. Actually, it is not smooth in the sense of anti-aliasing (smooth()), but in the sense of the diagonals are pixel-perfect, regular.
I played with various parameters, and finally found out it worked because of... integer values! And it works only for some values of LENGTH...
Re-creating the original sketch:

void setup() {
size(230, 230);
int LENGTH = 20;
int diagLen = int(LENGTH * sqrt(2));
println(diagLen);
for (int i = 1; i < 11; i++) {
for (int j = 1; j < 11; j++) {
pushMatrix();
translate(i * diagLen, j * diagLen);
rotate(PI / 4);
translate(-LENGTH / 2, -LENGTH / 2);
rect(0, 0, LENGTH, LENGTH);
popMatrix();
}
}
}

ww1way

Re: Re: how to use for() to do this?

2 years ago

it's interesting, is it a bug or limitation of p5?

ww1way

Re: Re: how to use for() to do this?

2 years ago

ye, I changed the rect width and height of arthurG's code into something rather than 20, the lines became rough too, interesting

PhiLho

Re: how to use for() to do this?

2 years ago

Not bug or limitation of Processing itself, rather more a limitation of converting floats to int (pixel positions), I think.

Top Reply