Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
      • Verschachtelten Schleife (de)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
    • Simple Collision Detection
    • Sound
    • Typography

/
Nested Loops (en)

Nested Loops (en)

Nov 05, 2019

deutsche Version


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




, multiple selections available,
{"serverDuration": 32, "requestCorrelationId": "f796715c0bf54061adaf098f2414b400"}