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

Looking Outwards

Screenshot from Droning Like a Ur. The human forms have begun to merge with the flora of their world.

Droning Like a Ur, by Ian Cheng, is a live simulation with an infinite duration. Cheng works with a video game engine that continually generates new combinations which allow the simulations to evolve.

This means that his simulations make their own decisions based off of Cheng’s programming. These actions cannot be foreseen and are not completely predetermined. Cheng says that his live simulations are like video games that play themselves.

I love the way in which the creatures and environments in his work maintain ambiguous and strange shapes but are still recognizable. If characters maintain a mostly “human” appearance, we still identify them as such… even if they are unlike the humans in our world.

In the beginning of this video, there are strange, squishing sounds as well as a bug-like buzzing. Coupled with the imagery of bodies twisting around, these sounds created an uneasy tension. This is one of the features of Cheng’s work that I love. He generates worlds with depth and spirit. Art does not have to be lifelike to achieve this.

While I do admire this piece, I believe it could have been more effective if the dialogue in the video were less understandable and less recognizable as human. In my opinion, I feel like the voice contradicted with the unpredictability of Cheng’s simulations. It seemed too absolute, even though it was not fully comprehendible.

myoungsh looking outwards 1

I fell in love with a company this summer called CW&T they caught my attention with a pen they designed that totally blew my mind with its precision machining and how visually stunning it was. After seeing this first product I looked at their other stuff and found a project they did with some coding as well as engineering involved. Simply it is a counter, a button and a display that records all the button presses up to 999,999 and then it stops. Each individual element of the construction is rated to last the perfect amount of time, as well as the code having a self destruct function set to run after 999,999 presses.

Nothing Lasts Forever

Looking Outward – Placeholder

Post

aerubin-Looking Outwards-01

Imaging Systems Lab, Rochester Institute of Technology, Summer 2015
Yiquin Cui and Kevin Farnand

One of the most notable projects I have had the pleasure to see developed was a 3D camera created by Raspberry Pi’s. The project’s goal was to open up new possibilities of the Raspberry Pi and make the first “DIY” or “do it yourself” 3D camera. The group was composed of three Rochester Institute of Technology students and two high school interns. They had six weeks to make a 3D camera out of two Raspberry Pi’s, Lenses, Wires, and write their own code. Utilizing a combination of JavaScript and Python, they were able to create the software that controlled the commercial hardware.

Inspired by the numerous “DIY” projects that have been created utilizing the Raspberry Pi, they were determined to find a low-cost and simple solution to create a camera that, when viewed with 3D glasses, would produce an image that contains depth. I really admire how determined their team was, and how they overcame all the challenges and roadblocks that crossed their path. It still amazes me how accessible technology is with coding knowledge and how there are still ideas out there that have not yet been created.

http://cui-ritcis.blogspot.com/?view=sidebar

cchau1 – Project01 – Face

cwchau face

function setup() {
  createCanvas(500,500);
  angleMode(RADIANS);
}
function draw(){
  background(201,227,255);

//bunny ears!!
  noStroke()
  ellipseMode(RADIUS);
  fill(255);
  ellipse(320,100,40,95);

  ellipseMode(CENTER);
  fill(255,225,242);
  ellipse(320,100,45,110);

  ellipseMode(RADIUS);
  fill(255);
  ellipse(180,100,40,95);

  ellipseMode(CENTER);
  fill(255,225,242);
  ellipse(180,100,45,110);

//behind head
  fill(39,3,0)
  ellipse(250,300,280,340)

//neck
    noStroke()
    fill(253,215,189);
    rect(220,350,60,60);

//face
    noStroke()
    fill(255,230,204);
    ellipse(250,250, 210, 230);

//hair
  push()
  rotate(PI/-6)
  fill(39,3,0)
  ellipse(100,270,175,100)
  pop()

  push()
  fill(39,3,0);
  rotate(PI/-8)
  arc(140,245,190,150,0, HALF_PI + HALF_PI);
  pop()

  push()
  fill(39,3,0)
  rotate(PI/-9)
  ellipse(240,330,35,150)
  pop()

//mouth
  fill(0)
  rect(235,320,28,4)

//shirt
  fill(225,189,255)
  ellipse(250,490,180,230)

//blush
  fill(255,204,222)
  ellipse(185,290,20,10)

  fill(255,204,222)
  ellipse(310,290,20,10)

//eyes
  noStroke()
  fill(39,3,0)
  ellipse(195,270,25,18)

  noStroke()
  fill(39,3,0)
  ellipse(300,270,25,18)

//eyebrows
  push();
  noStroke()
  fill(39,3,0)
  translate(width/2, height/2);
  rotate(PI/1.25);
  rect(-45,-30,24,5);
  pop();

  push();
  noStroke()
  fill(39,3,0)
  translate(width/2, height/2);
  rotate(PI/4.75);
  rect(-50,30,24,5);
  pop();

//flower
  translate(330,200)
  noStroke()
    for (var i = 0; i < 10; i ++) {
      fill(255,204,222);
      ellipse(0, 10, 20, 60);
      rotate(PI/5);
}

noLoop();
  }

This is one of the first projects I’ve worked on in p5.js and I discovered that it is time-consuming to try and figure out the position of every shape on the canvas. I hope that I can learn, understand, and become more familiar with how to translate/rotate/position shapes so the entire process will be more efficient. I don’t have rabbit ears in real life (would be cool though) but I typically draw myself with rabbits ears anyway. I am feeling determined in this self-portrait.

sketch

function setup() {
    createCanvas(300, 300);
    background(200, 100, 100);
    text("p5.js vers 0.5.12 test.", 10, 15);
    fill(200);
    noStroke();
    ellipse(150, 150, 100, 70);
    text("This is adorable omg", 50, 50);
}

function draw() {
}

sophia qin sketch

sketch

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

function draw() {
    noStroke();
    fill(0,0,255);
    ellipse(100,100,100,70);
}

Project Week 1 – Vivek Rao

vivekrao

function setup(){
	createCanvas(300,300);
	background(240);
}
function draw(){
	var radius = 1/3*width; 
	fill("lightblue");
	noStroke();
	ellipse(width/2, height/2, radius, radius)
}

brandon sketch.js

project 1 brandon sketch

function setup() {
    createCanvas(300, 300);
    background(200,250,200);
    noStroke();
    fill(322);
    ellipse (150,150,100,70);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
}

Project 1 Jonathan Perez

sketch

function setup() {
    createCanvas(600, 600);
    background(164, 230, 239);

//background texture
    //corner squares
    stroke(255);
    fill(164, 230, 239);
    rect(0, 0, 120, 120);
    rect(width - 120, 0, 120, 120);
    rect(width - 120, height - 120, 120, 120);
    rect(0, height - 120, 120, 120);

    //grid around head
    rect(width/2 - 120, height/2 - 120, 240, 240);
    line(0, height/2 - 120, 600, height/2 - 120);
    line(0, height/2 + 120, 600, height/2 + 120);
    line(width/2 - 120, 0, width/2 - 120, 600);
    line(width/2 + 120, 0, width/2 + 120, 600);

    //Triangle strips
    beginShape(TRIANGLE_STRIP); //upper
    vertex(width/2 - 120, 0);
    vertex(width/2 - 100, height/2 - 120);
    vertex(width/2 - 80, 0);
    vertex(width/2 - 60, height/2 - 120);
    vertex(width/2 - 40, 0);
    vertex(width/2 - 20, height/2 - 120);
    vertex(width/2, 0);
    vertex(width/2 + 20, height/2 - 120);
    vertex(width/2 + 40, 0);
    vertex(width/2 + 60, height/2 - 120);
    vertex(width/2 + 80, 0);
    vertex(width/2 + 100, height/2 - 120);
    vertex(width/2 + 120, 0);
    endShape();

    beginShape(TRIANGLE_STRIP); //right
    vertex(600, height/2 - 120);
    vertex(width/2 + 120, height/2 - 100);
    vertex(600, height/2 - 80);
    vertex(width/2 + 120, height/2 - 60);
    vertex(600, height/2 - 40);
    vertex(width/2 + 120, height/2 - 20);
    vertex(600, height/2 - 0);
    vertex(width/2 + 120, height/2 + 20);
    vertex(600, height/2 + 40);
    vertex(width/2 + 120, height/2 + 60);
    vertex(600, height/2 + 80);
    vertex(width/2 + 120, height/2 + 100);
    vertex(600, height/2 + 120);
    endShape();

    //bottom
    beginShape(TRIANGLE_STRIP);
    vertex(width/2 - 120, 600);
    vertex(width/2 - 100, height/2 + 120);
    vertex(width/2 - 80, 600);
    vertex(width/2 - 60, height/2 + 120);
    vertex(width/2 - 40, 600);
    vertex(width/2 - 20, height/2 + 120);
    vertex(width/2, 600);
    vertex(width/2 + 20, height/2 + 120);
    vertex(width/2 + 40, 600);
    vertex(width/2 + 60, height/2 + 120);
    vertex(width/2 + 80, 600);
    vertex(width/2 + 100, height/2 + 120);
    vertex(width/2 + 120, 600);
    endShape();

    beginShape(TRIANGLE_STRIP); //left
    vertex(0, height/2 - 120);
    vertex(width/2 -120, height/2 - 100);
    vertex(0, height/2 - 80);
    vertex(width/2 -120, height/2 - 60);
    vertex(0, height/2 - 40);
    vertex(width/2 -120, height/2 - 20);
    vertex(0, height/2 - 0);
    vertex(width/2 -120, height/2 + 20);
    vertex(0, height/2 + 40);
    vertex(width/2 -120, height/2 + 60);
    vertex(0, height/2 + 80);
    vertex(width/2 -120, height/2 + 100);
    vertex(0, height/2 + 120);
    endShape();


    //triangles
    /*stroke(255);
    fill(164, 230, 239);
    beginShape(TRIANGLE_STRIP);
    vertex(0, 0);
    vertex(100, 100);
    vertex(200, 0);
    vertex(300, 300);
    vertex(400, 0);
    vertex(500, 500);
    vertex(600, 0);
    vertex(600, 600);
    endShape();*/

    //beginShape() // square around head
}

function draw() {
    
    //hair section (underneath head graphic)
    stroke(0)
    fill(210);
    quad(297, 280, 377, 280, 357, 350, 307, 385); // hair grey section
    fill(0);
    rect(232, 206, 10, 20);

    //head
    stroke(0)
    fill(255, 220, 200);
    ellipse(267, 310, 130, 200);

    //hair (over head graphic)
    noStroke();
     fill(210);
    rect(297, 290, 50, 20); // grey section
    triangle(297, 310, 307, 310, 297, 330); // sideburns
    fill(0);
    quad(237, 205, 367, 220, 417, 295, 287, 290); //top black section

    //face details
    fill(255, 220, 200);
    ellipse(327, 320, 32, 52); //ear
    stroke(0)
    arc(327, 320, 32, 52, 5*PI/4, PI/2); //partial ear outline
    strokeWeight(2);
    line(237, 360, 211, 360); //mouth horizontal
    arc(247, 360, 20, 20, 4*PI/6, 8*PI/6); // mouth side
    fill(0)
    ellipse(random(-3, 3) + 242, random(-3, 3) + 290, 20, 20); //crazy eye
    noStroke()
    fill(254, 118, 145);
    ellipse(267, 330, 30, 30); //cheek blush

//coffee mugs
    //top left
    stroke(0);
    fill(255);
    ellipse(75, 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(75, 60, 30, 30); //cut-out handle
    fill(255);
    rect(30, 30, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(55, 37, 40, 5); //coffee

    //top right
    stroke(0);
    fill(255);
    ellipse(width - 45, 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(width - 45, 60, 30, 30); //cut-out handle
    fill(255);
    rect(width - 90, 30, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(width - 65, 37, 40, 5); //coffee

    //bottom right
    stroke(0);
    fill(255);
    ellipse(width - 45, height - 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(width - 45, height - 60, 30, 30); //cut-out handle
    fill(255);
    rect(width - 90, height - 90, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(width - 65, height - 83, 40, 5); //coffee

    //bottom left
    stroke(0);
    fill(255);
    ellipse(75, height - 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(75, height - 60, 30, 30); //cut-out handle
    fill(255);
    rect(30, height - 90, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(55, height - 83, 40, 5); //coffee



}

I have to say, creating this self portrait was so much fun. With my limited knowledge of p5js, I was forced to experiment with a totally different art style than I am accustomed to. Despite this literally being constricting, I found it freeing.

I wanted to do something particular to coding – something I couldn’t do with normal pencil in paper – so I centered my piece around the vibrating eye. Coincidentally, the vibrating eye linked quite well to one of my life passions: coffee.

I think I’ll call this “Portrait of the Coffee as a Young Man”.