Ticha-Bots and Bitrain

Sketch:

initial sketch

Result:

 

Coding this was awkward. I never imagined that drawing without a stylus and mouse would be so tedious and time-consuming. Thankfully, I was able to make most of the measurements + find the pixel locations using my Photoshop file and the surprisingly handy Ruler Tool. As far as the animation goes, in general I am more satisfied with the final composition than the initial draft. The use of binary bits instead of conventional rain makes for a more interesting composition, and the ‘bit splashes’ in the foreground are a nice touch. Additionally, the too-small umbrella gives the animation a more comical feel. The gif itself is actually a little slower than the real one; I tried removing some frames manually but decided not to mess with it too much to avoid losing the flow of the animation (Here’s what it’s supposed to look like). I think I somewhat succeeded in giving the animation some dimensionality despite how I was limited to working with more simple tools, as opposed to working with different special effects that are available in typical animation programs. I attempted to make the robot look round by adding some simple shading and tried to give depth to the bitrain by making its color range from medium gray to white.

Still, I wish that *more* animation could be involved and that the piece could be more compositionally interesting. I added a ‘lightning’ feature briefly but decided to remove it when I felt like I was ready to have a seizure. Perhaps what it needs the most is a more interesting environment, as gray is not very exciting to look at. However, I would also have to learn how to strike a balance between minimalism and detail – as the best animations / works of art are able to use both to strengthen the overall piece.

Here is the code which is probably longer than it should be (I have no idea why WordPress add more lines at the bottom):

/* Thanks Golan for the reference code! 
 Credit to LearningProcessing for oscillation reference.
 
 */

int     nFramesInLoop = 160;
int     nElapsedFrames;
boolean bRecording; 
float theta = 0; 
float theta2 = 0;
float x;


//===================================================
void setup() {
  size(500, 500);

  bRecording = false;
  nElapsedFrames = 0;

  x = width/2-100;
}
//===================================================
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(#464646);
  smooth();
  noStroke(); 
  strokeWeight(2);
  //----------------------
  // Here, I assign some handy variables. 
  float cx = 100;
  float cy = 100;

  robotLegs();
  robotBody();
  robotHead();
  robotArms(); 

  textSize(40);
  fill(255);
  text("Error 404;;", x, 100);

  textSize((int)random(10, 22));
  pushMatrix();
  translate(-75, 30);
  rotate(radians(-8));

  //rain effect
  for (int i = 0; i < 80; i++) {
    int w = int(random(width+40));
    int h = int(random(height+40));
    fill(random(70, 255));

    int rand = (int)random(2);
    String bit = (rand == 0)? "0" : "1";

    text(bit, w, h);
  }

  popMatrix();

  pushMatrix();
  translate(-60, 480); 

  textSize(18);
  //rain effect
  for (int i = 0; i < 100; i++) {
    int w = int(random(width+40));
    int h = int(random(height/8));
    fill(random(70, 255));

    int rand = (int)random(2);
    String bit = (rand == 0)? "0" : "1";

    text(bit, w, h);
  }
  popMatrix();
  /*
  // 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);
   }*/
} 

void robotHead() {
  float a = map(sin(theta2), -1, 1, -5, 5); //shaking
  theta2 += 0.6; //lower values slow down the movement

  //head 
  fill(#e24b00);
  ellipse(257 + a, 250, 124, 84);
  fill(#f25d13);
  ellipse(257 + a, 243, 115, 70);
  fill(#f67535);
  ellipse(257 + a, 235, 110, 50);
  //shiny
  pushMatrix();
  translate(270 + a, 220);
  rotate(radians(8));
  fill(#ffb793);
  ellipse(0, 0, 30, 10);
  popMatrix();

  //left eyebrow
  stroke(#1c1c1c); 
  strokeWeight(2.6);
  line(223 + a, 245, 223, 238);
  noStroke();
  fill(#1c1c1c);
  pushMatrix();
  translate(213 + a, 236);
  rotate(radians(-10));
  rect(0, 0, 20, 6);
  popMatrix();

  //left eye
  fill(#1c1c1c);
  ellipse(224 + a, 255, 20, 20);
  fill(#ebcb88);
  stroke(50); 
  strokeWeight(2);
  ellipse(224 + a, 255, 13, 13);
  noStroke();

  //right eyebrow
  stroke(#1c1c1c); 
  strokeWeight(2.6);
  line(283 + a, 235, 283, 248);
  noStroke();
  fill(#1c1c1c);
  pushMatrix();
  translate(273 + a, 230);
  rotate(radians(10));
  rect(0, 0, 25, 6);
  popMatrix();

  //right eye
  fill(#1c1c1c);
  ellipse(284 + a, 255, 25, 25);
  fill(#ebcb88);
  stroke(50); 
  strokeWeight(2.6);
  ellipse(284 + a, 255, 16, 16);
  noStroke();

  //left ear
  fill(#1c1c1c);
  rect(186 + a, 230, 15, 44, 7);
  ellipse(185 + a, 252, 10, 30);
  stroke(#1c1c1c); 
  strokeWeight(3);
  line(181 + a, 253, 165 + a, 253);
  line(165 + a, 253, 160 + a, 247);
  line(160 + a, 247, 155 + a, 253);
  line(155 + a, 253, 152 + a, 253);

  //right ear
  rect(310 + a, 230, 15, 44, 7);
  ellipse(326 + a, 252, 10, 30);
  stroke(#1c1c1c); 
  strokeWeight(3);
  line(323 + a, 253, 343 + a, 253);
  line(343 + a, 253, 348 + a, 247);
  line(348 + a, 247, 353 + a, 253);
  line(353 + a, 253, 360 + a, 247);

  //line across middle
  noFill();
  stroke(#9e3b0a); 
  strokeWeight(1.5);
  line(257 + a, 209, 257 + a, 291);

  //bolts
  int b=0;
  for (int i = 1; i <= 5; i++) {
    ellipse(250 + a, 218+b, 4, 4);
    b+=12;
  }
  noStroke();
}

void robotBody() {
  //body
  fill(#f25d13);
  arc(241, 347, 130, 159, radians(-32), radians(213), OPEN);
  fill(#fa6a22);
  arc(241, 330, 125, 100, radians(-32), radians(213), OPEN);
  fill(#e24b00);
  ellipse(241, 308, 114, 26);

  //neck
  fill(#1c1c1c);
  rect(230, 275, 26, 37, 10);
}

void robotLegs() {
  //left leg
  fill(#1c1c1c);
  pushMatrix();
  translate(212, 420);
  rotate(radians(22));
  ellipse(0, 0, 35, 20);
  popMatrix();

  rect(205, 418, 15, 90);

  //left foot
  arc(230, 500, 40, 20, radians(-180), radians(0), OPEN);

  //right leg
  pushMatrix();
  translate(280, 410);
  rotate(radians(-22));
  ellipse(0, 0, 35, 20);
  popMatrix();

  rect(273, 418, 15, 90);

  //right foot
  arc(300, 500, 40, 20, radians(-180), radians(0), OPEN);
}

void robotArms() {
  float a = map(sin(theta), -1, 1, 230, 240);
  float b = map(sin(theta), -1, 1, 220, 230);
  float c = map(sin(theta), -1, 1, 225, 235);
  float d = map(sin(theta), -1, 1, 230, 240);
  theta += 0.03; //lower values slow down the movement

  //umbrella
  fill(#0076b3);
  rect(c, 160, 8, 200, 3);
  arc(c, 165, 160, 80, radians(-180), radians(0), OPEN);

  //left arm
  fill(#1c1c1c);
  ellipse(200, 333, 18, 23);

  fill(#1c1c1c);
  rect(195, 333, 10, 60, 5);

  stroke(0); 
  strokeWeight(10);
  line(200, 390, a, 330);
  noStroke(); 

  //left hand
  fill(0);
  rect(b, 320, 20, 25, 3);
}

Dave-LOOKINGOUTWARDS-2

The Stone Spray Project by Petr Novikov, Inder Shergill and Anna Kulik is a robot which generates sculptures from sand. The final products it creates look great, but the process of making them are even more mesmerizing. The way it moves seem almost human, and as it slowly carves out every detail, the sculpture­­­­­ grows out in an organic manner. Using sand as a medium is also intriguing, as I always thought of it as a flowing form instead of a solid state.

However, I do feel that if the robot can also make concrete sculptures rather than just generative forms alone, it would have more appeal to larger groups of people. Also I would have enjoyed a longer footage of the robot working.

Its use of sand as material to make 3D objects by a computer reminded me of Markus Kayser’s Solar Sinter Project, although Kayser melts the sand into glass before using it while The Stone Spray Object mixes the sand with substances to make it stabilize.

Oscillate by Daniel Sierra features threads vibrating to the sound of music. I have become a big fan of visualization, and this piece does it exceptionally well by having perfect sync between what is seen and what is heard, thus creating a powerful engrossing atmosphere. He also kept the animations fresh by having different viewpoints and by generating multiple effects, ranging from those similar to slivers of sand to fading flames. The heavier techno section in the middle of the video I feel is the weakest part, as it takes away the ambient atmosphere generated by the rest of the video. The visualization of music with threads and particles is similar to the lyrics video of Madness by Muse, however Oscillate uses a completely different kind of music and only uses abstract shapes instead of typography.

trailers_anemone by John Carpenter allows the audience to interact with an abstract form projected onto a wall. The movement and shape of the form caught my attention because of its color, its glow, and how it uses threads as much of its shape causes it to look electronic, or at least similar to some type of data visualization. But when it starts to move, it becomes organic, as the threads and lights start swimming in patterns reminiscent of schools of fish. I can just stare at its movements for days. However, the video is a bit short, and does not show all the interactive possibilities I would like to see, and I ended up longing for more details on the project. The lighted up organic forms moving as if though they are swimming is similar to Thatgamecompany’s Flow, although the presentation of Flow is very different from trailers_anemone which allows for more direct human interaction.

MichelleMa-LookingOutwards-2

I based my Looking Outwards subjects on the generative art I read about in Form + Code by Casey Reas, Chandler McWilliams, and LUST. Thanks for lending me the book, Golan!

Malwarez” by Alex Dragulescu (2007) analyzes the source code of malware and viruses and generates 3-D forms to model the information found in the codes. The forms almost resemble biological pathogens, and the artistic rendering of found patterns adds wonder and mystique to the subject matter. His concept of presenting invisible data into familiar, organismal is really amazing. On the other hand, the simulations might be more effective if the colors and the shapes were more imposing to instill a sense of threat in the viewer. I certainly feel the fact that only this artist could generate these pieces through his knowledge and experience with visualizing code. I can almost imagine his whole collection of works compiled into a visual encyclopedia about data.

In the piece “EPF:2003:V:A:997141“, Kenneth A. Huff incorporates the properties of prime numbers into each 3-D structure. According to his website, Huff is very knowledgeable in utilizing prime factors in math visualizations. And because I am not a mathematician, I cannot begin to fathom the elegance and beauty of the world derived in numbers. That’s why I really love how his piece shares his vision of the world. However, I think if he was trying to teach the viewers how essential and beautiful prime numbers can be, I think he could have made the visual impression more dramatic. I don’t mean that he has to make it flashy or colorful, but he could have channeled the voice of the piece from, “Look what numbers can do,” to “LOOK! THIS is the work of numbers!”

Hopefully that makes sense.

Being Not Truthful” by Ralph Ammer and Stefan Sagmeister (2006) is a really thoughtful and thought-provoking installation piece. When a person’s silhouette passes through the spiderweb projected on the screen, the web rips, but gradually mends together again. Immediately the viewer can figure out through the interaction that the piece represents a sort of fragility, and emulates how a spider continues to mend its web despite this fact. Their inspiration for the piece comes from how a maxims like the one written on the web are used despite how vulnerable it may be. Metaphors about fragility are far and wide, but I really like this piece because the interaction forces a viewer to acknowledge it. I would like to see different versions of this web in many places and in different contexts.

Ralph – Schotter

Untitled

 

size (360,560);

noFill();

for (int row = 0; row <22; row += 1) {
  for (int col = 0; col < 12; col += 1) {
    pushMatrix();
    translate(60+20*col,60+20*row);
    float jitter = random(-3.5*row,3.5*row);  //degree of jitter
    rotate(radians(jitter));
    rect(0,0,20,20);
    popMatrix();
  }
}

So Many Sine Functions

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

I was watching Lynda.com tutorials of Processing for a good hour or so, and I was interested in the tutorial on how to draw spirals. Drawing any sort of curve is really hard to picture for me, and the tutorial just drew many lines that progress in small increments. Somehow I decided I wanted to do the sine function. I don’t know why I thought that was a good idea, because the computations make this code really slow and inefficient. Or maybe I just wrote the code in a more complex way than necessary… That aside, I learned a lot this week and I’m about to learn more about animation!

void setup(){
  size(500,500);
  smooth();
  noFill();
  background(255);
  noLoop();
}

void drawBottom(int n,int t,color fill){
  float x;
  float dy;
  float y=55;
  int w=10;
  //stroke(complement[int(random(1,5))]);
  stroke(fill);
  strokeWeight(t);
  for(x=0; x<100; x+=0.1){
      dy = sin(x*0.65/w)/n;
      y+=dy;
      line(x, y, x, y);
  }
}

void drawMiddle(color fill){
  //stroke(complement[int(random(1,5))]);
  stroke(fill);
  strokeWeight(4);
  line(0,50,100,50);
}

void drawTop(int n,int t,color fill){
  float x;
  float dy;
  float y=46;
  int w=10;
  strokeWeight(t);
  //stroke(complement[int(random(1,5))]);
  stroke(fill);
  for(x=0; x<100; x+=0.1){
      dy = -1*(sin(x*0.65/w)/n);
      y+=dy;
      line(x, y, x, y);
  }
}

void drawBlock(color fill){
  drawMiddle(fill);
  drawTop(12,1,fill);
  drawTop(20,2,fill);
  drawTop(100,3,fill);
  drawBottom(12,1,fill);
  drawBottom(20,2,fill);
  drawBottom(100,3,fill);
}

void drawLine(color fill){
  for(int i=0; i< =width; i+=100) {
    pushMatrix();
    translate(i,0);
    drawBlock(fill);
    popMatrix();
  }
}

void drawUp(color fill) {
  pushMatrix();
  translate(-50,-50);
  drawLine(fill);
  popMatrix();
}

void drawHorizontal(color fill) {
  for (int i=0; i<=height; i+=100){
    pushMatrix();
    translate(0,-6+i);
    drawUp(fill);
    drawLine(fill);
    popMatrix();
  }
}

void draw() {
  drawHorizontal(150);
  pushMatrix();
  translate(width-5,0);
  rotate(PI/2);
  drawHorizontal(120);
  popMatrix();
}

Ticha-LookingOutwards-2

silk

Silk by Yuri Vishnevsky

I was looking through some generative artwork for inspiration the other day and came across this beautiful piece called Silk. As the name suggests, the user selects a color and uses the mouse to ‘weave’ the silklike neon threads. The user also has the option to choose the degree of rotational symmetry, whether they would like the figure to be mirrored across the center, and whether they would like the figure to spiral towards the center.

While Silk is not anything revolutionary, it certainly holds a lot of aesthetic appeal and its use of musical ambience makes it both a visual and audial experience. However, what I find most appealing about the work is not in the visuals or the sound, but the way users can share their creations. In more conventional ‘art apps’ the sharing of results simply involves saving the image and uploading it to some social network site. In Silk, people can actually view the process involved in making the images – giving it an almost livestream-like feature. I only wish that the generation of the user-created images did not run so quickly, as I feel that this detracts from the meditative aspect of the program.

 

Content is Queen by Sergio Albiac

‘Content is Queen’ is an interesting mosaic of internet videos that combine to form a unique portrait of the Queen. I believe the charm of this project comes from the fact that, instead of using images to create just a picture of someone’s face, Albiac uses motional  images to create a dynamic form of portraiture.

One aspect I particularly like about this project is that each of the generated portraits have some semblance of the Queen’s face, but have just enough randomness and ‘artistic liberties’ for the viewer to see the content of the videos. There some images that show the Queen’s face in near-perfect clarity, and others that just barely resemble a face and are dominated by the videos. This I think, epitomizes the tension between monarchy and democracy – which is Albiac’s intent. With this particular kind of piece, it would be even more effective if he placed it in a certain location (like a place that has a lot of traditional portraits of the Queen) to further enhance the effect of  the work.

(on a side note – I also enjoyed Albiac’s Videorative Portrait of Randall Okita)

 

Fine Collection of Curious Sound Objects by Georg Reil 

Found this little gem in the Exhibition section of Processing’s site. The project is very true to its name indeed; the sounds produced by the objects are by no means conventional, and each give its object a unique history. Reil is able to effectively create a narrative for each of these commonplace items by giving them distinct – and unexpected – ways of interacting with the user. In doing so, he challenges the belief that objects are purely utilitarian tools and entices the viewer to rediscover each object’s function. While I think this work is already very poetic as it is, I only wish his descriptions of the items were even more cryptic – so as to allow the viewer to construct their own interpretation of an item’s history.

All aspects considered, this is quite an inspirational piece that makes me want to experiment with sound objects in the future.

MELANIE-LookingOutwards-2

Garden Of Eden // Rule 110 by Peter Curet

This is a case where title greatly affects how I interpret the visuals; I could see the garden, specifically the Garden of Eden, and kept projecting what I know of the story of Garden of Eden onto the visuals. The result is fascinating; these abstract shapes become narrative. It’s obvious in the beginning because the shapes form a garden of sorts, but as time goes on, the shapes become more and more abstract, and I continued to connect the concept of Eden to the shapes. The ending is worth watching, only because there were so many complex generative shapes before and then suddenly, it all gets quiet…

Midimals by Georg Reil

Creation of sound loops is pretty common, but the way Georg Reil used the visual interface to make it seem magical is really cool to me. I’m a sucker for the idea of generating visuals with just my hands, physically touching the materialized sound. It’s also unique to find beautiful visualization of such interface in the first place, and the freedom to create shapes that correspond to the loops is inspiring. I guess I really like technology disguised as magic. I just wish there was a better documentation of it.

unnamed soundsculpture by Daniel Franke and Cedric Kiefer

This was the first thing that popped up after I googled “sound sculpture,” so I presume it’s pretty famous? And rightly so. Although they do not mention it in the process, the documentation video shows that they used Processing, presumably for collecting and manipulating the movement data from Kinect. At first I wasn’t impressed, but as they started introducing dynamic camera angles and blackness, I became mesmerized by how fantastical it looked despite being a digital form. It almost looked like a weeping goddess, if I’m allowed to be that dramatic… I’ve always appreciated dancers and the artful contortions of the human body, but this makes me appreciate the sense of unreality dance can portray through technology. The constant afterimages gave the impression that there were often multiple people dancing together, and the imagery of gravity is powerful by the end of the piece. And it’s beautiful, especially when the dancer stops moving and the particles become static and shadowed. I just have one complaint: I wish it were more dynamic at some points, to keep the audience engaged and tickled. At times it suffers from the trap dance performances fall into: letting their audience go. Though, I wonder if that’s the fault of the dancer and not the algorithm?

Ticha-Byte to Eat Wallpaper

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

I am by no means a designer-y person, but when I do design things they tend to look very…grid-like. And circular. The text in this wallpaper was parsed from a selection of 97 different .txt files that I typed up myself containing various internet slang and text acronyms, because they are my pet peeve and I felt the need to express my hatred by creating a wallpaper design filled with them. The 16 files used in each instance of the program’s execution were selected using a random number generator, so the words that appear will look different each time. The design is probably most appropriate as giftwrap paper or something small, because I feel like it would be more headache-inducing if it spanned an entire wall.

Because of the program’s dependency on the data folder containing the font and the .txt files, I had to upload it on OpenProcessing as an applet (using Processing 1.5).

Try it out here.

Michelle Ma – Schotter

I finall got this to work!! Hallelujah!! I’m still fresh to Processing and everything, so I’m pretty happy about these boxes…

size(500,700);
size(500,700);
stroke(0);
noFill();
 
float a=0;  //random bounds
float rand; //degrees to rotate randomly
 
for(int i=1;i< =20;i++){   //rows
  a += i*.7;              //randomness increases as rows increase
  for(int j=1;j<=13;j++){  //columns
    pushMatrix();
    rand = random(-a,a);
    translate(35+(j*30),35+(i*30));
    rotate(radians(rand));
    rect(0,0,30,30);
    popMatrix();
  }
}

Schotter2

Ticha-Shattering Schotter


(Click to shatter. Click again to stop.)

I was messing around with Processing and wanted to do something that was on the interactive side (and because Dave did something really neat :D). It’s not too fancy, but it works more or less the way I wanted it to. Initially, I wanted the structure to collapse continuously after the mouse is pressed once, but I couldn’t find a way to do that :/ Yay, it works now! Also, I’m going to have to find a way to not make the blocks react so violently. Fixed.

Here is le code:

int rows = 20;
int cols = 12;
bool beginShatter;
 
Square[][] squares = new Square[cols][rows];
 
void setup() {
  size(360, 480);
 
  smooth();
  //initialization of square array
  for (int c = 0; c < cols; c++ ) {
    for (int r = 0; r < rows; r++) {
      squares[c][r] = new Square(c*20, r*20);
    }
  }
  beginShatter = false;
   
}
 
void draw() {
  background(220);
 
  translate(55, 30);
 
  for (int c = 0; c < cols; c++ ) {
    for (int r = 0; r < rows; r++) {
      squares[c][r].display();
    }
  }
 
  if (beginShatter) {
    for (int r = 0; r < rows; r++ ) {
      for (int c = 0; c < cols; c++) {
        squares[c][r].fall((r+10)/4);
        squares[c][r].spin(r*3+1);
        squares[c][r].display();
      }
    }
  }
}
 
void mousePressed() {
    beginShatter = !beginShatter;
}
 
class Square {
  int xpos;
  int ypos;
  float theta;
 
  //Square constructor
  Square(int xpos_, int ypos_) {
    xpos = xpos_;
    ypos = ypos_;
    theta = 0;
  }
 
  void display() {
    stroke(1);
    noFill();
 
    pushMatrix();
    translate(xpos,ypos);
    rotate(theta);
    rect(0, 0, 20, 20);
    popMatrix();
  }
  void spin(int i) {
    float rand = random(-i, i);
    theta = 3*radians(rand)/4;
  }
  void fall(int i) {
    ypos+=(random(i))/4;
  }
}

It’s funny because I feel like the Schotters generated by this animation looks closer to the original than the ones I generated manually.