12 September 2013

Adam-Assignment-04-GIF

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

}

12 September 2013

GIF – Swetha

These animated gifs were hard for me to do mostly because I have not done anything like this before. I really enjoyed some of the pieces Golan showed us which were abstract but interesting so I strived to emulate that in my gifs. The process thought me a lot however I didn’t quite feel satisfied with the pieces I did. Many of the pieces underwent lots of revision as I tried to figure out helpful ‘tricks’ in my code that can help me in both this piece and many more to come. Tricks such as the one Golan showed us on the gif which only used as much frames as it took one blue dot to get to the next blue dot. The pieces I produce do have that experimental quality that I liked about Davidope’s work, however, I feel like there is more that can be done with them to take them to a new level. I will be working more on these outside of class because I definitely think that they have the potential to be much greater.

Some Sketches:

Originally, the wave formations were going to be different but I ended up taking another route.

Here is the code:

// Global variables. 
int     num = 1;
int     nFramesInLoop = 120;
int     nElapsedFrames;
boolean bRecording; 

//===================================================
void setup() {
  size (500, 200); 
  bRecording = false;
  nElapsedFrames = 0; 
}
//===================================================
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;
    }
  }
  saveFrame("GIFS"+str(nElapsedFrames)+".png");
}

//===================================================
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 (180);
  smooth(); 
  stroke (0,0,0); 
  strokeWeight (2); 

  //----------------------
  // Here, I assign some handy variables. 
  float cx = 100;
  float cy = 100;

  //---------------------
  //----------------------
  // Here's a pulsating ellipse
  //float ellipsePulse = sin ( 3.0 * percent * TWO_PI); 
  background(255*(num%2));
  //nElapsedFrames+=1;
  float ellipseW = nElapsedFrames*5%(width+150); 
  float ellipseH = nElapsedFrames*5%(width+150); 
  //float ellipseColor = map(ellipsePulse, -1,1, 128,255); 
  fill (255*(1-(num%2))); 
  ellipse (width/2,height/2, ellipseW, ellipseH);
  nElapsedFrames+=1;
  if(nElapsedFrames*5%(width+150) == 0){
     num+=1;
   }

  int counter = 0;
  while(counter<=30)
   {
    for (int sy=0; sy < height; sy+=4){
      stroke(0);
      float t = map (sy, 0,height, 0.0,0.25); 
      float sx = 100 + 25.0 / tan ((t + percent)*TWO_PI); 
      point (sx+counter*10,sy); 
      }

    for (int sy=0; sy < height; sy+=4){
      stroke(255);
      float t = map (sy, 0,height, 0.0,0.25); 
      float sx = width/2 + 25.0 * tan ((t + percent)*TWO_PI); 
      point (sx+counter*10,sy); 
      }
      counter+=1;
      saveFrame("Gif-.png");
   }

  //----------------------
  // If we're recording, I include some visual feedback. 
  if (bRecording) {
    fill (255, 0, 0);
    textAlign (CENTER); 
    String percentDisplayString = nf(percent, 1, 3);
    text (percentDisplayString , cx, cy-15);
  }
}

12 September 2013

Chloe – LookingOutwards02

BALL MAZE BY DAVID THOMASSON

Using the newly released LeapMotion, Ball Maze use the ‘Leap Motion For Processing’ library from voidplus in Processing on the laptop, which talks to Arduino in the maze. I admire this project for its tangibility, breaking the boundaries between the real and the digital, making for a much more intuitive gaming interface. The smoothness of the board’s movement really surprises me, as I have played with the LeapMotion before and found that even on the screen, it can be a bit glitchy.

TYPEFACE BY MARY HUANG

TYPEFACE is a study of facial recognition and type design, creating a typeface that corresponds to each individual, like a typographic portrait. As a communication design student, this project pushes at a lot of my buttons. There is a lot of talk about content driving form, the message defining the medium, etc. This is especially true for things that concern branding and identity, the most effective ones allowing for variation across many platforms while still maintaining a general level of quality and cohesion throughout. At the same time, for there to be a human touch in the formation of the type despite its digital interface shows yet again another wonderful example of bridging the gaps between humans and technologies.

EYES ON THE SKY BY JED CARTER

“I believe that most people respond more intuitively to simple colours than to the complex units of data found in weather reports and downloadable apps. My phone can instantly inform me of the current temperature outside in degrees of Celsius, but this reading tells me nothing of how warm or cold it actually feels. How warm is 18°C, exactly? Does that mean I need a jumper or a coat? We can access a multitude of different kinds of data relating to the weather, but can this information be used to create something beautiful or intuitive to read?”

Jed Carter used 64 public-access web cameras across Europe, recording the colour of the sky, at each point, at regular intervals and produced a book that collects a week of paintings where cameras paint the weather, once every hour. Processing was used to map RGB values collected from the photos to geographic locations, rendering a huge sequence of color maps of the sky.

With the erratic weather that has been plaguing my health and sanity this week, I find myself appreciating the quiet poetry of this work. Although it took me a while to figure out how exactly his system worked and to let go of the disconnect of the final product from its initial driving idea, I think it is in itself a beautiful artifact. I would love to see this idea of enhancing weather data using intuitive colors, with plays on the HSB scale depending not just on temperature, but how that temperature is changed with windchill, humidity, etc. It certainly would have helped with me wearing the right things this weird week and helped me avoid getting sick!

12 September 2013

Radiation Cross

./wp-content/uploads/sites/2/2013/09/radiationcross.pdf

Continue reading →

12 September 2013

Maryyann-Around the Sun

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

12 September 2013

Jun-LookingOutwards-2

Rotation Recurtion Tree (ArtBotHack): https://openprocessing.orgsketch/108420

What originally made me curious about this piece was because it came from the OpenProcessing collection “Simple (but not simple)”. This one uses recursion to create beautiful images. From afar, they look like complex lace/embroidery patterns. I actually haven’t really considered using recursion for visual appeal much, so this would be something interesting to think about for a while. Colors here would have also been nice, but I understand keeping it as simple as possible as its appeal too. Only down side is that images produced are better for viewing from afar or small, since looking at the image in detail reveals awkwardly terminating line segments.

magnet-ink (Giovanni Carlo Mingati): https://openprocessing.orgsketch/765
I quite like this one. The interactivity is well-done, and the colors and the way particles come together create very beautiful images. It’s like playing with auroras. Simplicity of the code is also impressive (noted need-to-study-and-patch-up-own-skills).I just don’t like the downward motion/gravity of the dust very much, but I don’t think it’s too significant of a change. With gravity, it’s just dust. Without gravity, it would be like space dust.

USphHarmonics01 (Marius Watz): https://openprocessing.orgsketch/64705
3-D modeling of a series of wave functions. The colors come together nicely and images produced look like attractive flowers. I think this is a good combination of simple math and visual aesthetics. Code seems very short and simple but imports a lot of things, hmm, so I’m actually not sure what is going on here or what the curves are.

12 September 2013

Maryyann-Snake

./wp-content/uploads/sites/2/2013/09/Snakes4.pdf

./wp-content/uploads/sites/2/2013/09/Snakes3.pdf

./wp-content/uploads/sites/2/2013/09/Snakes2.pdf

./wp-content/uploads/sites/2/2013/09/Snakes.pdf

I made my wallpaper based on the game Snake. The ellipses start from the left top corner and spirals to the middle and increase in size to imitate a snake chasing its food.

12 September 2013

Maryyann-Schotter

int offset;
float rotation;
int min, max;

void setup() {
size(540, 840);
background(190);
swidth = sheight = 30;
offset = 90;
rotation = radians(1);
min = -1;
max = 1;
noLoop();
}

void draw() {
noFill();
for (int row = 0; row < 22;row++) {
for (int col = 0; col< 12;col++) {
pushMatrix();
translate(col*swidth + offset, row*sheight+offset);
rotate(rotation);
rect(0, 0, swidth, sheight);
popMatrix();
rotation=radians(random(min, max));
}
min -= 3;
max += 3;
}
}

12 September 2013

Rachel-Schotter

/*Rachel Moeller
EMS2 Assignment 4 Schotter Reproduction
*/
int bufferSpace=50;
float r;
float i;


void setup()
{
  size(340,500);
  smooth();
  noLoop();
  rectMode(CORNER);
}

void draw()
{
 background(200);
  strokeWeight(1);
  noFill();
 
   
  for(int rows=bufferSpace;rows< =270;rows+=20)
  {
    i+=i;
    for(int cols=bufferSpace;cols<=410;cols+=20)
    {
      r=(cols)*random(-0.00009,0.00009);
      pushMatrix();
      translate(0,r*cols);
      
    
      rotate(r*(cols/100));
      rect(rows,cols,20,20);
      popMatrix();
    
    }
  }
}

12 September 2013

Looking Out

1) Hair Ball: Edward Porten

The project Hair Ball caught my attention because of it’s interesting textures and realistic fur movement. I enjoy tinkering with 3D computer graphics and would also hope to explore the 3D features on open-processing as well. I found the “hair ball’s” ability to change it’s coat so smoothly and react to the viewer’s cursor naturally very alluring. The jump is a little sudden, however and I would have liked it better if there was more elasticity in the creature’s jump and body as it went up into the air. The code includes classes for it’s coat, it’s eyes and it’s movement. There are many properties involved with the eyes that creates a realistic feel to the little creature. Even though the form is so simple, its ability to interact with the viewer creatures an urge to interact back and discover all the little details in the form. Another observation I noticed while messing with the program was that when the mouse is placed over the creature, his fur spreads out a bit near the mouse. I do wish that a better job was done with the fur spreading.

2)FLUX: Avcansaray Caddesi

Flux is a fantastical video devoted to the famous sculptor Illhan Koman. It involves a series of generative randomized transformations on red sphere. The continuous movement reminds me of the mimicry of natural patterns or phenomenons, such as tornadoes, whirlwinds and clothes. The sphere evokes strong emotions through its movement and brilliance in colors. There was no source code present in this work, so I wasnt’ able to peek into the artist’s brilliance. In the near future, I would like to incorporate some of this brilliant movement into my pieces as well.

3)MagTentacles: Giovanni Carlo Mingati

MagTentacles proved to be yet another impressing art piece. Created by Giovanni, mag Tentacles follows a large loop that cause tentacles to emerge and submerge into a green from. It’s randomness and slow speed draws the viewer into the art piece because it almost looks like you’re about to see the other side, but then the tentacles rearrange into another view. For a moment, you see an octopus, then the next it’s gone and turned into a start, then next an anenome. I really like how the form rotates and almost seems to swim around in a blue vacuum, pushing the “water” aside as it moves its tentacles around. I do wish that the background was a bit darker; I think that would bring out the presented object even more. The Rings on the arms make good indicators of where the legs are positioned in the object until the sinc back. The source code is pretty short. It involves different vertices to the draw the beautiful “legs” of the “tentapus:)