I still can’t seem to make this into a GIF… but at least it’s not working at a normal speed.

int nFramesInLoop=20;
int nElapsedFrames;
void setup() {
size(300, 300);
background(20);
}
void draw() {

fill(0, 0, 60, 20);
rect(0, 0, 500, 200);
for (int skyh = 0;skyh<=150;skyh++) { for (int skyv =0;skyv<=150;skyv++) { pushMatrix(); float randstars = random(-20, 20); float randstars2 = random (-20, 20); translate(1+30*skyh+randstars, 1+randstars2 +16*skyv); fill(0); rect(0, 0, 200, 300); fill(255); ellipse(0, 0, 1, 1); popMatrix(); } } //Adding the buildings of the city fill(110); noStroke(); rect(0, 100, 30, 100); //adding lit windows to this particualr building for (int b2=0; b2 < 3; b2++) { for (int b3 = 0; b3<=8;b3++) { pushMatrix(); fill(200, 220, 255); translate(3+10*b2, 110+10*b3); rect(0, 0, 4, 5); popMatrix(); //continuing to add buildings fill(95); rect(120, 120, 150, 80); fill(50); rect(30, 70, 120, 130); fill(255, 200, 0); //adding lights to this particular building also for (int i=0;i<12;i++) { for (int j=0;j<=12;j++) { pushMatrix(); fill(255, 200, 0); translate(32+10*i, 75+10*j); rect(0, 0, 5, 5); popMatrix(); } fill(100); rect(280, 50, 110, 150); fill(70); rect(170, 150, 130, 50); } //adding a reflection in the water for the yellow building fill(0); rect(0, 200, 300, 200); for (int k=0;k<=8;k++) { for (int l = 0; l<=12; l++) { float rand = random(-10, 10); float rand2 = random(-10, 10); pushMatrix(); fill(255, 200, 0, 220); translate(28+rand+15*k, 210+rand2+15*l); //rect(0, 0, 5, 7); //fill(200,100,0,100); rect(0, 0, 18, 3); popMatrix(); } } for (int reflectb2=0;reflectb2<=4;reflectb2++) { for (int reflectb3 = 0; reflectb3<12; reflectb3++) { float randb2 = random(-10, 10); float randb3 = random(-10, 10); pushMatrix(); fill(200, 220, 255, 220); translate(randb2+15*reflectb2, 210+randb3+15*reflectb3); rect(0, 0, 18, 3); popMatrix(); } } } } } [/embed] Here is my code... I need to find a way to randomly generate buildings and their accompanying lights withuot having to do it individually every time! My code finally got so slow I only ever rendered two buildings...

Idea Sketches

After messing around in Processing for a while, I went back to the drawing board and came up with 3 ideas for a gif.

One was really macabre—a stickman getting pulled apart. Decided against that one.

The second idea was to do something cyclic with the idea of erosion—inspired by pearls which form around a grain of sand. In this animation, a white circle would get worn down by black or grey particles around it until it was only one white particle, then it would grow back to its original size, layer by layer.

My third idea was to animate ripples (at some level of fidelity), just to play with color and create something aesthetically pleasing and calming to look at.

Inspiration

By Reza Ali Also by Reza Ali by dvdp

Pearls/Erosion GIF (2nd Concept)

Self-Critique of GIF

My favorite part of creating this GIF was researching GIF art in general. I was impressed and inspired by the works of artists like Reza Ali and dvdp. However, actually creating the types of effects in their GIFs, and creating them at high quality, proved much more difficult than I was expecting. I don’t think my GIF lives up to what I had in my head when I was sketching; the pace of the growth and shrinking of the pearl feels off, as does the motion of the “sand”. I learned a ton from the project; exploring GIFs as a medium, and OOP and particle systems in Processing . That said, I think that the concept I had in mind is one that I will have to come back to in order to execute as well as I would like.

Code

Main

// Global variables 
// for GIF recording template
int     nFramesInLoop = 120;
int     nElapsedFrames;
boolean bRecording; 

// for sketch
ParticleSystem sand;
Pearl pearl;
color backgroundColor = color(0);

void setup() {
  size(600,600);
  pearl = new Pearl(width/2, height/2);
  sand = new ParticleSystem(new PVector(width/2, 50));
  // for recording
  bRecording = false;
  nElapsedFrames = 0; 
  noSmooth() ;
}

// use keypress to trigger recording
void keyPressed() {
  bRecording = true;
  nElapsedFrames = 0; 
  //noLoop();
}

//for recording
void draw() {
  // Compute a percentage (0...1) representing where we are in the loop.
  float percentCompleteFraction = 0; 
  if (bRecording) {
    percentCompleteFraction = (float) nElapsedFrames / (float)nFramesInLoop;
  } else {
    percentCompleteFraction = (float) (frameCount % nFramesInLoop) / (float)nFramesInLoop;
  }

  // Render the design, based on that percentage. 
  renderMyDesign(percentCompleteFraction);

  // If we're recording the output, save the frame to a file. 
  if (bRecording) {
    saveFrame("output/myname-loop-" + nf(nElapsedFrames,4) + ".png");
    nElapsedFrames++; 
    if (nElapsedFrames >= (nFramesInLoop+1)) {
      bRecording = false;
    }
  }
  println("recording " + bRecording);
}

void renderMyDesign(float percent) {
  background(backgroundColor);
  sand.addParticles();
  pearl.run();
  sand.run();
}

Pearl Class

// Pearl class - basically a shrinking and growing circle
class Pearl {
  int x;
  int y;
  float minRadius;
  float maxRadius;
  float currentRadius;
  float growthFactor;
  color pearlColor;
  float epsilon;
  ArrayList borderParticles;

  Pearl(int instanceX, int instanceY) {
    x = instanceX;
    y = instanceY;
    minRadius = 1; // could easily be a parameter
    maxRadius = 170;
    currentRadius = minRadius + 1;
    pearlColor = (255);
    growthFactor = 1.33;
    epsilon = 1;
  }

  int getCenterX() {
    return x + (int)currentRadius;
  }

  int getCenterY() {
    return y + (int)currentRadius;
  }

  void run() {
    update();
    display();
  }

  void update() {
    float diffToMax = abs(currentRadius - maxRadius);
    float diffToMin = abs(currentRadius - minRadius);
    if (diffToMax < epsilon || diffToMin < epsilon) {
      growthFactor*=-1;
    } 
    currentRadius = currentRadius + growthFactor;
  }

  void display() {
    noStroke();
    fill(pearlColor);
    ellipse(x, y, currentRadius*2, currentRadius*2);
  }
}

Particle Class

// A simple Particle class based of class by Daniel Shiffman
// Source: http://processing.org/examples/simpleparticlesystem.html
class Particle {
  PVector location;
  PVector velocity;
  PVector acceleration;
  float lifespan;
  float pSize;
  color pColor;

  Particle(PVector thisLocation) {
    acceleration = new PVector(random(-1, 1), random(-1, 1));
    velocity = new PVector(random(-3, 3),random(-3, 3));
    location = thisLocation.get();
    lifespan = 10000.0;
    pSize = 2;
    pColor = color(30);
  }

  // calculate new values and redraw particle
  void run() {
    update();
    display();
  }

  // Method to update location
  void update() {
    bounceOffWalls();
    avoidPearl();

    acceleration.x *= 0.9;
    acceleration.y *= 0.9;
    velocity.add(acceleration);
    location.add(velocity);
    lifespan -= 1.0;
  }

  // Method to make particles bounce off walls
  void bounceOffWalls() {
    // bounce off the walls
    if (location.x < = 0 || location.x >= width) {
      toggleXVelocity();
    } else if (location.y < = 0 || location.y >= height){
      toggleYVelocity();
    }
  }

  void reverseVelocityDirection() {
    toggleXVelocity();
    toggleYVelocity();
  }

  void toggleXVelocity() {
    velocity.x = velocity.x * -1;
  }

  void toggleYVelocity() {
    velocity.x = velocity.x * -1;
  }

  // Method to avoid pearl
  void avoidPearl() {
    float sumRadii = pSize + pearl.currentRadius;
    float sandPearlDistance = dist(getCenterX(), pearl.getCenterX(), getCenterY(), pearl.getCenterY());
    if (sandPearlDistance == sumRadii) {
      pColor = backgroundColor;
    } 
    else if (sandPearlDistance < sumRadii) {
      reverseVelocityDirection();
      // if growth factor is positive, then particles that hit the pearl
      // should disappear
      if (pearl.growthFactor > 0) {
        lifespan = 0.0;      
      }
      // if the pearl is shrinking, the particles that hit should turn white
      // and have a very short lifespan
      else {
        erodePearl();        
      }
    }
  }

  void erodePearl() {
    if (millis()%2 == 0) {
        pSize = 0.8;
        pColor = color(255);
        lifespan = 10;
        velocity.div(3);
    }
  }

  // Method to display
  void display() {
    // lifespan determines opacity of stroke and fill
    stroke(pColor, lifespan); 
    fill(pColor, lifespan);
    ellipse(location.x, location.y, pSize, pSize);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }

  // copy-pasted from pearl but they should probably both be subclasses
  float getCenterX() {
    return location.x + pSize;
  }

  float getCenterY() {
    return location.y + pSize;
  }
}

Particle System Class

// A class to describe a group of Particles by Daniel Shiffman
// Source: http://processing.org/examples/simpleparticlesystem.html
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList particles;
  PVector origin;

  ParticleSystem(PVector location) {
    origin = location.get();
    particles = new ArrayList();
  }

  void addParticles() {
    int numParticles = (int)random(30, 50);
    for (int i = 0; i < = numParticles; i++) {
      addParticle();
    }
  }

  PVector getRandomLocation() {
    return new PVector(random(0,width), random(0,height));
  }

  void addParticle() {
    PVector randomLocation = getRandomLocation();
    particles.add(new Particle(randomLocation));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}

I enjoyed working on making a GIF but found my coding limitations a frustration – I had hoped to create each letter character out of particles so that not only the letters move around but actually break up and shake apart.

text particle system idea –

//Adam Ben-Dror
//assigmnet 4 - GIF
//EMS II | Golan Levin 

float x1, y1, x11, y11, x12, y12, x2, y2, x21, y21, x3, y3, x31, y31, x4, y4, x41, y41, x5, y5, x51, y51, r1, r11, 
r2, r21, r3, r31, r4, r41; 
float easing = 0.03;
int x = 0;
float frame =1; 
float loop = 0; 


void setup() {
   PFont font;
  font = loadFont("Biko-Bold-90.vlw");
  textFont(font, 90);
  size (600, 600);
  x1 = 0;
  y1 = 0;
  fill(0);
}

void draw() {
  frame++;
  loop++; 
  if (frame > 5){
  
  saveFrame(); 
  frame = 1; 

  }
  
  background(255);
  textAlign(LEFT);
  textSize(90);


  pushMatrix();
  translate(x1+width/2-76, y1+height/2);
  rotate(r1);               
  text("m", x1, y1); 

  if (loop > 200) {
    x1 += random(-3, 2); 
    y1 += random(-1, 2);
    r1 += random(-0.5, 0.5);
  } 
  else {
    x11 = 0;
    y11 = 0;
    r11 = 0;

    float dx = x11 - x1;
    float dy = y11 - y1;
    float dr = r11 - r1;


    x1 = x1 + ( dx * easing );
    y1 = y1 + ( dy * easing );
    r1 = r1 + ( dr * easing );

  }
      popMatrix();



  ///
  pushMatrix();
  translate(x3+width/2-16, y3+height/2);
  rotate(r3);               
  text("o", x3, y3); 

  if (loop > 200) {
    x3 += random(-2, 1); 
    y3 += random(-1, 2);
    r3 += random(-0.5, 0.5);
  } 
  else {
    x31 = 0;
    y31 =0;
    r31 = 0;
    float dx3 = x31 - x3;
    float dy3 = y31 - y3;
    float dr3 = r31 - r3;


    x3 = x3 + ( dx3 * easing );
    y3 = y3 + ( dy3 * easing );
    r3 = r3 + ( dr3 * easing );
  }
    popMatrix();



  ///
  pushMatrix();
  translate(x4+width/2+16, y4+height/2);
  rotate(r4);               
  text("v", x4, y4); 

  if (loop > 200) {
    x4 += random(-4, 3); 
    y4 += random(-1, 3);
    r4 += random(-0.5, 0.5);
  } 
  else {
    x41 = 0;
    y41 =0;
    r41 = 0;

    float dx4 = x41 - x4;
    float dy4 = y41 - y4;
    float dr4 = r41 - r4;


    x4 = x4 + ( dx4 * easing );
    y4 = y4 + ( dy4 * easing );
    r4 = r4 + ( dr4 * easing );
  }


  popMatrix();

  ///
  pushMatrix();
  translate(x2+width/2+48, y2+height/2);
  rotate(r2);               
  text("e", x2, y2); 

  if (loop > 200) {
    x2 += random(-3, 2); 
    y2 += random(-2  , 3);
    r2 += random(-0.5, 0.5);
    
  if (loop >370){
    loop = 0; }
  } 
  else {
    x21 = 0;
    y21 =0;
    r21 = 0;
    float dx2 = x21 - x2;
  float dy2 = y21 - y2;
  float dr2 = r21 - r2;


  x2 = x2 + ( dx2 * easing );
  y2 = y2 + ( dy2 * easing );
  r2 = r2 + ( dr2 * easing );
  }

    popMatrix();

} 

The gif above is just a little preview. I thought that the tails that the “planets” left were very beautiful. I wish that I was able to make the larger solar system a gif too, but unfortunately, the outer planets rotated too slowly and produced too many frames.

I wanted to express the idea of planets rotating around the sun while being able to see the path each planet takes. If I were to change my code, I would attach particulates to each planet as they rotated around the sun.

You can see it here!
https://openprocessing.orgsketch/109404

float merpercent, vp, ep, mp;
float merradius, vr, er, mr;
float rotatingAngle;
float merx, mery, vx, vy, ex, ey,mx,my;
float frames;
color[] bcolor = {#10163C,#2A4550,#164E64,#291664,#0A343E};
int colr;

/*
if(all the circles aren't at their initial points) saveFrame(blalsjdflkw);
else if (all the circles are at their initial points) exit();
*/

void setup() {
size(500, 500);
merpercent = vp = ep = mp = 0;
merradius = 155;
vr = 165;
er = 195;
mr = 210;
frames = 0;
colr = (#2A4550);
}
void draw() {
noStroke();
if (frames % 1000 == 0){
int index = int(random(0,bcolor.length));
colr = bcolor[index];
}
fill(colr, 10);
rect(0, 0, 800, 800);

fill(#FFAF00,40);
ellipse(width/2, height/2, 150, 150); //sun

fill(255);
rotatingAngle = merpercent/20 * TWO_PI;
merx = width/2 + merradius * cos(rotatingAngle);
mery = height/2 + merradius * sin(rotatingAngle);
ellipse(merx, mery, 5, 5); // mercury
merpercent ++;
if (merpercent % 20 == 0) {
merpercent = 0;
}

fill(255);
rotatingAngle = vp/40 * TWO_PI;
vx = width/2 + vr * cos(rotatingAngle);
vy = height/2 + vr * sin(rotatingAngle);
ellipse(vx, vy, 10, 10); // venus
vp ++;
if (vp % 40 == 0) {
vp = 0;
}

fill(255);
rotatingAngle = ep/40 * TWO_PI;
ex = width/2 + er * cos(rotatingAngle);
ey = height/2 + er * sin(rotatingAngle);
ellipse(ex, ey, 13, 13); // earth
ep ++;
if (ep % 40 == 0) {
ep = 0;
}

fill(255);
rotatingAngle = mp/40 * TWO_PI;
mx = width/2 + mr * cos(rotatingAngle);
my = height/2 + mr * sin(rotatingAngle);
ellipse(mx, my, 10, 10); // mars
mp ++;
if (mp % 40 == 0) {
mp = 0;
}

if (mp == 39){
fill(#ABAED8,60);
rect(0,0,800,800);
}

if (!(merpercent==0 && vp==0 && ep==0 && mp==0))
saveFrame("frames/####.png");
else exit();

}

float merpercent, vp, ep, mp, jp, sp, up,np;
float merradius, vr, er, mr, jr, sr, ur,nr;
float rotatingAngle;
float merx, mery, vx, vy, ex, ey, mx, my, jx, jy, sx, sy, ux, uy,nx,ny; 
float frames; 
color[] bcolor = {#10163C,#2A4550,#164E64,#291664,#0A343E};
int colr;

/*
if(all the circles aren't at their initial points) saveFrame(blalsjdflkw);
else if (all the circles are at their initial points) exit();
*/

void setup() {
  size(800, 800);
  merpercent = vp = ep = mp = jp = sp = up = np = 0; 
  merradius = 155;
  vr = 165;
  er = 195; 
  mr = 210;
  jr = 250;
  sr = 290;
  ur = 330;
  nr = 360; 
  frames = 0; 
  colr = #2A4550;

} 

void draw() {
  noStroke();
  if (frames % 1000 == 0){
    int index = int(random(0,bcolor.length)); 
    colr = bcolor[index];
  }
  fill(colr, 10);
  rect(0, 0, 800, 800); 

  fill(#FFAF00,40);
  ellipse(width/2, height/2, 150, 150); //sun

  fill(255);
  rotatingAngle = merpercent/88 * TWO_PI;
  merx = width/2 + merradius * cos(rotatingAngle);
  mery = height/2 + merradius * sin(rotatingAngle); 
  ellipse(merx, mery, 5, 5); // mercury 
  merpercent ++; 
  if (merpercent % 88 == 0) {
    merpercent =  0;
  }

  fill(255);
  rotatingAngle = vp/224.7 * TWO_PI;
  vx = width/2 + vr * cos(rotatingAngle);
  vy = height/2 + vr * sin(rotatingAngle); 
  ellipse(vx, vy, 10, 10); // venus 
  vp ++; 
  if (vp % 224.7 == 0) {
    vp =  0;
  }

  fill(255);
  rotatingAngle = ep/365 * TWO_PI;
  ex = width/2 + er * cos(rotatingAngle);
  ey = height/2 + er * sin(rotatingAngle); 
  ellipse(ex, ey, 13, 13); // earth 
  ep ++; 
  if (ep % 365 == 0) {
    ep =  0;
  }

  fill(255);
  rotatingAngle = mp/687 * TWO_PI;
  mx = width/2 + mr * cos(rotatingAngle);
  my = height/2 + mr * sin(rotatingAngle); 
  ellipse(mx, my, 10, 10); // mars
  mp ++; 
  if (mp % 687 == 0) {
    mp =  0;
  }

  fill(255);
  rotatingAngle = jp/4015 * TWO_PI;
  jx = width/2 + jr * cos(rotatingAngle);
  jy = height/2 + jr * sin(rotatingAngle); 
  ellipse(jx, jy, 30, 30); // jupitar
  jp ++; 
  if (jp % 4015 == 0) {
    jp =  0;
  }

  fill(255);
  rotatingAngle = sp/10585 * TWO_PI;
  sx = width/2 + sr * cos(rotatingAngle);
  sy = height/2 + sr * sin(rotatingAngle); 
  ellipse(sx, sy, 25, 25); // saturn
  sp ++; 
  if (sp % 10585 == 0) {
    sp =  0;
  }

  fill(255);
  rotatingAngle = up/30660 * TWO_PI;
  ux = width/2 + ur * cos(rotatingAngle);
  uy = height/2 + ur * sin(rotatingAngle); 
  ellipse(ux, uy, 20, 20); // uranus
  up ++; 
  if (up % 30660 == 0) {
    up =  0;
  }

  fill(255);
  rotatingAngle = np/59860 * TWO_PI;
  nx = width/2 + nr * cos(rotatingAngle);
  ny = height/2 + nr * sin(rotatingAngle); 
  ellipse(nx, ny, 17, 17); // neptune
  np ++; 
  if (np % 59860 == 0) {
    np =  0;
  }

//  if (!(merpercent==0 && vp==0 && ep==0 && mp==0))
//    saveFrame("frames/####.png");
//  else exit();
}

Dwelling the unique constraints and opportunities presented by the .gif format, I had the idea to generate a pattern, and to then use that pattern as a seed for a particle system. As it turned out, this pattern-as-seed plan was pretty convoluted. My pattern held its own aesthetically, and there was no need to abstract it further. At this point, the difficulty was to animate the pattern in a seamless fashion. Golan helped me formulate a solution, which entailed gradually shifting initial velocities according to trigonometric relationships.

I think the .gif succeeds in its playful treatment of stability and instability: the nipples are effectively stationary, where the arm-tentacles twitch and/or undulate erratically. Generally speaking, the experience of the .gif changes dramatically from region-to-region. Maybe this lack of focus is a drawback, and if so, I could improve the piece by unifying it visually. It might also benefit a clarified kinetic gestalt, or put in other words: buttery, logical motion. (Or its charm could lie in the jerky crudeness.)

(As a side note, the edicts of my Nipple Congress have strong ties to those of Jared Tarbell’s Substrate, since a nearly identical branching rule governs the spatial aspect of the forms generated onscreen. )

GridParticle[] gP = new GridParticle[40];
int seed = 10;
PVector texture;

void setup() {
  size(600, 400); 
  randomSeed(seed);
  noiseSeed(seed);
  initGrid();
  smooth();

 background(0,4,118);
}

void initGrid() {
  for (int i= 0; i  < gP.length; i++) {
    gP[i] = new GridParticle(i);
  }
}

void draw() {  
  background(0,4,118);
  randomSeed(seed);
  noiseSeed(seed);
  initGrid();
  for (int n = 0; n < 1400; n++) {
    for (int i= 0; i  < gP.length; i++) {
      gP[i].update();
      gP[i].drawMe();
    }
  }
  filter(INVERT);
  saveFrame();
}

class GridParticle {
  PVector pos; 
  PVector vel = new PVector(0, 1);
  float strokeW;
  int changedThresh;
  int stroke = 235;
  int blinkOffset;

  GridParticle(int _blinkOffset) {
    blinkOffset = _blinkOffset;
    strokeW = 5;
    changedThresh = int(random(0, 10));
    pos = new PVector(random(width*.2, width*.8), random(height*.2, height*.8));
    float randomRadiusX = random(-1,1);
    float randomRadiusY = random(-.5,.5);
    float randomAngle = random(HALF_PI);
    float frameBasedAngle = map(frameCount % 10000, 0, 9999, 0, TWO_PI);
    vel.x = randomRadiusX * cos(randomAngle + frameBasedAngle);
    vel.y = randomRadiusY * sin(randomAngle + frameBasedAngle);
  }

  void update() {

    stroke*=.87;

    float yNoise = map(noise(vel.y/100.0), 0,1, -.002, .002);
    vel.y += yNoise;

    loadPixels();
    if (pixels[floor(width*int((pos.y + 5) % height) + int(pos.x))] != color(0,4,118) || 
       pixels[floor(width*int((pos.y) % height) + (int(pos.x + 5) % width))] != color(0,4,118)) {
      strokeW *= .985;

      vel.x *= -1; 
    }

    pos.x = abs((pos.x + vel.x)) % width;
    pos.y = abs(pos.y + vel.y) % height;
  }

  void drawMe() {
    float vary = noise(pos.x/10.0, pos.y/10.0)*4;
    strokeWeight(strokeW * vary);

    float blink = map((frameCount + blinkOffset) % 10, 0, 9, 0, 1);

    stroke((stroke + 20)*blink, 0, 0);
    point(pos.x, pos.y);
    stroke(0,100);
    point(pos.x-(strokeW * vary),pos.y); point(pos.x+(strokeW * vary),pos.y);
  }
}

My mind process for this project: gif -> looping -> continuity -> time? -> something smooth -> curves? -> water -> flow
In the beginning, in my mind there were two paths for me to take – make something cool-looking/trippy that’s very math oriented, or make something nice to look at/aesthetically appealing. I was a bit lost on the former, so I went with the latter. I wanted something I wouldn’t mind staring at for a few minutes straight, so I ended up with this. I incorporated a lot of random factors so I wouldn’t mind staring at it for a few minutes straight multiple times. I think I invested too much time into trying to make it look pretty when I should have been using that time to try to figure out some cool mathy thing I could incorporate. Oh well, at least I’m happy with the outcome. Enjoyed this project. Will probably want to make another one soon/later.

This was a really quick idea sketch. The lines are really light…

Anyway, here’s the program. There is a lot of randomness involved, so each time you load it, you’re going to get something noticeably different. Enjoy!

 int     nFramesInLoop = 300;
int     nElapsedFrames;
boolean bRecording; 

ArrayList allPaths = new ArrayList();
PImage object;
PImage noncomformity;

//===================================================
void setup() {
  size (300, 150); 
  bRecording = false;
  nElapsedFrames = 0; 
  noFill();

  int which = int(random(3));
  boolean frog = false;
  
  //Randomly choose 1 out of 3 available themes
  //and load image accordingly
  if (which==0) {
    object = loadImage("sakura_flower.png");
  }
  else if (which==1) {
    object = loadImage("maple_leaf.png");
  } 
  else {
    object = loadImage("lily_pad.png");
    int temp = int(random(2));
    if (temp==1) {
      frog = true;
      noncomformity = loadImage("lily_pad_frog.png");
    }
  }

  //Create individual Path objects and append to global ArrayList
  for (int i=0; i<9; i++) {
    Path p = new Path();
    allPaths.add(p);
    //Last object has chance to be a frog
    if (i==8 && frog==true){
      p.changeLook(noncomformity);
    }
  }
}

//===================================================
void keyPressed() {
  bRecording = true;
  nElapsedFrames = 0; 
}

//===================================================
void draw() {
 
  // Compute a percentage (0...1) representing where we are in the loop.
  float percentCompleteFraction = 0; 
  if (bRecording) {
    percentCompleteFraction = (float) nElapsedFrames / (float)nFramesInLoop;
  } else {
    percentCompleteFraction = (float) (frameCount % nFramesInLoop) / (float)nFramesInLoop;
  }
 
  // Render the design, based on that percentage. 
  renderMyDesign (percentCompleteFraction);
 
  // If we're recording the output, save the frame to a file. 
  if (bRecording) {
    saveFrame("output/myname-loop-" + nf(nElapsedFrames,4) + ".png");
    nElapsedFrames++; 
    if (nElapsedFrames > (nFramesInLoop+1)) {
      bRecording = false;
    }
  }
}

void renderMyDesign(float percent) {
  background(255);
  fill(160, 200, 255, 80);
  noStroke();
  rect(0, 0, width, height);

  int n = allPaths.size();

  //Draw background bezier curves first
  noFill();
  for (int i=0; i1) t-=1;
    float thickPercent = sin(2.0*t*TWO_PI);
    float thickness = map(thickPercent,-1,1,thickness1,thickness2);
    stroke(160, 200, 255, 80);
    strokeWeight(thickness);
    bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
  }

  //Draw moving object
  void drawObject(float percent) {
    //Make sure object is correct size before drawing
    ownLook.resize(int(size)*2, int(size)*2);
    
    //Object starts at random point on curve w/ random rotation
    float t = startT+percent;
    if (t>1) t-=1;
    float x = map(t*width,0,width,x1,x2);
    float y = bezierPoint(y1, cpy1, cpy2, y2, t);

    float cx = x+(size/2);
    float cy = y+(size/2);

    //Draw the object
    pushMatrix();
    translate(cx, cy);
    float angle = (t)*TWO_PI*rotation;
    rotate(angle);
    image(ownLook, -size, -size);    
    popMatrix();
  }
  
  //Change the images of moving object
  void changeLook(PImage change){
    ownLook = change;
  }
}
 

This was an interesting piece for me, as its concept developed further as I felt more comfortable with animating through Processing and programming with Java. As shown in my sketch, I originally intended to create a very simply pattern of movement among lines and dots to keep the work manageable, but as I wrote the code, I started playing for a stronger visual effect. Algorithmic animation always mystified me, but sinking my teeth into the basics gave me a new perspective on this particular art form — both a de-mystification and a new-found respect.

float dx = 20;
float dy = 20;
boolean reverse;

void setup() {
  size(600, 600);
}

void draw() {
  background(0);
  dots();
  if (dx == 91) { //line direction change
    reverse = true;
  }
  if (dx == -11) {
    reverse = false;
  }
  if (reverse) { //animate
    dx--;
    dy--;
  }
  else {
    dx++;
    dy++;
  }
}

void dots() { //draw dots in a matrix
  for (int row = 0; row < 7; row++) {
    for (int col = 0; col < 7; col++) {
      stroke(255);
      strokeWeight(10);
      point(col*100, row*100);
      cardLines(row, col); 
      diagLines(row, col);
      print(row);
    }
  }
}

void cardLines(int row, int col) { //draw lines in cardinal direction
  for (int line = 0; line < 4; line++) {
    pushMatrix();
    cardColor(line);
    translate(col*100, row*100);
    rotate(PI*line/2);
    line(dx, 0, dx+20, 0);
    popMatrix();
  }
}

void diagLines(int row, int col) { //draw lines in diagonals
  for (int line = 0; line < 4; line++) {
    pushMatrix();
    diagColor(line);
    translate(col*100, row*100);
    rotate(PI*line/2);
    line(dx, dy, dx+20, dy+20);
    popMatrix();
  }
}

void cardColor(int line) {
  if (line == 0) {
    stroke(255,0,0,122);
  }
  else if (line == 1) {
    stroke(0,255,0,122);
  }
  else if (line == 2) {
    stroke(255,0,0,123);
  }
  else if (line == 3) {
    stroke(0,255,0,123);
  }
}

void diagColor(int line) {
  if (line == 0) {
    stroke(0,0,255,122);
  }
  else if (line == 1) {
    stroke(255,255,0,122);
  }
  else if (line == 2) {
    stroke(0,0,255,123);
  }
  else if (line == 3) {
    stroke(255,255,0,123);
  }
}

I had a previous idea boiling in my head since last week but I just couldn’t figure out a generic algorithm for it to apply to 3 < n < 11 sided regular polygons. I had the code half-written out, and then scrapped it because I felt stifled. Then I had the fantastic notion of working in 3D. It turns out working in 3D in Processing, especially on Windows, is a terrible idea: I kept getting errors that could only be avoided by working on a Mac. I slowly fell into a negative feedback loop of badness and felt bad in general while working on the GIF. Translating things from a drawing to a computational form is difficult and frustrating; so what you see above isn’t what I envisioned, but it’s as close as I can get with my current level of comfortableness with working with graphics in code. I wish I had more time to understand P3D better so that I could add more things to the GIF but ah well.

In short, I wanted to make the cube vibrate even more, and maybe even add more colors to it. Also, the particles were really supposed to be particles; instead they came out looking terribly rectangular, but I don’t really know why.

int grad;
float vibrate = 0.5;
float wiggled = 0.1;
float wiggle;
int particleCount = 1000;
Particle[] particles = new Particle[particleCount+1];
float rx;
float ry;
float t = 0;

void setup()
{
  smooth();
  noFill();
  stroke(255);
  strokeWeight(3);
  smooth();
  size(600, 600, P3D);
  float horiz = 0;
  for (int i = 0; i < particleCount - 4; i+=5) {
    particles[i] = new Particle(width/2, horiz); 
    particles[i+1] = new Particle(width/2+1, horiz);
    particles[i+2] = new Particle(width/2-1, horiz);
    particles[i+3] = new Particle(width/2+1, horiz + 3);
    particles[i+4] = new Particle(width/2-1, horiz + 3);
    horiz+=5;
  }
  for (int j = 0; j < particleCount; j++) {
    particles[j].drawticle();
  }
  rx = 0;
  ry = 0;
  grad = 0;
}

void draw() {
  if (grad > 255) {
    grad = 0;
    background(255);
  }
  else  background(0);
  fill(grad);
  pushMatrix();
  translate(width/2+vibrate, height/2+vibrate);
  rotateX(rx);
  rotateY(ry);
  box(100*wiggle);
  popMatrix();
  for (int k = 0; k < particleCount; k++) {
    particles[k].update();
    particles[k].drawticle();
  }
  rx+=0.01;
  ry+=0.01;
  vibrate*=-1;
  grad+=10;
  wiggle = noise(wiggled);
  wiggled+=0.1;
}

class Particle {
  float xpos;
  float ypos;
  Particle(float x, float y) {
    xpos = x;
    ypos = y;
  }
  void update() {
    if (ypos == 0)
      ypos = 600;
    ypos-=1;
  }
  void drawticle() {
    hint(DISABLE_DEPTH_TEST);
    camera();
    noLights();
    ellipse(xpos, ypos, 0.1, 0.1);
    hint(ENABLE_DEPTH_TEST);
  }
}

Figuring out how to animate in Processing was very difficult and frustrating for me. This was my first time using Processing. To make the process easier, I chose amusing content to animate. My animation is a reference to Them!, a movie made in the 50’s about giant ants. It’s more of an illustration than art or design. In that respect, I’d like to get more practice building forms from the shapes in Processing and get a better handle on manipulating graphics with code. I think the forms in the animation are simple, the motion itself is simple, and the concept is simple, and this easiness bothers me. My skill level isn’t high enough to create art in Processing just yet.

 

/*Rachel Moeller
EMS2 GIF
*/

int     nFramesInLoop = 120;
int     nElapsedFrames;
boolean bRecording; 
PImage img;

void setup() {
  size (500, 470); 
  bRecording = false;
  nElapsedFrames = 0; 
  
  img=loadImage("ThemImageS.jpg");
}

void keyPressed() {
  bRecording = true;
  nElapsedFrames = 0; 
}

void draw() {
 
  // Compute a percentage (0...1) representing where we are in the loop.
  float percentCompleteFraction = 0; 
  if (bRecording) {
    percentCompleteFraction = (float) nElapsedFrames / (float)nFramesInLoop;
  } else {
    percentCompleteFraction = (float) (frameCount % nFramesInLoop) / (float)nFramesInLoop;
  }
 
  // Render the design, based on that percentage. 
  renderMyDesign (percentCompleteFraction);
 
  // If we're recording the output, save the frame to a file. 
  if (bRecording) {
    saveFrame("output/myname-loop-" + nf(nElapsedFrames,4) + ".png");
    nElapsedFrames++; 
    if (nElapsedFrames >= nFramesInLoop) {
      bRecording = false;
    }
  }
}
 
 void renderMyDesign (float percent) {
  background (200);
  image(img,0,0);
  
  smooth(); 
  stroke (0,0,0); 
  strokeWeight (4);

  
  //draw ant's head and body
  fill(255);
  ellipse(200,height/2,100,100);//head
  ellipse(300,(height/2)+(percent*2)*PI,100,100);
  ellipse(400,(height/2)-(percent*2)*PI,100,100);
  noFill();
  


  //urms
  //front
  strokeWeight(4);
  line(200*percent,(height/2)+100,260,((height/2)+30)+(percent*2)*PI);//left
  line(205*percent,(height/2)+100,330,((height/2)+40)+(percent*2)*PI);//right
  
  //back
  line(370,(height/2)+100,380,((height/2)+45)-(percent*2)*PI);//left
  line(460,(height/2)+100,430,((height/2)+40)-(percent*2)*PI);//right
  
  //draw eyes
  
  fill(0);
  ellipse(180,(height/2)+10,10*(percent*2),10*(percent*2));//left eye
  ellipse(220,(height/2)+10,10*(percent*2),10*(percent*2));//right eye
  noFill();
  
  //antennae
  line(170,(height/2)-40,170,(height/2)-80);//left
  line(230,(height/2)-40,230,(height/2)-80);//right
  
  //ends of antennae
  arc(180,(height/2)-80,20,20,PI,TWO_PI);//left
  arc(240,(height/2)-80,20,20,PI,TWO_PI);//right
  
  //mouth
  line(190-(percent*10),(height/2)+30,210+(percent*10),(height/2)+30);
  
  
  //little guy
  //head
  strokeWeight(2);
  fill(255);
  ellipse(200*percent,(height/2)+90,20,20);
  //eyes
  fill(0);
  ellipse(196*percent,(height/2)+90,5*percent,5*percent);
  ellipse(205*percent,(height/2)+90,5*percent,5*percent);
  //mouth
  ellipse(200*percent,height/2+95,3*percent,3*percent);
  }