Jen – Page 2 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 04: String Art


var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 30;
var numLines2 = 40;
var numLines3 = 50;
var numLines4 = 60;

function setup() {
    createCanvas(400, 300);
    background(179,212,177);
    
    line(100, 50, 150, 250);
    dx1 = (150-75)/numLines;
    dy1 = (70-50)/numLines;
    dx2 = (250-150)/numLines;
    dy2 = (300-250)/numLines;
    
    line(400,0,400,300);
    dx3 = (400-0)/numLines2;
    dy3 = (0-300)/numLines2;
    dx4 = (400-400)/numLines2;
    dy4 = (300-0)/numLines2;
    
    line(100, 50, 50, 125); 
    dx5 = (100-50)/numLines3;
    dy5 = (125-50)/numLines3;
    dx6 = (350-300)/numLines3;
    dy6 = (200-25)/numLines3;
    
    //line(50, 50, 50, 150); 
    line(400, 100, 400, 300); 
    dx7 = (400-50)/numLines4;
    dy7 = 50/numLines4;
    dx8 = (400-50)/numLines4;
    dy8 = (300-150)/numLines4;

}

function draw() {
    
    //yellow sunlight ray from upper right hand corner
    var x3 = 375; 
    var y3 = 15;
    var x4 = 0;
    var y4 = 130;
    for (var a = 0; a <= numLines2; a += 1) {
        stroke(255,255,102);
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    
    //green twisty shape that aligns with orange ray
    var x7 = 150;
    var y7 = 250;
    var x8 = 250;
    var y8 = 200;
    for (var c = 0; c <= numLines4; c += 2) {
        stroke(51,102,0);
        line(x7, y7, x8, y8);
        x7 -= dx7;
        y7 -= dy7;
        x8 += dx8;
        y8 += dy8;
    }
    
        //blue "parallelogram" shaped solar panel
    var x1 = 100; 
    var y1 = 50;
    var x2 = 150;
    var y2 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(0, random(90, 105), random(195, 210));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 -= dy2;
    }
    
        //orange ray from upper right left corner
    var x5 = 0;
    var y5 = 0;
    var x6 = 500;
    var y6 = 150;
    for (var b = 0; b <= numLines3; b += 1) {
        stroke(255,153,51);
        line(x5, y5, x6, y6);
        x5 -= dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    noLoop();
}

I knew that the string “rays” reminded me of sunlight and spotlights, so from there I wanted to add in something (the panel) that would make sense. Given that a lot of solar panels are just above grass, I made the background light green and put a dark green string element just below it.

Looking Outwards 04: Sound Art

Project Title: Music For Robots

Year of Creation: 2014

Artists: Squarepusher x Z-Machines

The robots collaborate to create experimental electronica.

I admire how the robots in this project can together create such exciting and layered music because it’s wildly entertaining despite sounding admittedly quite choppy. I admire the rigid precision of the performances because although such precision is impossible for humans to obtain, it reminds me of what robots in this artwork can’t really obtain, portray or evoke: emotional response. I’m inspired by the innovation and attention to detail, but I must say that the music didn’t leave me feeling a certain way, which in my opinion, music should do. Of course, I don’t think the primary purpose of this endeavor was to make music specifically for people to enjoy. I know that the creators used “custom build mechanics” and Max MSP patches, which lets you connect software and objects with virtual patch cords. Squarepusher’s music interests include electronic, jazz and drum and bass. These artistic sensibilities manifested in the ASHURA (the robot drummer that plays over 20 drums). I could hear how the creator included some free jazz elements into the overall technical electronic experience.

Project 03: Dynamic Drawing

jen project 03 sketch copy


var minSize = 0.6;
var maxSize = 3;


function setup() {
    createCanvas(450, 600);
    strokeWeight(10);
}

function draw() {
    if (mouseX < width/2 & mouseY < height/2) {
        background(23,48,107);
    } else if (mouseX < width/2 & mouseY > height/2) { 
        background(204,102,0);
    }  else if (mouseX > width/2 & mouseY < height/2) {
        background(153,204,255);
    }  else {
        background (255,204,255);
  }
    //main circle
    fill(255);
       stroke(51,102,0);
       circle(225,300, mouseX, mouseY);
    
    //green line  
       stroke(23,112,44);
       line(225, 300, mouseX, mouseY);
    
    //light green line
       stroke(154,185,158);
       var mx = map(mouseX, 0, width, 60, 180);
       line(225, 300, mx, mouseY); 
    
    //orange circle
     if (mouseX < 225 & mouseY > 300) { 
       fill(255,178,102);
       ellipse(mouseX, mouseY, 50, 50);
        
    //blue circle and rotating blue circles    
     } else if (mouseX > 225 & mouseY < 300) {
       fill(178,202,243);
       ellipse(mouseX, mouseY, 50, 50);
       push();
       translate(337.5,150);
       rotate(radians(mouseY)); 
       ellipse(-50,50,40,40);
       ellipse(-50,-50,40,40);
       ellipse(50,50,40,40); 
       ellipse(50,-50,40,40);
       pop();

    //light purple circle and sheer circles
     } else if (mouseX > 225 & mouseY > 300) {
       fill(146,98,178);
       ellipse(mouseX, mouseY, 50, 50);
       fill(255,150);
       ellipse(mouseX, height/2, mouseY, mouseY);
       fill(255,150);
       ellipse(width - mouseX, height/2, height - mouseY, height - mouseY);
   }
     
    //dark blue circle and scattering white dots 
       else { 
       for (let y = 0; y < 100; y++) {
       randomSize = random(minSize, maxSize);
       randomX = random(width);
       randomY = random(height);
       fill(0,76,153);
       stroke(154,185,158);
       ellipse(mouseX, mouseY, 50, 50);
       noStroke();
       fill(255);
       ellipse(randomX, randomY, randomSize, randomSize);
    }  
  }
}

I wanted to create a sort of clock through the white circle and green clock hands that lengthened or shortened depending on the mouse. The upper left quadrant has a busy background to represent how that time period (9am- 12pm) is when my schedule usually feels the most hectic. Admittedly the other quadrants are a bit more random, but I definitely wanted to try out the push and pop functions we recently learned, so I incorporated these with the rotating light blue circles.

Looking Outwards 03: Computational Fabrication

Project Title: Wooden Carpet

Year of Creation: 2009

Artists: Elisa Strozyk

The wood pieces are just substantial enough such that the flexible carpet is able to prop itself up.

The project is a wooden textile carpet. I admire how the veneer pieces are assorted in color (light to medium brown) because this adds to the rendering’s depth, and makes the artwork look especially fascinating when contorted and crinkled. I also admire how it combines two of the most common floor coverings as this has me questioning other familiar materials and imagining how these can be hybridized with each other. A critique might be that the artwork would be even more interesting to observe if the pieces used on a single carpet were varying shapes instead of all triangles. The geometric shapes were generated by an algorithm unknown to myself, and then realized in wood-veneer through laser cutter machinery. The creator then bonded the pieces onto fabric. Strozyk’s artistic sensibilities include viewing substances in different ways than they are normally viewed and the “possibility of surprising elements.” The final form transforms wood to appear and be malleable as it can bend and maintain a unique shape unlike a typical carpet rug or wood floor, encouraging the audience to rethink our assumptions about the resources we use and expand our creative bounds.

Project 02: Variable Faces

jen project 02 sketch copy

//Jennifer Kim
//Class section: C

var eyeSize = 40;
var Type = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var faceWidth = 275;
var pupilWidth = 40;
var pupilHeight = 30;
var faceHeight = 250;
var faceColorA = 0;
var faceColorB = 255;
var faceColor = 2;
var hairclipStyle = 0;

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(229,204,255);
    
    //hair
    fill(51,25,0);
    arc(240, 340, 300, 380, QUARTER_PI + HALF_PI, QUARTER_PI, OPEN);

    
    //face
    if (faceColor>1) {
       fill(255,229,204);
   } else if (faceColor<=1) {
       fill(241,200,124);
   }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes 
    fill(255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //pupils
    fill(153,76,0);
    ellipse(width/2-50,height/2,pupilWidth-15,pupilHeight-15);
    ellipse(width/2+50,height/2,pupilWidth-15,pupilHeight-15);
    
    //circle nose
    fill(241,194,125);
    ellipse(width/2,height/2+30,15,15);

    //straight mouth
    if (Type <= 1.25){ 
    fill(255,213,255);
    rect(width/2-25, height/2+60,50,5);
    
    //triangle nose
    } else if (Type <= 2.5){ 
    fill(241,194,125); 
    triangle(width/2 - 15, height/2 + 40, width/2 + 15, height/2 + 40, width/2, height/2);
    }
    
    //hair accessories
    if (hairclipStyle <= 0.8){ 
        fill(76,0,153);
        circle(width/3, height/3, 60); 
        circle(width - (width/3), height/3, 60);
        
    } else { //attempt at using curve vertex
        fill(76,0,153);
        beginShape(); 
        curveVertex(310, 280);
        curveVertex(350, 300);
        curveVertex(390, 250);
        curveVertex(290, 210);
        curveVertex(270, 310);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(220, 230);
    faceHeight = random(240, 250);
    eyeSize = random(30, 40);
    Type = random(0,3);
    pupilWidth=random(30,35);
    pupilHeight=random(30,35);
    faceColorA = random(30, 150);
    faceColorB = random(70,200);
    hairclipStyle = random(0, 3);
}

Figuring out how to shape and position with the curveVertex() was tricky, but I was eventually able to create what I was going for. It was also interesting to put my new knowledge from lecture about if/else statements to use.

Looking Outwards 02: Generative Art

Project Title: Ten Thousand Cents

Year of Creation: 2008

Artists: Aaron Koblin and Takashi Kawashima

Ten thousand individual digital paintings were collected and arranged to create an image of the one hundred dollar bill.

Koblin’s artistic sensibilities manifest in the algorithm or more so through the resources used, such as Mechanical Turk; many of Koblin’s projects depend on collective effort, so it makes sense that the tech used works with/is for community driven stories. I admire how the project represents that despite being separated, people are able to stay connected through technology and work together to build something. This message inspires me because it makes me feel a bit less dissociated from the rest of the world. I admire how when looking at each individual part, it’s hard to understand what’s occurring or what the goal is, but when you view the bigger picture it is very clear. I find this admirable because it reminds me to step back and look for the real reasons behind why I do what I do in my everyday life. I know that the work was generated using a “custom drawing tool.” The interfaces were done with Flash and they also used Processing. As likely intended by the creators, the project suggests the possibilities for telling meaningful stories through interfaces, especially as we collect more personally relevant data.

Project 1: My Self Portrait

jen-sketch copy

function setup() {
    createCanvas(400,400);
    background(102,102,255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  
  //tennis ball//
  fill(174,228,95);
  circle(70,50,150,150);
  fill(174,228,95);
  arc(99,0,120,90,QUARTER_PI,PI);
  arc(40,118,120,100,PI+QUARTER_PI,TWO_PI);
  
  //hair//
  fill(92,55,17);
  triangle(150,0,200,500,30,300);
  fill(87,44,1);
  triangle(250,0,500,230,200,200);
  fill(51,25,0);
  triangle(150, 0, 500, 300, 70, 400);
  fill(51,25,0);
  rect(150,0,150,200);
  fill(87,44,1);
  triangle(300,150,500,400,250,400);
  
  //neck//
  fill(249,210,171);
  quad(160, 300, 240, 310, 210, 350, 170, 365);
  fill(255,215,187);
  quad(230, 310, 280, 280, 250, 340, 210, 355);
  fill(255,215,187);
  quad(165, 350, 240, 340, 210, 380, 175, 395);
  fill(249,210,171);
  quad(230, 330, 280, 320, 250, 360, 210, 375);
  fill(255,215,187);
  quad(190, 375, 240, 365, 210, 405, 170, 420);
  fill(249,210,171);
  quad(270, 330, 300, 400, 210, 400, 210, 385);
  
  //face//
  fill(255,229,204);
  triangle(150,30,250,40,300,100);
  fill(243,229,215);
  triangle(150,30,210,58,140,80);
  fill(247,217,187);
  triangle(210,57,300,100,140,80);
  fill(255,229,204);
  triangle(297,98,300,170,135,80);
  fill(247,217,187);
  triangle(135,80,145,140,200,113);
  fill(243,229,215);
  triangle(145,138,125,200,200,200);
  fill(247,217,187);
  triangle(145,138,200,112,200,200);
  fill(255,229,204);
  triangle(200,112,200,200,300,170);
  fill(247,217,187);
  triangle(200,200,300,170,260,250);
  fill(243,229,215);
  triangle(300,170,260,250,288,250);
  fill(247,217,187);
  triangle(140,300,125,198,195,250);
  fill(255,229,204);
  triangle(125,198,200,200,195,250);
  fill(255,229,204);
  triangle(288,250,260,250,275,290);
  fill(243,229,215);
  triangle(260,250,200,200,195,250);
  fill(255,229,204);
  triangle(195,250,140,300,198,320);
  fill(247,217,187);
  triangle(195,250,271,287,198,320);
  fill(247,217,187);
  triangle(195,250,260,250,273,288);
  fill(243,229,215);
  triangle(279,280,195,320,263,315);
  
  //eyebrows//
  fill(75,41,6);
  triangle(220,110,280,100,290,110);
  fill(75,41,6);
  triangle(140,105,170,95,190,105);
  
  //nose//
  fill(255,235,213);
  triangle(195,180,185,210,205,200);
  fill(235,196,158);
  triangle(205,200,185,210,205,210);

  //eyes//
  fill(255);
  triangle(165,140,180,125,140,145);
  fill(255);
  triangle(165,140,180,150,140,145);
  fill(102,51,0);
  triangle(180,126,190,140,165,140);
  fill(102,51,0);
  triangle(181,150,190,140,165,140);
  fill(255);
  square(230,127,23);
  fill(102,51,0);
  triangle(240,135,250,127,275,143);
  fill(102,51,0);
  triangle(240,135,255,150,280,143);
  fill(5);
  triangle(250,126,275,145,285,144);
  stroke(246,102,255);
  strokeWeight(2);
  line(252,127,285,144);
  line(175,128,140,144);
  noLoop();

  //necklace//
  fill(255,204,255);
  ellipse(279, 372, 15, 10);
  fill(255,204, 255);
  ellipse(267, 378, 15, 10);
  fill(255,204,255);
  ellipse(255, 384, 15, 10);
  fill(255,204,255);
  ellipse(243, 390, 15, 10);
  fill(255,204,255);
  ellipse(231, 396, 15, 10);
  
  //necklace stone//
  beginShape(TRIANGLE_STRIP);
  fill(255,0,255);
  vertex(205,405);
  vertex(205,395);
  vertex(205,405);
  vertex(215,395);
  vertex(225,405);
  vertex(225,395);
  vertex(225,405);
  endShape();
  
  //lips//
  stroke(247,153,175);
  strokeWeight(8);
  point(240,260);
  stroke(247,153,175);
  strokeWeight(8);
  point(233,258);
  stroke(247,153,175);
  strokeWeight(8);
  point(225,256);
  stroke(247,153,175);
  strokeWeight(8);
  point(220,258);
  stroke(247,153,175);
  strokeWeight(8);
  point(213,260);
  stroke(247,153,175);
  strokeWeight(8);
  point(206,262);
  stroke(247,153,175);
  strokeWeight(8);
  point(199,260);
  stroke(247,153,175);
  strokeWeight(8);
  point(192,263);
  stroke(247,153,175);
  strokeWeight(8);
  point(195,270);
  stroke(247,153,175);
  strokeWeight(8);
  point(201,272);
  stroke(247,153,175);
  strokeWeight(8);
  point(208,273);
  stroke(247,153,175);
  strokeWeight(8);
  point(215,274);
  stroke(247,153,175);
  strokeWeight(8);
  point(222,273);
  stroke(247,153,175);
  strokeWeight(8);
  point(229,271);
  stroke(247,153,175);
  strokeWeight(8);
  point(236,269);
  stroke(247,153,175);
  strokeWeight(8);
  point(242,267);
  stroke(247,153,175);
  strokeWeight(8);
  point(246,263);
  stroke(199,105,127);
  strokeWeight(7);
  point(195,266);
  stroke(199,105,127);
  strokeWeight(7);
  point(201,268);
  stroke(199,105,127);
  strokeWeight(7);
  point(207,268);
  stroke(199,105,127);
  strokeWeight(7);
  point(213,268);
  stroke(199,105,127);
  strokeWeight(7);
  point(219,268);
  stroke(199,105,127);
  strokeWeight(7);
  point(225,267);
  stroke(199,105,127);
  strokeWeight(7);
  point(231,266);
  stroke(199,105,127);
  strokeWeight(7);
  point(237,265);
  stroke(255,198,211);
  strokeWeight(7);
  point(229,262);
  stroke(255,198,211);
  strokeWeight(7);
  point(224,262);
  stroke(255,198,211);
  strokeWeight(7);
  point(218,263);
  stroke(255,198,211);
  strokeWeight(7);
  point(212,264);
  stroke(255,198,211);
  strokeWeight(7);
  point(207,264);
  stroke(255,198,211);
  strokeWeight(7);
  point(201,264);
  stroke(255,198,211);
  strokeWeight(7);
  point(232,261);
}

LO: My Inspiration

Project Title: Angle Jungle

What I admire about the project is how it provides a different approach to teaching geometric concepts, because it is clearly important to support that students learn in various ways. I admire how the project makes using a protractor and adding angles fun; in the game, crystals are placed in certain positions such that the player needs to decide what angle or angles would get light to shine on the crystals. I admire how the project uses a treasure map and jungle theme with the setting/music as it really creates a feeling of adventure that I’d previously not associated with math. Having acquirable treasure raises the stakes, instilling a sense of purpose. A critique might be that there isn’t any penalty for testing all the gems, so players might be less inclined to think critically before acting. Five people were involved in making the project, and it took them about a semester to create it. The team was organized into designers, producers, a programmer and a game artist. As far as I know, the authors created the project using commercial software.

The project points to opportunities of combining education, entertainment and motivating components. While some thrive with just the use of textbooks and more traditional methods, others really benefit from interactive games and puzzles.

Link to the online source.

Supporting image: