Dra­w­i­n­g Shapes with Con­d­i­t­i­o­n­a­l­s and Loops

by Shannon McCabe

Process

Looking at the source code from the tutorial (see below).

  • Show Sketch
/** @peep sketchcode */
size(200, 200); 
beginShape(); 
for (int y = 20; y <= 180; y += 10) {
  if (y % 20 == 0) {
    vertex(80, y);
  } else {
    vertex(40, y); 
  }
} 
for (int y = 180; y >= 20; y -= 10) {
  if (y % 20 == 0) {
    vertex(120, y);
  } else {
    vertex(160, y); 
  }
} 
endShape(CLOSE);

I took parts of this code and played with the numbers and conditions for which statement will run and ended up with the final code (see below).

Final Shapes

  • Show Sketch
/** @peep sketchcode */
size(200, 200);
background(0);
 
beginShape();
for (int y = 20; y <= 180; y += 10) {
  for (int x = 20; x <= 180; x += 10) {
    if ((x % 20) == 0 || (x % 50) == 0) {
      vertex(x-5, y);
    } else {
      vertex(x+10, y);
    } 
  }
} 
for (int y = 180; y <= 20; y -= 10) {
  for (int x = 180; x <= 20; x -= 10) {
    if ((x % 20) == 0 || (x % 50) == 0) {
      vertex(x+5, y);
    } else {
      vertex(x-10, y);
    } 
  }
} 
endShape(CLOSE);
  • Show Sketch
/** @peep sketchcode */
size(200, 200);
noFill();
int x = 20;
int y = 20;
for (int d = 100; d > 10; d -= 5) {
  ellipse(x, y, d, d);
  x += 20;
  y += 20;
}

Comments

Nobody has said anything yet.