Interaction Design Wiki ･ Creative Coding

Nested Loops (en)

It's possible to nest loops inside other loops.

Hier is an example with a built-in Screen Shot-function

void setup()
{
  size(600,600);      
  strokeWeight(1);    
}
  
void draw()
{
  background(255);    // def. background colour 
  
  for(int x = 0; x <= width; x+=30)
  {
    for(int y = 0; y <= height; y+=30)
    {
        smiley(x,y);        
    }
  }
  
}
  
void keyPressed()
{
  if(key == 's') {
    save("screenShot.jpg");
    println("save the screen to screenShot.jpg");
  }
}
  
// function
void smiley(int x, int y)
{
  noFill();
  ellipse(x,y,18,18);  // head
  
  fill(0);
  ellipse(x - 3,y - 3,2,5);  // left eye
  ellipse(x + 3,y - 3,2,5);  // right eye 
  
  noFill();
  arc(x,y,10,10,radians(20),radians(180-20));  // mouth
}

This example doesn't have a screen output, it generates a PDF-File instead.

import processing.pdf.*;
  
void setup()
{
  size(600,600,PDF,"ornament.pdf");      // def. output resolution
  strokeWeight(1);    // line thickness 
}
  
void draw()
{
  background(255);    // def. background colour
  
  for(int x = 0; x <= width; x+=30)
  {
    for(int y = 0; y <= height; y+=30)
    {
        smiley(x,y);          // funtion call
    }
  }
  
  exit();
}
  
// function
void smiley(int x, int y)
{
  println("smiley");
  noFill();
  ellipse(x,y,18,18);  // head
  
  fill(0);
  ellipse(x - 3,y - 3,2,5);  // left eye 
  ellipse(x + 3,y - 3,2,5);  // right eye 
  
  noFill();
  arc(x,y,10,10,radians(20),radians(180-20));  // mouth
}

Exercise 7

Create a new shape instead of the smiley, and put exactly 100 repetitions on the screen
Modify the colour and/or the shape with each repetition

Example Solution to Exercise 7

Expand source

int W = 60;
void setup() {
  size(660,660);
  noStroke();
  colorMode(HSB);
}

void draw() {
  background(255);
  for  (int i =1; i<=10; i++) {
    for  (int j =1; j<=10; j++) {
      float hue = j*i*2.5;
      fill(hue,150, 255);
      myShape(i*W, j*W); 
    }
  }
}

void myShape(int x, int y) {
  int D = W/3;
  //ellipse(x, y, W, W);
  triangle(x, y-D, x-D, y+D, x+D, y+D);
}