Loading Images and Generative Art

Download this episode

Download Video

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

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.