Sign in to queue

Description

See images and generative art sketch in action

In this lesson, we look at loading external image files and painting them into our sketch. We also start glitching our logic and play with some simple recursive principles by tweaking PushMatrix() and PopMatrix().

To follow along in Visual Studio, please download the Processing Sketchbook projection.

The finished sketch for this lesson can be found below:

ArrayList bladeImages = new ArrayList();
totalBlades = 12;
Blade[] blades = new Blade[totalBlades];
float targetX, targetY;
float pointerX, pointerY;
float dx, dy;
int width, height;
 
void setup() {
    width = 500;
    height = 550;
    size(width, height);
    noStroke();
    smooth();
    targetX = width / 2;
    targetY = height / 2;
    bladeImages[0] = loadImage("images/blade1.png");
    bladeImages[1] = loadImage("images/blade2.png");
    for (int i = 0; i < totalBlades; i++) {
       Blade blade = new Blade();
       blade.x = width/2;
       blade.y = height/2;
       blade.index = i;
       blade.rotation = i/2;
       blades[i] = blade;
    }
};
 
void draw() {
    dx += ( targetX - pointerX) * .2; 
    dy += ( targetY - pointerY) * .2;
    dx *= .93;  dy *= .93;
    pointerX += dx;
    pointerY += dy;
    fill(color(16, 46, 16, 10));
    rect(0,0,width, height);
    for ( int i = 0; i < totalBlades; i++)  {
      pushMatrix();
      translate(pointerX, pointerY);
      rotate(blades[i].rotation);
      for ( int c = 0; c < 20; c++)    {
        blades[i].growth = c + .3*(dx+dy);
        blades[i].index++;  
        blades[i].render();
      }
      popMatrix();  
    }
};
 
void pointerMove(TouchEvent e) {
  targetX = e.offsetX;
  targetY = e.offsetY;
};
 
class Blade {
  float x = 0;
  float y = 0;
  float growth = 0.0;
  float rotation = 0.0;
  int index = 0;
 
  void render() {
    scale(0.8, 0.8);
    translate(5*this.growth, 0);
    rotate(this.growth);
    image(bladeImages[this.index%2], this.growth * 5, this.growth);
   }
}

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents