Author: Cody

LO6

Link of the project:
https://news.harvard.edu/gazette/story/2021/01/harvard-scientist-turns-space-images-into-music/
date:January 25, 2021
creators: researchers from Harvard University (names not specified)

This projects is called “music of the spheres” created by Harvard’s researchers. This project uses a technique called data sonification that takes the information captured from space telescopes and translates it into sound, which involves the computer to transform visual elements to waves that produce sounds. The mechanism of audio interpretation is about linking visual variables to audio variables. This involves a lot of randomness, since the process of assigning different visual elements with different musical elements can be very random. For example, linking brightness to volumes, distance to pitches. The creator’s artistic sensibilities are shown through the transcribing process from visual to audio.

LO5: 3D Computer Graphics

Link of the artwork:https://www.artstation.com/artwork/6aZZQO
The project Ramen is designed by 3D student Laura Keuk. The 3D picture shows a bowl of ramen with a dreamy and peaceful atmosphere. I really admire how the noodles and soup seems so real, as if it is an actual photo taken by a high quality camera. The egg and soup seem so delicious that it makes me hungry when I’m writing this near midnight. According to the website, Keuk imported elements on Zbrush to know where and how the different ingredients touch the soup. And keuk drew multiple layers for the soup, and I guess possibly for the other elements as well. These layers are making the image real. And Kuek also uses a lot random elements to make it real. Keuk successfully created the atmosphere and the image she want.

Project 5 Wall Paper

sketch
function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    noLoop();
}

var s = 5
var xstar = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var ystar = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
function draw() {
// background hexagons
    push()
    background(255)
    for(var x = 0; x <= 600; x += 15){
        for (var y = 0; y <= 600; y += 2*s*sqrt(3)/2){
            fill(random(100,160),random(200,220),random(220,255))
            hexagon(x,y)
            noLoop();
        }
    }
    for (var x = 7.5; x <= 600; x += 15){
        for (var y = s*sqrt(3)/2; y <= 600; y += 2*s*sqrt(3)/2){
            fill(random(100,160),random(150,200),random(150,255))
            hexagon(x,y)
        }
    }
// stars
    push()
    translate(random(0,100),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(100,200),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(200,300),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(300,400),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(400,500),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(500,600),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(0,100),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(100,200),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(200,300),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(300,400),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(400,500),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(40,200))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(500,600),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(40,200))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
//TEXT CMU SCHOOL OF MUSIC
    for (var x = 0; x <= 600; x += 150){
        for (var y = 50; y <= 600; y += 180){
            push()
            translate(x,y)
            rotate(radians(45))
            textSize(15);
            textStyle(ITALIC)
            stroke(0,0,128)
            strokeWeight(1.8)
            fill(0,0,128)
            text("CMU SCHOOL OF MUSIC",-50,-20)
            pop()
        }   
    }
//TEXT ELECTRONIC MUSIC
    for (var x = 0; x <= 800; x += 150){
        for (var y = 50; y <= 800; y += 175){
            push()
            translate(x,y)
            rotate(radians(45))
            textSize(15);
            textStyle(ITALIC)
            stroke(225,112,133)
            strokeWeight(1.8)
            fill(255, 182, 193)
            text("ELECTRONIC MUSIC",-30,-80)
            pop()
        }   
    }
    pop()
}

//self-defined function: hexagon
function hexagon(x,y){
    push();
    translate(x,y)
    noStroke();
    triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
    triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
    triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
    triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,s*sqrt(3)/2)
    pop();
}

I started the project by creating a background that consists of many small hexagons, I gave them random colors, but I decided on the general trend of the colors so they seem coherent. Then I drew stars appearing randomly in certain areas with random color(within a hue), random rotation, and random stroke and strokeWeight(within a range). Lastly, I drew the rotated pattern of the texts using for loops. Trying to keep them all rotated within the for loop was challenging for me.

Project4: String Art

string art
function setup() {
    createCanvas(300, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER)
}
function draw() {
    background(40,30,60);
    stroke(150, 160, 255);
    for (var x = 0; x <= 50; x += 1) {
        line(300, 50, 300/50 * x - 3, 0); //right upwards lines
    }
    for (var x = 20; x <= 80; x += 1) {
        line(300, 50, 300/40 * x, 400); //right downwards lines
    }
    for (var x = 0; x <= 30; x += 1) {
        line(0, 350, 300/60 * x, 0); //left upwards lines
    }
    for (var x = 0; x <= 30; x += 1) {
        line(0, 350, 300/30 * x, 400); //left downwards lines
    }

//spiraling lines (very short)
    var angle = 70
    var angle2 = 50
    var x = 30
    var y = 50
    translate(150,200) //origin = center
    push();
    for (y = 50; y <= 300; y += .7){
        rotate (radians(angle));
        stroke (180, 168, 218);
        line (30, y, x+2, y);
    }
    pop();
//spiraling lines (short)
    push();
    for (x = 30; x <= 400; x += .8){
        rotate (radians(angle2));
        stroke (190, 210, 240);
        line (x-25, x-40, x-40, 0.8*40);
    }
    pop();
//black hole in the middle
    push();
    stroke(30,10,70)
    strokeWeight(3)
    fill(0)
    circle(0,0,30) 
    pop();
}

I drew star trails with a black hole in the middle.

LO4

Link of the : https://vimeo.com/43213162
Author: i.m. klif
Title: Vector rescanning using MaxMSP
Year Created: 2012

The project is called Vector rescanning using MaxMSP. There is a machine where you can have motions inside which can be scanned: for example you can put your hands inside and have them moving. A camera would record your motion and send the signals to a synth, and thus will produce sounds according to the motion of the hands. I really admire how we can instantaneously convert motion into music, which is converting visual element to audio. This is amazing because it shows the possibility of how visual can link to audio even though they are usually considered as two totally different senses. I think the creator’s artistic sensibilities are shown through their improvisation on their gestures. Improvisation is an extremely important aspect of music. Performers tell us their interpretation of how the music flows and continues through their motions, so it is amazing that improvisation can be realized through this technology.

LO3

Link of the work:http://www.madlab.cc/reverberating-across-the-divide/
Link of the video: https://vimeo.com/75886159

REVERBERATING ACROSS THE DIVIDE is a project by CMU doctorate student Madeline Gannon, 2014. I admire the technology Reverb has that can design ready-to-print wearables around the body: Reverb uses techniques such as computer vision, digital design, and digital fabrication, which translates hand gestures into intricate geometry that can be immediately printed and worn on the body. I admire how delicate and beautiful the end-product is. The creator’s work is divided into 3D scanning, 3D modeling, and 3D printing. I think that the creator’s artistic sensibilities are presented the most in the 3D modeling process. The 3D modeling process is where real design takes place, it is more about how to transform a scanned 3D image into something that suits the customer the best and looking great aesthetically at the same time. The other components I believe, on the other hand, are mainly about the technology where the computing parts take place.

Project 3- Dynamic Drawing

I really like the text in my project

sketch
function setup() {
    createCanvas(600, 450);
    background(230, 230, 250);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER)
}
var xa = 300 //coordinates for rectangles a, b, and c
var ya = 225
var xb = 215
var yb = 140
var xc = 500
var yc = 425

function draw() {
    background(230, 230, 250);
    var m = max(min(mouseX, 600), 0); //constrain mouseX in canvas
    var size = dist(xa,ya,mouseX,mouseY) //size changes with distance between mouse and center
    var fillR = (dist(300,225,mouseX,mouseY)*0.3) //color changes with distance between mouse and center
    var fillG = (dist(300,225,mouseX,mouseY)*0.4)
    var fillB = (dist(300,225,mouseX,mouseY)*0.6)
    fill(fillR, fillG, fillB) //paint sqaure
    strokeWeight(5) 
    stroke(25, 25, 112)
    rect(xa,ya,size/1.5,size/1.5) //draws the rectangles
    rect(xb,yb,size/3,size/3) 
    rect(xc,yc,size/0.75,size/0.75) 

    push();
    translate(300,225) //move origin to center
    rotate(radians(mouseX)) //rotate according to position of mouseX
    ellipse(50,50,30,30) //draws the ellipses
    ellipse(-50,-50,30,30)
    ellipse(50,-50,30,30)
    ellipse(-50,50,30,30)
    ellipse(100,100,30,30)
    ellipse(-100,-100,30,30)
    ellipse(100,-100,30,30)
    ellipse(-100,100,30,30)
    ellipse(100,0,30,30)
    ellipse(-100,0,30,30)
    ellipse(0,100,30,30)
    ellipse(0,-100,30,30)
    ellipse(150,150,30,30)
    ellipse(-150,-150,30,30)
    ellipse(150,-150,30,30)
    ellipse(-150,150,30,30)
    ellipse(150,0,30,30)
    ellipse(-150,0,30,30)
    ellipse(0,150,30,30)
    ellipse(0,-150,30,30)
    pop();

    fill(255) //writes the text in black
    text("): This project is so hard  :( SOS", mouseX, mouseY)

}

LO2: generative arts

Artwork by Nervous System: ZOETROPES

Zotropes is a 3D-printing project that prints a series of kinetic sculptures that illustrate natural growth processes.
Link:https://n-e-r-v-o-u-s.com/projects/sets/zoetropes/
Video:https://vimeo.com/136939640

I really like how this project integrates art with technology(3D printing) and with nature. I feel like this is an interactive exploration between human, nature, and beauty. I don’t have knowledge regarding the 3D printing process, but what I know is that the project repeats again and again, which is representative of the looping feature that a program has. And I believe that it is a program of 3D drawing, and can be displayed on a webpage. With this program, 3D printing enables the real-life version of the program. The team learned well on how the natural growth processes happen. It is a model that corresponds well to what would happen in real-life. The team’s observation on nature, imitation of nature, understanding of nature are manifested in the program.

Project-02:Variable Face

cody.variable.face
function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var faceWidth=400
var faceHeight=470
var noseCenter=300
var mouthAngle=0

function draw() {
    background(176, 196, 222);
    ellipse((width/2),(height/2), 400,470);  
    arc((width/2),(height/2+40),410,550,3.14,0) //hair
    arc((width/2),(height/2+40),400,540,3.14,0)
    arc((width/2),(height/2+40),390,530,3.14,0)
    arc((width/2),(height/2+40),390,520,3.14,0)   
    arc((width/2),(height/2+40),390,510,3.14,0)
    arc((width/2),(height/2+40),390,500,3.14,0)
    arc((width/2),(height/2+40),390,490,3.14,0)
    arc((width/2),(height/2+40),390,480,3.14,0)
    arc((width/2),(height/2+40),390,470,3.14,0)
    arc((width/2),(height/2+40),390,460,3.14,0)
    arc((width/2),(height/2+40),390,450,3.14,0)
    arc((width/2),(height/2+40),390,440,3.14,0) //hair line
    ellipse(225,220,80,45) //orbit left
    fill(0)
    ellipse((faceWidth/2+15),220,37,37) //eyeball left
    fill(255)
    ellipse(375,220,80,45) //orbit right
    fill(0)
    ellipse((faceWidth/2+170),220,37,37) //eyeball right
    fill(255,182,193)
    arc((width/2-10),380, 150, 100, (mouthAngle-0.5), (2.5+mouthAngle)) //mouth
    fill(255,192,203)
    triangle(300, 280, (noseCenter), 350, 320, (noseCenter+60)) //nose
    fill(255)
    stroke(72,209,204)
    strokeWeight(6)
    arc(225, 185, 80, 40, 3.2, -0.04) //eyebrow left
    arc(375,185, 80, 40, 3.2, -0.04) //eyebrow right
    arc(130, 280, 50, 60, 1.5, 4.75) //ear left
    arc(500, 280, 50, 60, 4.75, 1.65) //ear left
    
}

function mousePressed(){
    faceWidth=random(360,440)
    noseCenter=random (250,300)
    mouthAngle = random(0,1)
}
noLoop();

The part I like the most is how the eyeballs change randomly.

Project 1: My Self Portrait

Cody-portraitDownload
function setup() {
    createCanvas(600,600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(150,150,150);
    ellipse((width/2),(height/2), 400,500);
    ellipse(225,220,80,40) //orbit left
    fill(0)
    ellipse(225,220,37,37) //eyeball left
    fill(255)
    ellipse(375,220,80,40) //orbit right
    fill(0)
    ellipse(375,220,37,37) //eyeball right
    fill(255,0,0)
    arc((width/2), 420, 150, 100, 0, 3.14) //mouth
    fill(255,192,203)
    triangle(300, 280, 280, 350, 320, 350) //nose
    fill(255)
    stroke(0,0,150)
    strokeWeight(6)
    arc(225, 200, 80, 40, 3.2, -0.04) //eyebrow left
    arc(375, 200, 80, 40, 3.2, -0.04) //eyebrow right
    stroke(0)
    line(300, 50, 80, 300) //hair left
    line(300, 50, 80, 290)
    line(300, 50, 90, 280)
    line(300, 50, 90, 270)
    line(300, 50, 95, 260)
    line(300, 50, 95, 250)
    line(300, 50, 100, 240)
    line(300, 50, 100, 230)
    line(295, 50, 100, 220)
    line(290, 50, 100, 210)
    line(285, 50, 100, 200)
    line(280, 50, 100, 200)
    line(275, 50, 100, 190)
    line(270, 50, 100, 190)
    line(265, 51, 100, 180)
    line(260, 51, 100, 180)
    line(250, 53, 100, 175)
    line(240, 54, 100, 175)
    line(230, 55, 100, 175)
    line(300, 50, 520, 300) //hair right
    line(300, 50, 520, 290)
    line(300, 50, 510, 280)
    line(300, 50, 510, 270)
    line(300, 50, 505, 260)
    line(300, 50, 505, 250)
    line(300, 50, 500, 240)
    line(300, 50, 500, 230)
    line(305, 50, 500, 220)
    line(310, 50, 500, 210)
    line(315, 50, 500, 200)
    line(320, 50, 500, 200)
    line(325, 50, 500, 190)
    line(330, 50, 500, 190)
    line(335, 51, 500, 180)
    line(340, 51, 500, 180)
    line(350, 53, 500, 175)
    line(360, 54, 500, 175)
    line(370, 55, 500, 175)
    line(235,47,365,47) //hair middle
    line(233,49,368,49)
    line(231,51,369,51)
    line(230,53,370,53)
    line(237,45,363,45)
    arc(100, 310, 50, 60, 1.5, 4.75) //ear left
    arc(500, 310, 50, 60, 4.75, 1.65) //ear left

    noLoop();

}

Drawing my hair takes a long time because I have a unique hairstyle, but it’s been entertaining. I really enjoyed the process.