Category Archives: 22-animatedgif

Thomas Langerak -GIF

Animated color GIF by Thomas Langerak

I made this colour-changing GIF. I wanted to something different than motion, as my assumption was that most people would be doing this. Unfortunately I am not happy with how it turned out on-screen; I think it has become rather boring. However, the lenticular Gifpop print was a surprisingly interesting object; this was quite educational.

Things that would improve this GIF well, I hate to say it, but more dynamics: more change and unexpected things. What I actually like about it is that the spectrum is divided quite equally and the GIF equally loops.

This program was made in Processing. I have taken a look at the setGradient example from Processing. I did not consult the Internet for this and I should have done this in order to make something more new, challenging and exciting.

Code on Github: https://github.com/tlangerak/GIF

Lenticular Animation_Priya

I looked at various artists online, found most of them on tumblr. I have collected all my inspirations on pinterest, here.

I was inspired the most by artist Dave Whyte and his tumblr Bug and Bees . I appreciate his aesthetic taste. He has used simple geometric forms to create gifs. Out of his creations,  I found squares and circles to be most appealing. This piece creates optical illusion of motion by using squares and circles.

I decided to create a something simple as Dave, which should use only two geometric forms. I wanted to create an illusion of a double wave using arrangement of squares and circles and using motion of rotation.

lenticular

export

Program is here:

import gifAnimation.*;

GifMaker gifExport;
int frames = 0;
int totalFrames = 90;
float turn = 0;

void setup() {
size(400, 400);
background(120);
smooth();
noStroke();
// rectMode(CENTER);
gifExport = new GifMaker(this, "export.gif", 100);
gifExport.setRepeat(0);
}
void draw_rotating_circle(float x, float y, float diameter, float r) {
translate(x, y);
rotate(r);
//fill(0);
ellipse(0, 0, diameter, diameter);
resetMatrix();
}

void draw_rotating_rectangle(float x, float y, float rect_size, float r) {
translate(x, y);
rotate(r);

rect(0, 0, rect_size, rect_size);
resetMatrix();
}

void draw() {
background(255);

float rows = 0;
while (rows < 8) {
float column = 0;
while (column < 8) {

fill(0);
draw_rotating_circle( 42+ rows * 40, 42+ column * 40, 35, turn+rows+column);
fill(255);
draw_rotating_rectangle( 50+ rows * 40, 50+ column * 40, 27, turn+rows+column);
fill(0);
draw_rotating_rectangle( 54+ rows * 40, 64+ column * 40, 12, turn+rows+column);
column = column + 1;
}
rows = rows+ 1;
}
turn = turn + (0.07);
export();
}

void export() {
if(frames < totalFrames) {
gifExport.setDelay(20);
gifExport.addFrame();
frames++;
} else {
gifExport.finish();
frames++;
println("gif saved");
exit();
}
}

I also looked at tessellation and transformations by Escher. I was especially inspired by his square to butterfly tessellation.

escher08

I attempted to create a gif out this tessellation but it isn’t working the way I want to. I found this assignment particularly interesting.  I am planning to create tessellation gifs.

 

chen

09 Feb 2015

What I did is based on Pink Floyd’s album cover — Dark Side of the Moon.

Dark_Side_of_the_Moon

At first, I animated what I saw on this album cover, and here is the scratch. (I should say I’m really not good at scratching.)

oie_9825403c0VBJGX

Then I thought it might be more reasonable to animate it as cannon fire.

So here is the final animation:

ezgif.com-maker

I think I do make the original image more vivid, but it still looks not consistent. It’ll be better to change the circles into something like bubbles, or something more interesting.

 

// Based on Prof. Golan Levin's template.
 
//===================================================
// Global variables. 
 
int nFramesInLoop = 100; // For lenticular export, REMEMBER TO CHANGE THIS to 10!
int nElapsedFrames;
boolean bRecording; 
 
//===================================================
void setup() {
  size (500, 500); 
  bRecording = false;
  nElapsedFrames = 0;
  frameRate (nFramesInLoop); 
}
//===================================================
void keyPressed() { 
  // Press a key to export frames to the output folder
  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 {
    float modFrame = (float) (frameCount % nFramesInLoop);
    percentCompleteFraction = modFrame / (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) {
    String  myName = "chenlian"; 
    saveFrame("output/"+ myName + "-loop-" + nf(nElapsedFrames, 4) + ".png");
    nElapsedFrames++; 
    if (nElapsedFrames == nFramesInLoop) {
      bRecording = false;
    }
  }
}
 
//===================================================
void renderMyDesign (float percent) {
 
  // This is an example of a function that renders a temporally looping design. 
  // It takes a "percent", between 0 and 1, indicating where we are in the loop. 
  // This example uses two different graphical techniques. 
  // Use or delete whatever you prefer from this example. 
  // Remember to SKETCH FIRST!
 
  //----------------------
  // here, I set the background and some other graphical properties
  background (34,31,22);
  
  //stroke (100, 0, 0); 
  //strokeWeight (6); 
  
  //----------------------
  // Here, I'll write name on the screen.
  
  textSize(20);
  fill(0, 102, 153, 51);
  text("Chen Liang", 60, 40); 

  //----------------------
  // Here, I draw incident light.
  float x_pointS = 0;  // the start point of incident light
  float y_pointS = height/1.8;
  float x_pointE = 0;  // the start point of incident light
  float y_pointE = height/1.8;
  
  float finalPercent = 0.19;
  if (percent < finalPercent) {     x_pointE  = percent * width;     y_pointE = y_pointS - (height/1.8-height/2.4)/0.401 * percent;   } else {     x_pointE  = width*0.401;     y_pointE = height/2.4;   }      strokeWeight(9);   line    (x_pointS, y_pointS, x_pointE, y_pointE);      //----------------------   // Here, I draw five colors inside the glass   float x_pointStart = width*0.401;   float y_pointStart = height/2.4;      float angle_1 = -TWO_PI/25;   float angle_2 = -TWO_PI/40;   float angle_3 = -TWO_PI/90;   float angle_4 = TWO_PI/150;   float angle_5 = TWO_PI/50;      float startPercent = 0.19;   float endPercent = 0.33;   float interval = endPercent - startPercent;      float distance_1 = width/5.8;   float distance_2 = width/5.5;   float distance_3 = width/5.3;   float distance_4 = width/5;   float distance_5 = width/4.8;      float x_point_1;   float y_point_1;   float x_point_2;   float y_point_2;   float x_point_3;   float y_point_3;   float x_point_4;   float y_point_4;   float x_point_5;   float y_point_5;      float x_endpoint_1 = distance_1 * cos(angle_1) + x_pointStart;   float y_endpoint_1 = y_pointStart + distance_1 * sin(angle_1);   float x_endpoint_2 = distance_2 * cos(angle_2) + x_pointStart;   float y_endpoint_2 = y_pointStart + distance_2 * sin(angle_2);   float x_endpoint_3 = distance_3 * cos(angle_3) + x_pointStart;   float y_endpoint_3 = y_pointStart + distance_3 * sin(angle_3);   float x_endpoint_4 = distance_4 * cos(angle_4) + x_pointStart;   float y_endpoint_4 = y_pointStart + distance_4 * sin(angle_4);   float x_endpoint_5 = distance_5 * cos(angle_5) + x_pointStart;   float y_endpoint_5 = y_pointStart + distance_5 * sin(angle_5);      noStroke();      float x = (percent - endPercent)/(1-endPercent);   float a = 0.793;   float b = 1;   float om2a = 1.0 - 2.0*a;   float t = (sqrt(a*a + om2a*x) - a)/om2a;   float percentage = (1.0-2.0*b)*(t*t) + (2*b)*t;      float emitter_distance = width/2;      float emitter_angle_1 = (angle_1 + angle_2)/2;   float emitter_angle_2 = (angle_3 + angle_2)/2;   float emitter_angle_3 = (angle_3 + angle_4)/2;   float emitter_angle_4 = (angle_5 + angle_4)/2;   float emitter_x_1 = x_endpoint_1 + emitter_distance * cos(emitter_angle_1) * percentage;   float emitter_y_1 = y_endpoint_1 + emitter_distance * sin(emitter_angle_1) * percentage;   float emitter_x_2 = x_endpoint_2 + emitter_distance * cos(emitter_angle_2) * percentage;   float emitter_y_2 = y_endpoint_2 + emitter_distance * sin(emitter_angle_2) * percentage;   float emitter_x_3 = x_endpoint_3 + emitter_distance * cos(emitter_angle_3) * percentage;   float emitter_y_3 = y_endpoint_3 + emitter_distance * sin(emitter_angle_3) * percentage;   float emitter_x_4 = x_endpoint_4 + emitter_distance * cos(emitter_angle_4) * percentage;   float emitter_y_4 = y_endpoint_4 + emitter_distance * sin(emitter_angle_4) * percentage;      float amplitude = 20;   float radius = percentage * amplitude + width/60;   if (percent > endPercent) {
    fill (215,101,8);
    ellipse(emitter_x_1, emitter_y_1, radius, radius);
    fill (233,209,9);
    ellipse(emitter_x_2, emitter_y_2, radius, radius);
    fill(117,141,3);
    ellipse(emitter_x_3, emitter_y_3,radius, radius);
    fill(23,160,152);
    ellipse(emitter_x_4, emitter_y_4, radius, radius);
  }
  
  if (percent >= startPercent && percent < = endPercent){     x_point_1 = distance_1 * cos(angle_1) * (percent - startPercent)/interval + x_pointStart;     y_point_1 = y_pointStart + distance_1 * sin(angle_1) * (percent - startPercent)/interval;     x_point_2 = distance_2 * cos(angle_2) * (percent - startPercent)/interval + x_pointStart;     y_point_2 = y_pointStart + distance_2 * sin(angle_2) * (percent - startPercent)/interval;     x_point_3 = distance_3 * cos(angle_3) * (percent - startPercent)/interval + x_pointStart;     y_point_3 = y_pointStart + distance_3 * sin(angle_3) * (percent - startPercent)/interval;     x_point_4 = distance_4 * cos(angle_4) * (percent - startPercent)/interval + x_pointStart;     y_point_4 = y_pointStart + distance_4 * sin(angle_4) * (percent - startPercent)/interval;     x_point_5 = distance_5 * cos(angle_5) * (percent - startPercent)/interval + x_pointStart;     y_point_5 = y_pointStart + distance_5 * sin(angle_5) * (percent - startPercent)/interval;          fill (215,101,8);     triangle(x_pointStart, y_pointStart, x_point_1, y_point_1,x_point_2, y_point_2);     fill (233,209,9);     triangle(x_pointStart, y_pointStart, x_point_3, y_point_3,x_point_2, y_point_2);     fill(117,141,3);     triangle(x_pointStart, y_pointStart, x_point_3, y_point_3,x_point_4, y_point_4);     fill(23,160,152);     triangle(x_pointStart, y_pointStart, x_point_5, y_point_5,x_point_4, y_point_4);       } else if (percent > endPercent){
    x_point_1 = distance_1 * cos(angle_1) + x_pointStart;
    y_point_1 = y_pointStart + distance_1 * sin(angle_1);
    x_point_2 = distance_2 * cos(angle_2) + x_pointStart;
    y_point_2 = y_pointStart + distance_2 * sin(angle_2);
    x_point_3 = distance_3 * cos(angle_3) + x_pointStart;
    y_point_3 = y_pointStart + distance_3 * sin(angle_3);
    x_point_4 = distance_4 * cos(angle_4) + x_pointStart;
    y_point_4 = y_pointStart + distance_4 * sin(angle_4);
    x_point_5 = distance_5 * cos(angle_5) + x_pointStart;
    y_point_5 = y_pointStart + distance_5 * sin(angle_5);
    
    fill (215,101,8);
    triangle(x_pointStart, y_pointStart, x_point_1, y_point_1,x_point_2, y_point_2);
    fill (233,209,9);
    triangle(x_pointStart, y_pointStart, x_point_3, y_point_3,x_point_2, y_point_2);
    fill(117,141,3);
    triangle(x_pointStart, y_pointStart, x_point_3, y_point_3,x_point_4, y_point_4);
    fill(23,160,152);
    triangle(x_pointStart, y_pointStart, x_point_5, y_point_5,x_point_4, y_point_4);
  }

  
  //----------------------
  // Here, I calculate the three points of triangle.
  float cx = width/2;
  float cy = height/2;
  float d  = width/4;
  
  float x_pointU = cx;  // the upper point of triangle
  float y_pointU = cy - d;
  float x_pointL = cx - d/2*1.7;  // the left point of triangle
  float y_pointL = cy + d/2;
  float x_pointR = cx + d/2*1.7;// the right point of triangle
  float y_pointR = cy + d/2;
  
  stroke (229,208,154);
  strokeWeight(5);
  line(x_pointU,y_pointU,x_pointL,y_pointL);
  line(x_pointR,y_pointR,x_pointL,y_pointL);
  line(x_pointU,y_pointU,x_pointR,y_pointR);
}

LValley

09 Feb 2015

export

Short Explanation:
This is a bear attacking a city with its laser eyes/fire saliva.

Long Explanation:
I’m a fan of bears. Kind of. So I wanted to make an animation that showed my ambivalence towards bears. On one hand, they’re kinda cute, but on the other, they can rip your intestines out.

I originally started this project having the bear exclusively shower the city with fire, but then I considered the design of the bear and noticed that, being a robot, it should also have laser capabilities.

To counter this possible issue, I gave the bear laser eyes to help it rise to it’s full potential.
I think it was a good choice.

Technical Note:
The roboBear 3D model was made in Rhino and then imported as an image background in Processing.

UnTechnical Note:
This is my sketch
IMG_6853

dave

09 Feb 2015

machine500

I want to make an interaction of nonorganic objects, and the first thing that came into my mind was a machine. After seeing Golan’s functions, I wanted to make something that starts off slow, then quickly thrusts out, and retracts in a looping fashion. This made me think of a guillotine, which has a slow wind but unleashes quickly. Hence, I made a spike that repeatedly thrusts and is powered by rotating circular gears.

Overall, I felt satisfied with the outcome. I wish maybe it can be more complex, like the example GIF Golan had for this assignment. Also, since the movement is smooth and sliding, I do not know how well it translates to lenticular surface.

Sketch:

IMG_20150208_235723364

 

final float SCREENWIDTH = 500f;
final float SCREENHEIGHT = 500f;

import gifAnimation.*;
GifMaker gifExport;

Gear[] gears;
Bar bar;

boolean byTime = false;

void setup() 
{
	size((int)SCREENWIDTH, (int)SCREENHEIGHT);
	frameRate(30);
	ellipseMode(CENTER);

	// set up ma gears
	gears = new Gear[7];
	gears[0] = new Gear(390f, 850f, 200f, 1f, 0.1f, 4, false);
	gears[1] = new Gear(364f, 750f, 75f, 1.3f, -0.5f, 1, false);
	gears[2] = new Gear(385f, 693f, 50f, 0.5f, 0.9f, 2, false);
	gears[3] = new Gear(450f, 750f, 100f, 1f, 0.2f, 3, false);
	gears[4] = new Gear(525f, 750f, 50f, 0.2f, -0.9f, 1, false);
	gears[5] = new Gear(570f, 680f, 120f, 0.4f, 0.2f, 3, false);
	gears[6] = new Gear(130f, 585f, 100f, 1f, 0.095f, 4, true);

	// set up the bar
	bar = new Bar(230f, 560f, 700f, 60f);


	gifExport = new GifMaker(this, "machine.gif");
  gifExport.setRepeat(0); // make it an "endless" animation
  gifExport.setDelay(1000/30);  //maybe no delay?
}

void draw() 
{
	pushMatrix();

		// do all calculation as if screen is 1500x1500
		scale(SCREENWIDTH/1500f, SCREENHEIGHT/1500f);

		background(0,0,0);

		// draw ma gears
		for(int i = 0; i < gears.length; i++)
			gears[i].draw();

		bar.draw();

		stroke(255,255,255);
		strokeWeight(10f);
		line(gears[2].x, gears[2].y, gears[6].x, gears[6].y);
		line(gears[6].x, gears[6].y, bar.x, bar.y + bar.height/2f);

	popMatrix();
	
  gifExport.addFrame();

  if(frameCount == 58)
  	gifExport.finish(); 
}



class Bar
{
	public float x, y, width, height;
	private float origX;

	public Bar(float x, float y, float w, float h)
	{
		this.x = x;
		this.y = y;
		this.width = w;
		this.height = h;
		this.origX = x;
	}

	void update()
	{
		float t = 0f;

		if(byTime)
		{
			t = (millis()%1000f)/1000f;
			if(millis()%2000f > 1000f)
				t = 1f - t;
		}
		else
		{
			t = ((float)frameCount%29f)/29f;
			if(frameCount%58 > 28)
				t = 1f - t;
		}

		float dx = function_CircularFillet(t, 0.803f, 0.31f, 0.75f);
		x = origX + 300f*dx;
	}

	void draw()
	{
		this.update();
		
		beginShape();
			vertex(x,y);
			vertex(x+width*0.8f,y);
			vertex(x+width,y+height);
			vertex(x,y+height);
		endShape();
		//rect(x,y,width,height);
	}
}

class Gear
{
	public float diameter, angle, angleRate, numSpokes, x, y;
	boolean hasArc;

	public Gear(float x, float y, float r, float a, float ar, int ns, boolean ha)
	{
		this.x = x;
		this.y = y;
		this.diameter = r;
		this.angle = a;
		this.angleRate = ar;
		this.numSpokes = ns;
		this.hasArc = ha;
	}

	void update()
	{
		float t = 0f;

		if(byTime)
		{
			t = (millis()%1000f)/1000f;
			if(millis()%2000f > 1000f)
				t = 1f - t;
		}
		else
		{
			t = ((float)frameCount%29f)/29f;
			if(frameCount%58 > 28)
				t = 1f - t;
		}
		float dar = function_CircularFillet(t, 0.803f, 0.31f, 0.75f);

		angle += (dar+0.1f)*angleRate*3f;
	}

	void draw()
	{
		this.update();

		pushMatrix();
			translate(x, y);
			rotate(angle);
			
			stroke(100,100,100);
			strokeWeight(4f*diameter/100f);
			float rd = random(0.98f, 1.02f) * diameter;
			ellipse(0f, 0f, rd, rd);

			strokeWeight(10f*diameter/100f);
			for(int i = 0; i < numSpokes; i++)
			{
				pushMatrix();
				rotate((float)Math.PI*(float)i/(float)numSpokes);
				line(-rd/2f, 0f, rd/2f, 0f);
				popMatrix();
			}

			noStroke();
			ellipse(0f, 0f, rd*0.1f, rd*0.1f);
			stroke(100,100,100);


			if(hasArc)
			{
				stroke(255,255,255);
				strokeWeight(30f);
				noFill();

				arc(0f, 0f, diameter*1.2f, diameter*1.2f, 0f, 2.4f);

				stroke(0,0,0);
				strokeWeight(13f);

				arc(0f, 0f, diameter*1.1f, diameter*1.1f, -0.2f, 2.6f);

				strokeWeight(3f);
				fill(255,255,255);
			}

		popMatrix();
	}
}