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

    Two hearts overlapped with each other
    Welcome back
    Catch up on the top discussions and highlights from your team.
    /
    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": 13, "requestCorrelationId": "704a785d577e45f484b03dd8579a7741"}