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.