Repaired code at:

https://gist.github.com/golanlevin/51d7912ec15e97100ca6d36b89894b7a

arialy_loop

I focused more on the process of creating this piece more than what the end result be. I wanted to see what would happen when I make the end points of lines trail around the opposing edges of the canvas border. I made one line do so and just mouseClicked to find what its coordinates were later on. It was satisfying to see what pattern it would make in the end. I could have pushed the pattern a little further by perhaps creating another square in the middle, and maybe find more sense in the amount of lines I used.

loop.js

github link coming soon

****Better footage to be up soon****

My gif is much different than originally intended. I really wanted to work 3d and set out to use Maya to create gifs similar to those of Julian Glander. His work was very playful and stylized but also very simple. However his work is very object- and character-oriented, aspects of animation that are hard to execute ONLY through code. From there I began looking at the creation of fractals and recursive designs using Python in Maya. All in all, the learning curve kept me from creating a gif that I would be proud of. Instead I decided to experiment with the 3d primitives of p5.js,  and tried out creating a neutron-looking gif using those tools.

My initial inspirations for the piece were orbits, constellations, compasses, and time. When I fist thought of looping, I thought about how hands loops around the face of a clock. Even in the absence of numbers, the looping still give a sense of time passing. As i sped up the time of the loops I noticed a pendulum effect starting to emerge. I really just wanted to experiment with the aesthetics of time passing, and as I tweaked different details , I noticed that I could make myself feel like time was moving slower or faster, solely based off of my mind’s association between the pace of the orbiting lines and time. When i think of where I fell short in this project, I think of detail. When I was designing this loop, in my head I had pictures of chronograph watches which is the classic and refined style I was looking for. It was just hard to accomplish that aesthetic through graphics. So even though it conveys a sense of time and space, it looks more like a diagram than a design piece.

Animated Loop

gif-wholeline

For this project, I wanted to create something simple but organic– something that actually repeats in real life. I tampered with various rolling object ideas and falling objects, but the mechanics of water/fluid interested me the most.
My original idea for this project was to create a droplet falling from a horizontal surface. I didn’t quite get to the point where the droplet would detach and fall, mostly due to my inability to figure out how to use geometry and trig with bezier curves. I ended up just making the drop formation loop.

GitHub Link

kealiseastarsgif

The introduction to the assignment and the subsequent examples shown made me instinctively assume that the gif project would have to be approached in a very geometrical and structured way–which was different from my usual ideas. As such, a lot of my original sketches and planning were ingrained in shapes and solids, trying to integrate a seamless transformation while manipulating perspective in space. However, I was unable to come up with an polished idea from this track, mainly because I couldn’t tell without modeling, whether some figure would be able to translate or rotate into a continuously looping gif. So I worked off my personal aesthetic of a streamlined design again, particularly inspired by the sinusoidal wave from Golan’s sample gif. With my affinity for nature, almost reflexive because of my constellation clock from the previous assignment, I thought of utilizing multiple sinusoidal waves as strings and curtains of stars against another dynamically rendered blue backdrop–but then finally decided to actually contrast this by customizing horizontal waves with differing heights and angles to mimic waves; I increased the substance of the idea of a body of water by also adding noise waves that barely blend in with a top-down gradient, upon which I loop the raining down of stars that lose opacity as they fall, as if swallowed by the waves of the water. I believe I succeeded at sticking true to the type of design and atmosphere I wanted to output–like my clock, I wanted the visuals to exude a calm sense of smoothness and serenity, rather than the mind-boggling, logically impressive illusions and riddles of the complicated, geometric gifs. Food for thought on improvements include: an alternative to noise waves that better compliment sinusoidal waves by being more wavy and streamlined, but also visualizes a solid color underneath it’s boundary; comets/shooting stars in the skies to add texture (streaks from the changes in velocity), perhaps another approach to gradient backgrounds (increase complexity/layers if necessary).

**in regards to exporting the gif, I used Photoshop after exporting the frames from the p5.js framework–but as to why it’s incredibly slow on some browsers, I unfortunately can’t tell why…
I also realize that my noise waves end up becoming the bug in the animated loop–they don’t carry over seamlessly like the sine waves do, so it probably would have been better if I just kept and multiplied the sine waves (I’m so sorry)
for future reference, I’ll try to learn how to somehow “hardcode” noise waves–I could numerically manipulate the sine waves to customize height, girth, speed, and ensured that the frames exported matched up as it loops, but I could only change the potential height and depth of the noise waves, and as such they are still “random” with each run of the program.
I also made the conscious decision to keep the noise waves because I felt like the bottom of the graphic felt a bit too empty with just the linework of the sine waves, and the gradient of the background..

GitHub repository//

tigopgif.js

I am actually mesmerized by my gif(not to toot my own horn, I just didn’t think I could make something like this). I don’t know how fast it runs, but I had a problem with having it run faster than I had wanted for it to run. On my phone it seems to be running okay. I had a completely different vision of this project before I began, I was going to end up creating something that represented my hand drawn cartoons but then I ended up painting. This piece actually reminds me of some of my physical 2D work in a way (old work) so it was kind of weird to see something that reminded me of that on my laptop. Lots to work on, I need to move onto the next step, which means taking this style and applying it. Right now it just feels like a painting, and I don’t find anything wrong with that, I actually came to realize how exploring the algorithms and processes of the code and just playing around was something really special, and I think that new found appreciation is important. I really had fun making this. Just to show you how off this was from my original game plan, you can look at some of my sketches. I had planned to have a creature flying through the air and have these little circles fly behind the creature. Then I became interested in mapping and using trig functions to map, and then I realized that I could use noise, and here we are today. What a journey.

kadoin-loop

Based on the inspirations below, I wanted to create an underwater seaweedy scene because wiggling seaweed seemed like a fun motion to imitate. Without the random bubbles, it would be able to loop continuously because the seaweed is just based on sinusoids, but I felt like it needed some kind of other movement to it so I put them in. The seaweed isn’t drawn very efficiently so it’s a bit slow running.

Light Processes

Carl Burton

This sketch contains a lot of values that need to be drawn, so give it a minute or two to load (it takes a while! )

loop

For this assignment, I wanted to experiment with drawing 3D models in p5js. My first step was acquiring a 3d model. Since there is are shortage of nude female figures online, I figured I’d grab one.

I then reduced the number of vertices (also I got rid of the hair because it was 2 much) and explored the points as a .xyz file. This kind of file can be opened in a text editor, and is a csv list containing the x,y and z coordinates for each point in a model.

I copied that info over into an array in my sketch and drew the model from that info. In retrospect, I should have further reduced the number of verts. I tried this with 3D models made using photogrammetry, but the organization of points was not nearly as conducive to this method of drawing models.

I had a heck of a time trying to get my program to output frames, and when I finally got it to, I couldn’t figure out how to get it to output png or jpg — it would only output a generic “file” type. So I’ve just embedded my code the old-fashioned way. This assignment didn’t go amazingly — I eventually decided that I wanted to actually make a non-abstract composition, but the one I came out with is kind of simplistic. I think the faces communicate tone nicely, but they could be vastly improved with more attention. And the whole gif thing is a bummer.

sketch

ANIMATED GIF OF CODE:

This particular GIF is very slow because I had to optimize it to be able to upload it to WordPress. A live code version is below too.

LIVE EMBEDED CODE:
catluloopinggif

With this GIF project, I wanted to create something relatively clean and simple to look at. At first, I toyed with the idea of wind blowing cloth, and did a few sketches of the frames of that idea. I thought it would create a nice sense of movement in the confines of the GIF. Later, I remembered a video I watched in my concept studio about origami, and then started thinking about that. I thought about the folding of paper in half and how it always transforms into itself. I also thought about the circular arc square paper makes as it folds forward. I decided to go with this idea because I thought the simplicity would make it intriguing. As I played with the idea in code, I started out just having the paper fold. Then, curious about its path, I removed the background redraw and found myself liking the trails that the paper/box left as it folded each time. The interesting shape it created was almost painterly, and reminded me of some sort of one-eyed cartoon character. Overall I’m happy with the GIF. It was fun to make and pleasing to my eye. One thing I couldn’t do was get the code to start with the trail marks already behind it. Therefore, after the first rotation it endlessly loops.

Github code link:
https://github.com/catlu4416/60-212/blob/master/catluloopinggif.js

Animated Loop [github]

cambu-AnimatedLoop

When looking through the examples on the deliverables 03 page, I was particularly impressed by the simple bees and bombs dot explorations. I began by sketching dots flying onto and then off of the canvas and also explored colour and gradient notions. To create interesting motion, I used a combination of mapping, pattern functions, and sin() waves, but was was again frustrated at my inability to easily visualize all of the pieces going into the animation in my head. This made it hard to troubleshoot small inconsistencies in the motion, because too many compound operations were forming it up. One idea I have for a project later this semester is a graphing module that makes it easier to see all of these various operations while coding, I think this would greatly reduce the need to constantly pepper my program with print statements.

Updated with ~real~ gifs:

So originally I had some grand ideas about importing OBJ files and doing some nifty glitch-aesthetic distortion of the 3d models and being all trendy like that but after some technical hullabaloo with anchor points and textures and processing not being able to calculate things fast enough I decided to drop that and make some hard and fast limitations so I could get something out quickly and without over-complicating things.

My self-imposed limitations were:

400x400px

2 seconds per loop @ 60fps = 120 frames.

Only black and white

Only use one type of shape (rectangle, circle, etc.)

Only a single for() loop. No object arrays, no particle systems, etc.

From there, my only direction was a general gist of “there’s going to be a lot of squares and they will spin”

So I just played with iterations for a while, letting ideas emerge from happy accidents and a lot of trial and error. I made a million iterations, some more rainbow and wacky than others, but found two that I particularly liked.

Overall, I think my approach was a bit of a cop-out, and I was disappointed in myself for not trying to learn a new algorithm or technique that I wasn’t familiar with. While the results I came up with are visually compelling to a degree, they don’t have the mind-bending wow factor of that bees&bombs quality stuff.

No pen and paper sketches this time, this was really a ‘code as sketch’ kind of experience. In retrospect, shoulda taken some screenshots along the way as there were many iterations.

Code here:

import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;
import peasy.test.*;

PeasyCam cam;

float count = 4000;
////////////////////////SETUP//////////////////////
void setup() {
  //Settings Things
  size(400, 400, P3D);
  smooth(64);
  frameRate(60);
  colorMode(HSB,120,120,120);
  rectMode(CENTER);
  sphereDetail(3);
  float cameraZ = ((height/2.0) / tan(PI*60.0/360.0));
  perspective(PI/5, width/height, cameraZ/10.0, cameraZ*10.0);
  //camera things
  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(0);
  cam.setMaximumDistance(1);
}
/////////////////////////DRAW//////////////////////
void draw() {
  //Refresh stuff
  //background(255);
  fill(0);
  pushMatrix();
  translate(0,0,-3000);
  rect(0,0,100000000,100000000);
  popMatrix();
  lights();
  
  noFill();
  strokeWeight(1);

  for (int i = 0; i < count; i++){
    //float h = abs((((frameCount+i+00)%120)-60)*2);
    float h = abs((((frameCount+(i*sin(abs((((frameCount+i+00)%120)-60)*2)/100.0)+1))%120)-60)*2);
    float s = abs((((frameCount+(i*sin(abs((((frameCount+i+40)%120)-60)*2)/200.0)+1))%120)-60)*2);
    float b = abs((((frameCount+(i*sin(abs((((frameCount+i+80)%120)-60)*2)/300.0)+1))%120)-60)*2);
    stroke(0,0,h);
    //stroke(100);
    pushMatrix();
    //(i*sin(abs((((frameCount+i+00)%120)-60)*2)/100.0)+1)
    rotateZ(-radians(i+frameCount%240.0*360.0/240.0));
    //rotateZ((i/10.0*sin(abs((((frameCount+i+00)%120.0)-60)*2.0)/700.0)+1.0));
    translate(0,0,-i/3.0);
    //translate((i/10.0*sin(abs((((frameCount+i+00)%120.0)-60)*2.0)/800.0)+1.0),0,0);
    //rotateY((i/10.0*sin(abs((((frameCount+i+00)%120.0)-60)*2.0)/800.0)+1.0));
    
    //rotateX(-radians(i+frameCount%40.0*360.0/40.0));
    rect(0,0,50-(i+1)*0.02,50-(i+1)*0.02);
    popMatrix();
  }
  
  //if (frameCount < 121){
  //saveFrame("gif-3/######.png");
  //}
  //else{
  //exit();
  //}//end saveframe stuff
}//end draw

Commented out code is some of what I used for the different iterations.

OKAY BABE

sketch

This is, unfortunately, not the plan I had in mind. I want to learn 3D coding so badly but as of now I can’t figure it out on my own. The original plan was to have a cube drop into a “liquid” and have it disappear in a ripple. I really do like how this animation came out though. It was a bit of an accident while experimenting with ortho() camera settings in WEBGL, but then I refined it into this. Since this was spontaneous, I never made sketches for it. As for critiquing, it isn’t very complex, code-wise, and I could probably do more with the cube movement. I really want to learn how to make fluids and objects and physics work. It calls to me, but I can’t answer.

I actually really enjoyed creating this piece. Initially, I was having a hard time coming up with a concept. However, after working on the “Interruptions” re-code, I accidentally came across having all the lines point in one random direction. This eventually got me thinking about the potential of having different shapes point in a singular direction.

While thinking of different ways to further this concept, I was listening to a jazz musician by the name of Trombone Shorty (http://www.tromboneshorty.com/) and was kind of thinking how wide he allows his mouth to open in order to get new and interesting tones regarding his voice and instruments. One thing led to another and I decided to create a creature that was constantly talking, or “quaking” in this case, and that didn’t really have control over how wide it allowed its aperture to open.

I really wanted to create something cute and kind of funny looking in this project, which I think I achieved very well. I think I fell short on how expressive the creature (duck) could be in regards to other parts of its body, even though my intent was to focus on the aperture and face of the creature. If I were to continue working on this piece, I think I would create a body for it and also have that flail around.

GitHub Link: https://github.com/xapostol/60-212/tree/master/Deliverables%203%20-%20xastol/Animated_Loop

xastol-p5-loopinganimation

Here is the code running in p5.js (the actual gif is below):
jaqaur_animated_loop

I didn’t have any really great ideas for this project. I thought I could do something about my love of math, like something with a Klein bottle, or something infinite that shows the set representation of all natural numbers. But I didn’t know how to implement either of those in a realistic, interesting way. When I started sketching things, one of the first simple geometric ideas I had was the one I ended up going with: “Ladder Squares.” It’s the fourth sketch on the sheet below. I thought little lines could climb down horizontal “rungs,” forming squares as they go. It’s one of my simpler ideas, but I really like how it turned out. It’s easier to look at without getting a headache than I’m sure some of my others would have been. I decided to add a slight pause when the lines are forming squares and when they are forming horizontal lines, as those are the most interesting positions to me. I added the blue-green gradient last minute to make it a little more interesting.

Here is the gif itself. Sometimes it runs really slowly; I don’t know why:

It also looks interesting when you modify the code a little bit so some lines climb backwards, although I didn’t like this version quite as much. I wanted the squares.
jaqaur_animated_loop-backwards

Here’s a link to the code on Github.

I am not too proud of this project- I’m not sure why but there are some tasks that I just have no imagination for- I was mesmerized by all the great things I saw but had zero ideas for anything good. So I just coded two different types of loops out of experimentation and the first looked better (the second was based on squares). I guess I do better with more conceptual or themed projects. I also made a second version with different colors:

Here are some notes on the project:

You can view the code on github, or see it below:

float x;
float y;
int count = 0;

void setup() {
  size(480, 480);
  background(0);
  noStroke();
  fill(255);
  ellipse(width/2, height/2, min(width, height), min(width, height));
  fill(255,0,0);
  
  float ballR = min(width, height)/2;
  float pathR = min(width, height)/2 - ballR/2;
  float mDiv = 1000.0;
  float t = millis()/mDiv;
  float x = width/2+pathR*cos(t);
  float y = height/2+pathR*sin(t);
  ellipse(x,y,ballR,ballR);
  
  for(int i=0; i<5; i++) {
    fill(200-(i*50), 0,0);
    mDiv /= 2;
    t = millis()/mDiv;
    ballR /= 2;
    pathR = pathR/2;
    x = x+pathR*cos(t);
    y = y+pathR*sin(t);
    ellipse(x,y,ballR,ballR);
  }
}

void draw() {
  count++;
  background(255);
  
  fill(0);
  ellipse(width/2, height/2, min(width, height), min(width, height));
  fill(255);
  float ballR = min(width, height)/2;
  float pathR = min(width, height)/2 - ballR/2;
  float mDiv = 1000.0;
  float t = millis()/mDiv;
  float x = width/2+pathR*cos(t);
  float y = height/2+pathR*sin(t);
  ellipse(x,y,ballR,ballR);
 
  boolean fillB = true;
  
  for(int i=0; i<5; i++) {
    noStroke();
    if(fillB) fill(0);
    else fill(255);
    fillB = !fillB;
    //fill(200-(i*50), 0,0);
    mDiv /= 2;
    t = millis()/mDiv;
    ballR /= 2;
    pathR = pathR/2;
    x = x+pathR*cos(t);
    y = y+pathR*sin(t);
    ellipse(x,y,ballR,ballR);
  }
  saveFrame();
}  

Process:

I had initially really wanted to try and make a bird made of jelly  – I thought it would be really fun to mess around with the physics and bouncy bird head-drag- motion as well as the jellied/jittered (every decreasing amplitude/increasing frequency of a sin wave) contours of the animal to suggest a type of material composition. That being said, that was the ideal, but design is all about how to address a need within constraints in material, skill and time. Hence….I went with the top option that I knew for sure I could complete in time executed with enough sensitivity to be pleasant visually as opposed to my initial ideal. Somewhere below I will elaborate on this design in regards to effective complexity.

Some inspiration:

Really hard to analyze how to do this twirling animation in flat shapes:

This is my attempt at figuring out rotation:

Sin motion! Offset sin motion great for chicken head drag – don’t get it? Check out the youtube video of chicken head drag:

With my intial idea of making a bird made of jelly that bobbled up and down with bezier curves and offset sin motion to control end points, the computer program would’ve been a heck of a lot of work for that specific desire when it could be more easily done (and better executed) in adobe aftereffects. Entire companies’ /softwares are built on making such transformations. In this, I wanted to choose a gif design that validated the use of a computer…..otherwise, it’s needlessly complex.

The sin squirming worm utilized a quick sin function to determine x position and was easier and more accurately done through a written program

lumar_loop

https://github.com/LingDong-/60-212/tree/master/animatedloop

ngdon-animatedloop

The vision come to me suddenly; I didn’t know why a torus, why flying tapes, why in these psychedelic colors, but I just knew I want to make it.

As a 3D animation with thousands of moving parts is quite complicated, I tried to first break down the problem into small parts before solving it. A torus is a circle of circles, and a tape is mainly defined by a series of coordinates. So first I made a series of points orbit around a common center, which is easy. Than I generated a bunch of these orbiting points around a circle, and render tapes based on the coordinates of all the points.

The result looks very similar to what I envisioned. I believe I used the transformation matrix effectively so that I achieved the effect in relatively concise code. However some parts of the image has anti-alias while other parts don’t, which is a bit weird if looked at carefully.

I thought about how I can go further: Perhaps I can create a series of animation, in each of them colorful flying tapes form into a different shape: a sphere, a cylinder, a person, etc and form a style.

sketch

Process:

My original start of a concept was to have 6 circles(invisible) with 3 circles on each, that will rotate in opposing direction but line up eventually to for a sort of flower. I wanted to see how this looked before I developed it further because it’s hard to imagine what a geometric animation will actually look like. I ended up coding the angles to all be reliant on the same angle ( including the invisible circles on which the smaller ones are alligned to), so when I went to make the angle change when time passed, they rotated around the canvas and made interesting paths. 0n the bottom of the post you see the different things I tried out while making gifs, including amount, size, not clearing the canvas, and color

Other versions:

random icrcle size

random circle size, but smaller

not clearing the canvas while cycling through given colors

not clearing the canvas with solid colors

slowing down

300 circles

without altering my angle variable

without altering my variable offset

smaller circle size with bigger radii and canvas size

random colors