Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

Programming Questions

margaretn..

Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

in Programming Questions • 1 month ago

Hello Members,

My name is Margaret Noble and I am an artist and a teacher. I have started a website documenting of my entry level exploration into making art through the practice of computer programming with Processing. It will serve as curriculum that I will implement the following school year with high school students.

http://codingforart.com/

I am moving very slowly and methodically with Shiffman's book, Learning Processing. I have only learned (not mastered) basic: for loops, while loops and boolean conditionals. I am trying to design a project to practice these tools that are interesting and fun art projects. This would be for my students later but I want to pilot the project myself now. I was thinking of optical art projects whereby students wrote pseudo code first from a simple 3d graphic image and then used for loops, while loops and boolean operators to make it come alive.

My test case, something like this:

But, I keep failing. My strategy was to just figure out how to code the white quads and then use that knowledge for the green and blue quads. Here's my pseudo code for the white quads:

Declare variables for the white quad points: wx1,wy1,wx2,wy2,wx3,wy3,wx4,wy4.

Start a white quad with vertices (wx1+0,wy1+15,wx2+30,wy2+0,wx3+60,wy3+15,wx4+30,wy4+30);

AND

Repeat this white quad on the horizontal Xaxis (wx1,wx2,wx3,wx4) every 60 pixels and stop when wx3 gets to the width of size().

then

drop down the white quad by 60 pixels vertically on all Yaxis (wy1,wy2,wy3,wy4) points and shift all Xaxis points (wx1,wx2,wx3,wx4) to left by -30 horizontal Xaxis pixels.

And

Repeat this white quad on all horizontal axis points every -60 pixels until you get to 0.

This is as far as I got with code after a few failed attempts, not efficient or really working:

//TRYING TO JUST GET LIGHT COLORED QUADS TO REPEAT WITH ONLY WHILE LOOPS, FOR LOOPS AND BOOLEAN OPERATORS
//white vertices
int wx1 = 0;
int wy1 = 0;
int wx2 = 0;
int wy2 = 0;
int wx3 = 0;
int wy3 = 0;
int wx4 = 0;
int wy4 = 0;
void setup () {
size (400,400);
background (255);
}
void draw () {
noStroke();
//green quad
fill (10,144,51);
quad (0,15,30,30,30,75,0,60);
//blue quad
fill (25,186,191);
quad (30,30,60,15,60,60,30,75);
//white quad
if ((wx1 > width) && (wx1 < 0)){
}
fill (247,235,235);
quad (wx1+0,wy1+15,wx2+30,wy2+0,wx3+60,wy3+15,wx4+30,wy4+30);
quad (wx1+30,wy1+75,wx2+60,wy2+60,wx3+90,wy3+75,wx4+60,wy4+90);
quad (wx1+60,wy1+135,wx2+90,wy2+120,wx3+120,wy3+135,wx4+90,wy4+150);
quad (wx1+90,wy1+195,wx2+120,wy2+180,wx3+150,wy3+195,wx4+120,wy4+210);
quad (wx1+120,wy1+255,wx2+150,wy2+240,wx3+180,wy3+255,wx4+150,wy4+270);
quad (wx1+150,wy1+315,wx2+180,wy2+300,wx3+210,wy3+315,wx4+180,wy4+330);
quad (wx1+180,wy1+375,wx2+210,wy2+360,wx3+240,wy3+375,wx4+210,wy4+390);
quad (wx1+210,wy1+435,wx2+240,wy2+420,wx3+270,wy3+435,wx4+240,wy4+450);
wx1+=60;
wx2+=60;
wx3+=60;
wx4+=60;
}

So, I am hoping to find out if there a solution that only uses for loops, while loops and boolean conditionals?

Hope to get feedback soon from the forum - thank you!!!!!!

Replies(24)

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Some tips:

Use variables to represent all coordinates.
Figure out the placement sequence. That is, how much a quad() is away from each.
Create a loop w/ an iterator update based on that difference.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Hi GoToLoop,

Thanks for replying!!!!

Ok, I understand tip #2 - I think :-).

With your reply, tip #3 "iterator updater." I am not familiar with this, did not find in Processing reference but I found in Java reference and it says that this is an "object" (which I haven't learned yet - next chapter). So, it sounds like I need to learn more about objects before I can achieve this goal. In your opinion is that correct?

Finally, can you explain a little more about what you mean for tip "#1 Use Variables to represent all coordinates."

In my mind, I thought I did this for at least the white quads with the following:

//white vertices
int wx1 = 0;
int wy1 = 0;
int wx2 = 0;
int wy2 = 0;
int wx3 = 0;
int wy3 = 0;
int wx4 = 0;
int wy4 = 0;
// THANKS AGAIN FOR REPLYING!!!!!

tfguy44

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Yeah, that's a pretty good, basic programming project. Here's how I'd do it:

size(500, 500);
background(0, 255, 0);
noStroke();
fill(100, 150, 200);
for (int y=0; y<=height/30; y++) {
for ( int x=0; x<=width/20; x++) {
if ( (x+y)%2 == 0) {
rect(x*20, y*30, 20, 30);
}
}
}
fill(255);
for (int y=-2; y<=height/30; y++) {
for ( int x=-2; x<=width/20; x++) {
if ( (x+y)%2 == 0) {
quad(x*20, y*30, x*20+20, y*30-10, x*20+40, y*30, x*20+20, y*30+10);
}
}
}

margaretn..

Re: Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

28 days ago

Hi tfguy44,

Why did you choose to divide the height by 30 and the width by 20 for the X and Y variables? I removed these two divisors for both the blue and white shapes and I obtained the same results.

Thanks!

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

The word iterator is what a control variable of a loop block is called.
Although Java and other languages has a special object called Iterator;
that's not exactly what I meant.

At for the tfguy44's solution, he used variables x & y as loop iterators.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Hi tfguy44!

Wow, so fun to see it is so elegantly solved and working - thank you!!!! I am going to spend time with this to make sure I really get it!!

The only foreign bits of code I see are:

lines 5,6,13,14: y++ and x++

are these shorthand for something else?

line 15: %2

does this mean 2% of the value in the ()?

Thanks again!!!!

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Hi GoToLoop,

Ok, it is still not clicking for me but it sounds like between what you explained and the solution that tfguy44 presented that I have the tools to figure it out. Hopefully I won't stare at this problem for more then 10 weeks ;-)

Thank you!!!!!

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Unary operators ++ and -- respectively increases and decreases by 1 a value stored in a variable.

Binary operator % gets the rest of a division. That is, its modulo.

Basically, tfguy44 implements it to find out whether x+y is even or odd.
Another way to do it is -> (x+y & 1) == 0.

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Finally, can you explain a little more about what you mean for tip "#1 Use Variables to represent all coordinates."?

If we use absolute numbers for drawing coordinates, we can't change them to show up elsewhere at the screen.
If variables are used, in 1 place, we can determine where an object shows up.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Hi GoToLoop,

So, what would the pseudo code of the unary operator:

for (int y=-2; y<=height/30; y++) {

look like here:

the value int y is equal to -2.

when y is less than or equal to the height divided by 30

then add _______?what value? to y ____??? <--help :-)

and for binary operator:

if ( (x+y)%2 == 0) {

does the pseudo code says:

if x plus y is divided by 2 and has a remainder equivalent to 0

---

Also, side question. Is there a protocol/etiquette for how many questions/type of questions is ok to publish in the Programming questions forum? I know I will have many to come...

tfguy44

Re: Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

First of all y++; is shorthand for y = y + 1;
Similarly, y--; is the same as y = y - 1;

Next,

for (int y=-2; y<=height/30; y++) {

}

means:

1) Start with y equal to negative two.
2) Check if y is less that the window height divided by 30.
3) If it is, do what is inside the for loop. If not, skip to the end of the for loop.
4) After that is done, add 1 to y.
5) Go back to step 2.

Finally,

if ( (x+y)%2 == 0) {

Means, as you have put it, if the remainder when (x+y) divided by 2 is 0, do the following.

GoToLoop

Re: Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

First of all y++; is shorthand for y = y + 1;
Similarly, y--; is the same as y = y - 1;

Even though Processing's reference doesn't say a word about it, here are some facts:

To be more exact, only its prefix form ( ++y) is truly equivalent to y = y + 1; or y += 1;
Its postfix form (y ++) got no equivalents.

Same logic applies to the -- unary operator of course.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Hi GoToLoop,

If we use absolute numbers for drawing coordinates, we can't change them to show up elsewhere at the screen.
If variables are used, in 1 place, we can determine where an object shows up.

So, what you are saying is that the flaw in my original code is that by adding numbers to my variables I actually limited what was possible with my code?

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Processing got its own API reference @ http://processing.org/reference/
For example, you'll find a short description about for loop block @ http://processing.org/reference/for.html

Its most common form is composed of 3 parts. Each 1 separated by a semicolon.

for (init; test; update) { }

init: happens once only.
test: a condition expression is checked before entering the loop block.
update: runs at the end of each iteration.

At the update part, we generally change the value of a loop's iterator. The 1 we create @ the init part.
Like I said, operators ++ & -- are just shorthands for increasing and decreasing by 1 a value stored in a variable.

Check those out @ API's reference:
http://processing.org/reference/increment.html
http://processing.org/reference/decrement.html

if x plus y is divided by 2 and has a remainder equivalent to 0.

Not equivalent, but exactly zero.

Basically, whether that expression results as either an even or an odd value.

Is there a protocol/etiquette for how many questions/type of questions is ok to publish in the Programming questions forum?

As long it's pertinent to the problematic code, ask as much as you need/wish.
If it's about another code, create another thread.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Dear GoToLoop and tfguy44,

WOW! Thank you very, very much for this amazing support. It is hard to teach oneself. I will digest this all and move forward.

Thanks again!

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Soooo, now I just got confused...:-)

y++ is not the same as y = y +1

it should have been written

++y to mean the same thing as y = y +1 ???

even if y++ works in the code solution above???

Re:

First of all y++; is shorthand for y = y + 1;
Similarly, y--; is the same as y = y - 1;

To be more exact, only its prefix form ( ++ y) is equivalent to y = y + 1; or y += 1;
Its postfix form (y ++ ) got no equivalents.

Although Processing's reference doesn't say a word about it.

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

Generally, ++var & var++ (and --var & var--) work just the same.

It's just that there are special situations at which we get different outcomes
depending whether its prefix or postfix form is used.

For now, you don't need to worry about those special cases.

Moreover, if they're used isolated, just var++ or var--, w/o being part of an expression,
its order form doesn't matter and it's completely safe to use either.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

whew - got it! thanks!!!

tfguy44

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

int two = 2;

int alsoTwo = 2;

int iGetTwo = two++; // Return the value, then increment the value.

int iGetThree = ++alsoTwo; // Increment the value, and then return the incremented value.

println( two ) // Was incremented and now prints a 3.

println( alsoTwo ) // Was also incremented, and so it prints a 3 too.

println( iGetTwo ); // Prints 2.

println( iGetThree ); // Prints 3.

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

1 month ago

I know this will all make sense one day soon :-) thanks tfguy44.

GoToLoop

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

28 days ago

tfguy44 's solution basically draws a chess board in 1 loop.
Then the 2nd loop draws rhombi over it to form cubes.

In a very recent post I've made a chessboard:
http://forum.processing.org/topic/how-to-recreate

This time, I've added quad() on it as well to create a similar effect for cubes.
Check it out:

// http://forum.processing.org/topic/how-to-recreate

// http://forum.processing.org/topic/
// possible-to-create-optical-art-with-only-for-loop-while-loops-
// and-boolean-operators-for-high-school-student-project

size(500, 500);
noLoop();
smooth(4);
noStroke();
background(#F00020);

final int dim = 50, d = dim/3, dd = dim << 1;

for (int row = 0; row < height; row += dim)
  for (int col = (row/dim & 1) == 0 ? -dd : -dim; col < width; col += dd) {
    fill(#0000F0);
    rect(col, row, dim, dim);

    fill(0300);
    quad(col, row, col+dim, row-d, col+dd, row, col+dim, row+d);
  }

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

28 days ago

Hi GoToLoop,

I was just exploring how to dissect ways of thinking with optical art and I also noticed the same interesting ways of making simple graphical choices to create the designs. Unfortunately, what I realized with respect to my students pursuing the basic project I was thinking about earlier is that the optical example I picked was very easy:

But, I didn't want my students to all make the same thing, I wanted to give them the freedom to pick. Unfortunately most of these puzzles are substantially harder/more complicated to simplify graphically for loops (in my modest beginner opinion):

These are all much more complicated and it seems to me that it might best to use this project later for a more advance coding project when we get deeper into more Processing.

Jo Wood

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

28 days ago

My approach to the original cubelike op-art would be a slightly more 'object-oriented' one. In this case I mean that I would work out how to draw a single cube, then repeatedly draw that cube over a grid.

I generally encourage my students to sketch out what they want to do on paper first so that it is easier for them to work out how to translate the sketch into the geometry necessary to reproduce it. So for the cube, placing the three visible faces so they fit inside a square grid is easy with a simple sketch:

I would then place all the code to draw a single cube inside its own method (or function) allowing its position in the grid to be specified as parameters (I don't know if you will have covered methods and parameters with your students at this stage, but they are very useful for projects that involve repeated drawing of some shape). This approach will probably make it easier for students to transform and adapt the basic shape to produce the kind of examples you have shown.

Here's my code:

float gridSize;        // Size of one cube in pixel units.

void setup()
{
  size(400, 300);
  background(255);
  noLoop();
  
  gridSize=40;
}

void draw()
{  
  int numRows = int(height/(0.75*gridSize));
  int numCols = int(width/gridSize);
  
  for (int row=0; row<=numRows; row++)
  {
    for (int col=0; col<=numCols; col++)
    {
      drawCube(row,col);
    }
  }
}

  
void drawCube(int row, int col)
{
  float xPos = (col+0.5*(row%2))*gridSize;
  float yPos = row*gridSize*0.75;
  
  noStroke();

  // Top face.
  fill(245, 229, 192);
  quad(xPos,yPos, xPos-0.5*gridSize,yPos-0.25*gridSize,

       xPos,yPos-0.5*gridSize, xPos+0.5*gridSize,yPos-0.25*gridSize);
 
  // Left face
  fill(234, 96, 69);
  quad(xPos,yPos, xPos,yPos+0.5*gridSize,

       xPos-0.5*gridSize,yPos+0.25*gridSize, xPos-0.5*gridSize,yPos-0.25*gridSize);

  // Right face  
  fill(248, 202, 77);
  quad(xPos,yPos, xPos+0.5*gridSize,yPos-0.25*gridSize,

       xPos+0.5*gridSize,yPos+0.25*gridSize, xPos,yPos+0.5*gridSize);
}

margaretn..

Re: Possible to create optical art with only: for loop, while loops and boolean operators for high school student project?

28 days ago

Hi Jo Wood,

Thanks for sharing this. That is more aligned with how I tackled the problem initially but I got really fascinated with how the code could be radically simplified as shown by the code in tfGuy44's solution. But, I totally agree and find value in your suggestion of students working out their designs and geometry on paper first. Thanks for sharing your process.

I won't be initiating the curriculum with my students till next year as I am learning Processing for the first time myself now. I am on the hunt for creative and meaningful beginning projects in Processing so if you have a source you use or have any suggestions then I would be thrilled to get that info. Thanks.

Margaret

Top Reply