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

So this assignment was really a challenge for me because, well, I’ve only ever made animated cursors through a simple program before. I still feel very limited in the amount of things I know how to do, but learning the applications of code one step at a time is really thrilling.

The plane shape I drew was really simple in the fact that I just used beginShape() and endShape, along with a few arcs. I wanted to take it one step further and add shading or curvature, but I have yet to fully comprehend the PShader tutorial on Processing.org. I learned most of the stuff in this code from Lynda.com and Golan.

I do realize that this is not a perfect loop… I’m working on it…

Here’s a sketch of my original idea:

 

Code:

PFont myFont;

int X_AXIS=1;
int Y_AXIS=2;
float theta=0;
color[] sky={#155484,#79a4c5};

void setup() {
  size(600,300);
  myFont=loadFont("Optima-BoldItalic-22.vlw");
  textFont(myFont);
  frameRate(30);
}

void draw(){
  //if (frameCount< =60) {
  //  saveFrame("plane-####.png");
  //}
  setGradient(0,0,width,height,sky[0],sky[1],Y_AXIS); //sky backdrop
  float a=map(sin(theta),-1,1,-12,12);
  theta+=0.06;

  pushMatrix();
  scale(1.8);
  translate(0,-80);
  rotate(radians(3));
  drawClouds(250,40,0.006,0.60);
  popMatrix();

  pushMatrix();
  rotate(radians(7));
  translate(a,1.5*a);
  drawPlane();
  popMatrix();

  pushMatrix();
  translate(0,50);
  scale(2.0);
  rotate(radians(8));
  drawClouds(250,80,0.03,0.3);
  popMatrix();
}

//Learned from processing.org examples
void setGradient(int x, int y, float w, float h, color c1, color c2, int axis) {
  noFill();
  if(axis==X_AXIS){
    for(int i=x;i< =x+w;i++){
      float inter=map(i,x,x+w,0,1);
      color c=lerpColor(c1,c2,inter); //inter is between 0.0 and 1.0
      stroke(c);
      line(i,y,i,y+h);
    }
  }
  else if(axis==Y_AXIS){
    for(int i=y;i<=y+h;i++){
      float inter=map(i,y,y+h,0,1);
      color c=lerpColor(c1,c2,inter);
      stroke(c);
      line(x,i,x+w,i);
    }
  }
}

//Learned from Golan!! Thanks!!
void drawClouds(int col,int tra,float speed,float thresh){ //color, transparency, speed, threshold
  fill(col,tra);
  noStroke();

  for(int i=0;i
					
					
			

I started off by playing with the noise function, and when I was observing it, I thought the way it moved looked like a row of soldiers marching. Thus I decided to create infinite rows of noise soldiers walking towards the viewer. However, after I coded it up, I realized that what I had looked more like a waterfall, so I just created a scene by going from there instead.

During the entire process of creating this gif, I spend a lot of time worrying how I could get it to loop. Not taking risks made me feel like I did not learn as much as I could from this project. Also, I did not realize that there was a template uploaded, which could have saved me a lot of time. Thirdly, I found out that I enjoy watching my animation more when I am listening to some relaxing music, rather than being in silence, so I feel it might have been better if instead it is a music video with more contents. The combined effects made me feel serene, which I am glad for.

Thanks to Daniel Shiffman for his code of the particle system.

int square_width = 15;
color skycolor = color(40,40,40);
boolean sunrise = true;
int snowcolor = 140;
int stay = 0;
int frames = 0;

ParticleSystem ps1, ps2;

class Particle {
  PVector location;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(0,0.1);
    velocity = new PVector(random(-10,10),1.0);
    location = l.get();
    lifespan = 255.0;
  }

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

  // Method to update location
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    lifespan -= 1.0;
  }

  // Method to display
  void display() {
    stroke(255,200 - blue(skycolor) + 2);
    fill(255, 200 - blue(skycolor) + 2);
    ellipse(location.x,location.y,8,8);
  }
  
  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
}




// A class to describe a group of Particles
// 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 addParticle() {
    particles.add(new Particle(origin));
  }

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


class Row_of_Noise{
  int start, end;
  float row;

  Row_of_Noise(int s, int e, float r)
  {
    start = s;
    end = e;
    row = r;
  }

  void walk_forward()
  {
    row *= 1.03;
    if(row > height)
      row = 0.1;

    start = width/2-(int)row*3;
    end = width/2+(int)row*3; 
  }
}

Row_of_Noise[] RoN;

void setup() {
  size(600, 600);
  stroke(0);
  smooth();
  noiseSeed(15251);
  initialize_rows_of_noise();
  ps1 = new ParticleSystem(new PVector(width/3,-50));
  ps2 = new ParticleSystem(new PVector(2*width/3,-50));
}

void initialize_rows_of_noise(){
  RoN = new Row_of_Noise[40];
  float r = 0.1;
  for(int i = 0; i < RoN.length; i++)
  {
    r *= 1.3;
    RoN[i] = new Row_of_Noise(width/2-(int)r*2, 
                              width/2+(int)r*2, 
                              r);
  }
}

void draw_row_of_noise(Row_of_Noise ron)
{
  beginShape();
  float theta = 0.0;
  for(int x = ron.start; x < ron.end; x++)
  {
    
    if(x % 50 == 0)
    {
      endShape();
      beginShape();
    }
    
    if(x % 50 < 10)
      continue;

    float y = noise((millis()/1000.0 + x)%50.0) * 
                   ((float)(ron.end - ron.start)/ 6.0) + ron.row;
    vertex(x-5,y+300);
  }
  endShape();
}

void draw() {

  if(53 < frames && frames < 285)
    saveFrame("outputgif/myname-loop-" + nf(frames,4) + ".png");
  if(blue(skycolor) > 200)
  {
    sunrise = false;
    if(stay == 0)
      stay = 50;
    else
      stay--;
  }

  if(blue(skycolor) < 10)
  {  
    sunrise = true;
    if(stay == 0)
      stay = 50;
    else
      stay--;
  }

  if(stay == 0)
  {
    if(sunrise)
    {
      skycolor = color(red(skycolor)+1, green(skycolor)+2, blue(skycolor)+3);
      snowcolor++;
    }
    else
    {
      skycolor = color(red(skycolor)-1, green(skycolor)-2, blue(skycolor)-3);
      snowcolor--;
    }
  }

  background(skycolor);
  stroke(snowcolor);

  for(int i = 0; i < width; i++)
    line(i,noise(i/400.0)*100.0 + 245,i,height);

  // draws the waterfall
  stroke(0,100,200);
  noFill();
  for(int i = 0; i < RoN.length; i++)
  {
    draw_row_of_noise(RoN[i]);
    RoN[i].walk_forward();
  }

  ps1.addParticle();
  ps1.run();
  ps2.addParticle();
  ps2.run();

  frames++;
}

Originally, I wanted a gif to pair with the Hotline Miami soundtrack (ridiculously good). I had the idea of a rotating 3D diamond with glow lines emanating from it, but realized I didn’t have much experience with .obj import and Processing, and felt it best to stick with the provided primitives.

sketches from my notebook

One of my main goals was to make the emitting glow lines really nice. To get a smooth motion curve, I hopped over to Grapher and plotted out various graphs until I found one I thought would allow for good timing and spacing.

grapher plot

I went with 60 FPS in the original processing file, which is hella decadent for animation. I thought I did a nice job with the lines, but my cube rotation was sort of flat. The background noise really brings the piece together. Next time I’d like to pay more attention to creating coherent timelines for all the separate animated components of the animation as a whole–dealing with different start/end times was a mess! Below is my code:

float a;
float b;
float c;
float d;
float e;
float f;
int i;
float multi;
int count;
float h = width / 60;
int counter = 1;

void setup() {
  size(500, 500, P3D);
  //smooth();
  fill(0, 0, 0);
  stroke(255);
}

void draw() {
  
  //setup
  background(0);
  for (int i = 0; i < height/4; i++) {
    for (int j = 0; j < width/4; j++) {
      if (random(255) > 128) {
        stroke(100);
        point(i*4, j*4);
      }
    }
  }

  counter += 1;

  stroke(255);
  //math
  float frame = frameCount % 60;
  a = (5 * sin((frame/15.0)+4.75)+5);
  b = (5 * sin(((frame+15)/15.0)+4.75)+5);
  c = (5 * sin((45/15.0)+4.75)+5);
  d = (5 * sin((frame/15.0)+12.75)+5);
  e = (5 * sin(((frame+15)/15.0)+8.75)+5);
  f = (5 * sin((45/15.0)+12.75)+5);
  if (frameCount % 90 == 0) {
    count += 1;
  }


  //drawing

  pushMatrix();
  translate(width*.5, height*.55);
  pushMatrix();
  rotateZ(.25*PI);
  if (count % 2 == 0) {
    rotateY( map(frameCount%360, 0, 360, 0, TWO_PI));
  } 
  else {
    rotateX( map(frameCount%360, 0, 360, 0, -TWO_PI));
  }
  strokeWeight(3);
  fill(0, 0, 0);
  box(150);
  popMatrix();
  for (int i = 0; i < 17; i++) {
    multi = (i % 2) + 1;
    pushMatrix();
    rotate(PI*.75);
    rotate(PI*i/16);
    translate(110, 110);
    strokeWeight(1);
    if (frame % 60 < 40) {
      line(a * multi, a * multi, 0, b * multi, b * multi, 0);
    }
    popMatrix();
  }
  popMatrix();
  
    //framez
  
 // if (frameCount < 360) {
//    saveFrame("output/filename-####.png");
 // }
}