October 2017 – Page 59 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

hyt-Looking-Outwards-06: Randomness

For this week’s topic, I came across a multidisciplinary performance piece by Claire Bardainne and Adrien Mondot, “The Movement of air”. The piece was mesmerizing to watch as elements of acrobatic dancing movements, algorithmic stage design, and live music performance come together with the perfect rhythm and movement, eventually capturing the invisible movement of air using the tangible visuals and sounds.

It is interesting to learn about the duo artists’ work of progress and mechanism behind the final result. Particularly, the stage visuals are in fact projected and controlled by both human interventions and reactive data censors reinterpreting the three dancers’ location. Therefore, the factor of “randomness” is in some way controlled and “biased”, yet still spontaneous. That being said, each performance is real-time and never repetitive; while having an agenda, it concurrently allows the dancers to move freely in alignment with the digital projections, deconstructing the three-walled cube space.

However, it was disappointing that the artists disclose more information on how the set of algorithms is constructed, other than the fact that it was created with the software Millumin 2 (after ten years of using their custom made software eMotion). It seems that the speed and direction of the dancers are all detected by the sensor, then translated into those geometric patterns such as circling lines and pieces.

karinac-Project-06

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-06


function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0);
    angleMode(DEGREES);

    //Second Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,70,70);

    push();
    translate(width/2, height/2);
    rotate((second()*6)-90);
    noStroke();
    fill(156,144,94);
    ellipse(35,0,20,20);
    pop();

    //Minute Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,200,200);

    push();
    translate(width/2, height/2);
    rotate((minute()*6)-90);
    noStroke();
    fill(156,144,94);
    ellipse(100,0,35,35);
    pop();

    //Hour Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,350,350);

    push();
    translate(width/2, height/2);
    rotate((hour()*30)-90);
    noStroke();
    fill(156,144,94);
    ellipse(175,0,50,50);
    pop();

    //printed time
    noStroke();
    fill(255);
    textAlign(CENTER);
    text(hour(), 20, 20);
    text(minute(), 40, 20);
    text(second(), 60, 20);
}

I wasn’t exactly sure how I wanted to create this clock at first, so the end design really came up by trial and error.

I had a lot of difficulty with the movement of the ellipses. It took me a while to figure out how I could start at the top of the pathway and move counterclockwise. Overall, I am very excited to see how my clock turned out. I absolutely love the classy design and I believe it is something that I would actually use.

atraylor – Looking Outwards 06

For this blog post, I chose Ben Hemmendinger’s Wayfarer. This project is a randomly generated dungeon crawler game that is reminiscent of old text-based and 2D RPG games made with processing. This game is a blend of 2D and 3D graphics and is largely about exploration. There are items that you can find to defend yourself and attack monsters in the dungeons. I’m interested in this project because it’s simple and yet complex. There’s a certain charm in the 8 bit graphic style, top down projection (somewhat 0rthographic), and simple goals for simple ends. Unfortunately, my computer won’t let me play the game, but it seems from the Q&A page that the game is challenging. I also scanned the project website and I couldn’t find any specifics on the type of randomness used to produce the game, however you could make the assumption that the randomness needs to be limited for the game to be plausibly playable. Wayfarer is still under development, and I hope to see its end result. Even though it seems rudimentary, games like this show how simplicity can still be engaging.

Wayfarer wiki

yoonyouk-project06-abstractclock

sketch

function setup() {
    createCanvas(300, 480);
    background(162, 220, 254);

    angleMode(DEGREES);
}

function draw() {
background(162, 220, 254);

var H = hour();
var M = minute();
var S = second();

    
    var mappedH = map(H, 0,23, 100, 500);
    var mappedM = map(M, 0, 59, 0, 400);
    var mappedS = map(S, 0, 59, 0, 480);

    noStroke();

    //background sky color - seconds
    //the darker blue dropping down on the canvas indicates the seconds
    fill(111, 173, 254);
    rect(0, 0, width, mappedS);


    //stem - minutes
    //growth of the stem indicates the greater minutes
    //the taller the stem, the more minutes
    fill(100, 212, 126);
    rect(width/2-10, height, 20, -1* mappedM);

    //sunflower petals = hours
    //the number of petals indicates the hour of the time

    if(H==0){
        H=12;
    }

    if(H<24 & H>12){
        H-=11;
    }
 
    for (var i=1; i<H; i++){
        push();
        translate(width/2, height-mappedM);
        rotate(30*i);
        strokeWeight(30); 
        stroke(255, 208, 54);
        line(0, 0, 0, -75);
        pop();
    }


    //sunflower head
    noStroke();
    fill(112, 84, 69);
    ellipse(width/2, height-mappedM, 100, 100);



}

I was inspired to use a sunflower as my abstract clock when researching Kircher’s sunflower clock. Although Kircher used the orientation and the position of the sunflower to determine time, I decided to use the physical characteristics of the sunflower to indicate the seconds, minutes, and hours.

yoonyouk-lookingoutwards-06

Pictooptic.com

By entering any word into the wordsearch, this website generates a random collage of icons related to the word. The arrangement of the icons are also random.

Pictooptic is a website that randomly generates icons and objects that relate to any searched or random word. The icons are then arranged in a mirror arrangement in which float into space. They can be dragged depending on the movement of the mouse. By clicking “shuffle this,” the arrangement changes into a random arrangements of color and organization. The site also includes a “random word” option where a random word is generated and new icons are brought about.

I like the spontaneity and whimsical nature of the generator. No two icons are the same and instead of a random cloud of icons, the arrangement is mirrored. In addition, the additional random color scheme adds to another surprising factor. I thought it was a creative way to generate a unique collage of items. The algorithms of the project would generate the random spatial arrangement and then have that arrangement mirrored across the canvas.

mecha-project06-abstract-clock

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-06

function setup() {
    createCanvas(480,480);
    angleMode(DEGREES);
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();

    var w = width/10;
    var h2 = height/3
    background(142,185,196);   

    //body
    noStroke();
    fill(256,256,256,120);
    rect(100,80,330,340,40,40,40,40);


    //changes from 24 hour to 12 hour clock
    if(h == 0){
        h = 12;
    } else if(h > 12 & h < 24){
        h-=12;
    } else{
        h = hour();
    }

    //calls function that uses minutes to determine how many eyelashes to draw
    minuteLashes();

    for(var i = 0; i < 12 ; i++){
        //allows for two rows of eyes
        if(i < 6){
            fill(256);
            noStroke();
            arc(w*(i+3),h2,30,15,0,180);
            arc(w*(i+3),h2,30,15,180,360);
            //eye will turn red corresponding to hour
            if(i == h-1){
                fill(255,map(m,0,60,0,120),map(m,0,60,0,120));
            } else 
                fill(142,185,196);

            //blue iris (top row)
            ellipse(w*(i+3),h2,15,15);

            //pupil (top row)
            fill(20);
            ellipse(w*(i+3),h2,10,10);     

        } else{
            fill(256);
            noStroke();
            arc(w*(i-3),h2+30,30,15,0,180);
            arc(w*(i-3),h2+30,30,15,180,360);

            //eye will turn red corresponding to hour
            if(i == h-1){
                fill(255,100,100);
            } else 
            //blue iris (bottom row)
            fill(142,185,196);
            ellipse(w*(i-3),h2+30,15,15);

            //pupil (bottom row)
            fill(20);
            ellipse(w*(i-3),h2+30,10,10);        

        }
    
        //drooping eyelinds
        if(s >= 55 || s <= 5){
            if(i<6){
            fill(100,150,160);
            arc(w*(i+3),h2,30,15,180,360);
        } else{
            fill(100,150,160);
            arc(w*(i-3),h2+30,30,15,180,360);
        }
    }

        //blinks every minute
        if(s == 0){
            fill(100,150,160);
            if(i < 6){
                arc(w*(i+3),h2,30,15,0,180);
                arc(w*(i+3),h2,30,15,180,360);  
            } else{
                arc(w*(i-3),h2+30,30,15,0,180);
                arc(w*(i-3),h2+30,30,15,180,360);            
            }
        }
            
    }
}

function minuteLashes(){
    var s = second();
    //minute tally marks
    for(var j = 0; j <= s; j++){

        //draws five lashes per eye based on seconds
        if(j!=0 & j<=5){
            stroke(100,150,160);
            strokeWeight(2);
            line(128+5*j,145, 128+5*j,160);
        }
        if(j >5 & j<=10){
            line(152+5*j,145, 152+5*j,160);
        }
        if(j >10 & j<=15){
            line(174+5*j,145, 174+5*j,160);
        }
        if(j >15 & j<=20){
            line(198+5*j,145, 198+5*j,160);
        }
        if(j >20 & j<=25){
            line(221+5*j,145, 221+5*j,160);
        }
        if(j >25 & j<=30){
            line(244+5*j,145, 244+5*j,160);
        }
        if(j >30 & j<=35){
            line(128+5*(j-30),175, 128+5*(j-30),190);
        }
        if(j >35 & j<=40){
            line(152+5*(j-30),175, 152+5*(j-30),190);
        }
        if(j >40 & j<=45){
            line(174+5*(j-30),175, 174+5*(j-30),190);
        }
        if(j >45 & j<=50){
            line(198+5*(j-30),175, 198+5*(j-30),190);
        }
        if(j >50 & j<=55){
            line(221+5*(j-30),175, 221+5*(j-30),190);
        }
        if(j >55 & j<=60){
            line(244+5*(j-30),175, 244+5*(j-30),190);
        }
    }
    mouth();
}

function mouth(){
    var m = minute();

    noStroke();
    fill(255,map(m,0,60,0,120),map(m,0,60,0,120));    
    rect(150,220,230,map(m,0,60,20,180),90,90,40,40);
    noStroke();
    fill(255);
}

For this project, I decided to use hours, minutes, and seconds of the current time in order to create a graphic picture. I started by sketching out a monster that I could use to show the passage of time.

While I messed around with a couple different coded designs, I went with using eyes to indicate the hour, mouth size to indicate minutes, and eyelashes to indicate seconds. One of the eyes turns red corresponding to the current hour, and the monster blinks every minute (his eyelids appear 5 seconds before and after he blinks). He gains a new eyelash every second, and the size of his mouth is dependent on the current minute.

sntong-Project-06-Abstract-Clock

sketch

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 06 - Abstract Clock


// center of the bacteria
var cx = 240;
var cy = 220;
//radius of the moving "dial" around the color ring
var dotR = 4;
// arrays used for color assignment for each hour on the color ring
var R = [234,225,141,115,242,225,214,238,243,42,98,125];
var G = [218,160,213,100,214,152,88,51,121,165,114,198];
var B = [133,60,230,115,185,146,128,85,105,141,100,127];
// angles used to divide the ring into 12 segements
var angles = [0,30,60,90,120,150,180,210,240,270,300,330];
var nVals = angles.length;

function setup() {
    createCanvas(480, 480);
    background(0);
}

function draw() {
  background(0);
  var Min = minute();
  // white petri dish background for the bacteria
  fill(255);
  ellipse(cx,cy,350,350);

// drawing the color rings that will indicate hour
  for (var i = 0; i < nVals; i++) {
    stroke(R[i],G[i],B[i]);
    strokeWeight(10);
    strokeCap(SQUARE);
    arc(cx,cy,350,350,angles[i]-105,angles[i+1]-105);
    push();
    translate(240,220);
    rotate(-90);
    var eX = cos(angles[i])*170;
    var eY = sin(angles[i])*170;
    ellipse(eX,eY,10,10);
    pop();
  }

// make bacteria rotate each minute
  push();
  translate(cx,cy);
  angleMode(DEGREES);
  var mappedMin = map(Min,0,60,0,360);
  rotate(mappedMin);
  bacteria();
  pop();

  // isolate the "seconds" dot and the text from other fill and stroke statements above
  push();
  dot();
  textAlign(CENTER);
  text("Specimen :  #",190,430);
  text(month(),240, 430);
  text("-" , 260,430);
  text(day(), 270,430);
  text("-", 280,430);
  text(year()-2000,295,430);
  pop();


}

//bacteria at the middle of the petri dish
function bacteria(){
  var H = hour();
  // introduce some jitter because bacteria are always moving
  var jitterX = random(-.8,.8);
  var jitterY = random (-.7,.7);

// body of the bacteria
  rectMode(CENTER);
  strokeWeight(5);
  stroke(0);
  strokeCap(ROUND);
  // because the color ring only has 12 colors, the hour() value must be converted to within 12 hrs.
  if (H <= 12) {
    Hr = hour();
  } if(H > 12) {
    Hr = hour()-12;
  }

// the color assignment corresponds to the color ring and hour it indicates
  fill(R[Hr],G[Hr],B[Hr],200);
  rect(0+jitterX,0+jitterY,50,150,25);

  // little legs around the bacteria
  line(0,-75,0+jitterX,-110); // minute hand for time
  line(-10,73+jitterY,-13,80);
  line(10+jitterX,73,13,85+jitterY);
  line(-25+jitterX,50,-35+jitterX,50);
  line(-25,-60+jitterY,-30+jitterX,-65);
  line(-18,-70+jitterY,-26,-80);
  line(18+jitterX,-70,20+jitterX,-73);
  line(25,-30+jitterY,30,-30);
  line(25,-40,34,-40+jitterY);

  // little dots inside the bacterias, the guts
  noStroke();
  fill(0);
  ellipse(10+jitterX,10+jitterY,dotR,dotR);
  ellipse(-10+jitterX,-40+jitterY,dotR,dotR);
  ellipse(5+jitterX,-30+jitterY,dotR,dotR);
  ellipse(-10+jitterX,40+jitterY,dotR,dotR);
  ellipse(5+jitterX,55+jitterY,dotR,dotR);
  ellipse(-5+jitterX,30+jitterY,dotR,dotR);
  ellipse(5+jitterX,-20+jitterY,dotR,dotR);
  ellipse(-6+jitterX,13+jitterY,dotR,dotR);
}

// small dot that act as the "dial" for a microscope
// moves along the ring per second
function dot(){
  var Sec = second();
  var mappedSec = map(Sec, 0,60, 0,360)-90;
  var x = cos(mappedSec)*150;
  var y = sin(mappedSec)*150;
  fill(200);
  noStroke();
  ellipse(cx+x,cy+y,10,10);
}

For this assignment I imagined as if we are viewing into a microscope to see a small bacteria that is moving around in the petri dish. The longest “leg” on the bacteria is the minute hand. The bacteria changes color according to the hour color that is found on the color ring. The specimen name is the listed as month/date/year, which completes this “clock”. I took a long time to figure out the small adjustments for each element to work together (i.e those extra 90 degree changes and shifting) and align in color, but small sketches and tables help me organize the data before I input them to arrays.

yunzhous-LookingOutwards-05

Boulon

Metaballs

I picked two artwork to show how 3D rendering can be applied to both large scene and small scale. Boulon is done by Florent Duport and Metaballs is done by Elmar Glaubauf. I really like the depth of field of the scene in Boulon, and the poping signboard. The contrast is well controlled, just enough for the lanterns and signs to pop out.

The balls in Metaballs has a gradient color, and semi-opaque and glossy texture. It seems to be reflecting the background color, which is very delicate.

The algorithm used for rendering is vray. It is commonly used in architectural rendering, and now I learned it can be applied to wider fields. The users can adjust many settings in vray, such as amount of light, amount of reflection, etc.

You can see larger images here: metaballs Boulon

daphnel-Looking Outwards-06

Marius Watz and Jer Thorp, a generative and data artist respectively, used pseudo-random compositions of shapes and figures in order to create a set of computational designed artworks for the “Random Number Multiples” series. The photo above is supposed to be a volcano erupting with the molten lava colored as different streaks. I find this piece of work to be very intriguing; how a series of lines and basic colors were able to make a simple yet colorful piece of work. I admire the fact that even though these artists are skilled in computers, they chose instead to screen print their artworks that they created through their computer softwares by hand. I feel that this work of art is very representative of the artists themselves because although randomized to a certain point, the lines still look very uniform, clean-cut and neat.

yunzhous-project-05

sketch

function setup() {
    createCanvas(480, 480);
    background(41, 90, 141);
    angleMode(DEGREES);
    noLoop();
    
}

function draw() {

    for (var x = 0; x < 480; x += 96){
        for (var y = 0; y < 480; y += 96){
            push();
            translate(x, y);
            pattern();
            pop();

        }
    }
}

function pattern(){
    var radius = 20;
    var centerX = 40;
    var centerY = 40;

    //main piece
    strokeWeight(1.5);
    stroke(0);
    fill(214, 151, 0);
    arc(centerX, centerY, radius * 2 + 10, radius * 2 + 10, 0, 315); //edge
    fill(243, 210, 132);
    arc(centerX, centerY, radius * 2, radius * 2, 0, 315); //inside

    //separate piece
    push();
    rotate(-45);
    strokeWeight(1.5);
    stroke(0);
    fill(214, 151, 0);
    arc(centerX - 25, centerY + 22, radius * 2 + 10, radius * 2 + 10, 0, 45); //edge
    fill(243, 210, 132);
    arc(centerX - 25, centerY + 22, radius * 2, radius * 2, 0, 45); //inside
    pop();

    //toppings
    strokeWeight(1/2);
    fill(238, 97, 69);
    ellipse(centerX, centerY - 8, 6, 6);
    ellipse(centerX - 3, centerY + 5, 6, 6);
    ellipse(centerX - 10, centerY - 3, 6, 6);
    ellipse(centerX - 10, centerY - 13, 6, 6);
    ellipse(centerX + 8, centerY - 13, 6, 6);
    ellipse(centerX - 18, centerY + 3, 6, 6);
    ellipse(centerX - 12, centerY + 9, 6, 6);
    ellipse(centerX - 3, centerY + 13, 6, 6);
    ellipse(centerX + 7, centerY + 9, 6, 6);
    ellipse(centerX + 17, centerY + 4, 6, 6);
    ellipse(centerX + 27, centerY - 11, 6, 6);

    //division
    for (i = 0; i < 360; i += 45){
        strokeWeight(1);
        line(40, 40, centerX + cos(i) * (radius + 5), centerY + sin(i) * (radius + 5));
    }
    
}

For this project, I wanted to make the wallpaper fun and cute (as always). I thought food that’s partially bitten is very cute. I thought of lollipops, popsicles, donuts, and finally decided to go with pizza because I really wanted to have pizza. I tried creating my own function for the pizza pattern. Then I used for loop to repeat the pattern. I was actually amazed at how easily I could create only one single for loop and put the function inside rather than writing multiple loops for each element.