Category: SectionA

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.

Project-05

I started with some shapes and it turned into something pretty cool.

Project-05
//Luke Mattson
//section A





function setup(){
	createCanvas(600, 600);
    background(224, 201, 166)
}


function draw() {
    //drawing the hexagons
   for (x = 40; x < 600; x += 87) {
        for (y = 55; y < 600; y+=160) {
            hexagon(x,y,30)
            hexagon(x,y,40)
        }
    }
    for (x = -5; x < 700; x += 87) {
        for (y = -25; y < 700; y+=160) {
            hexagon(x,y,30)
            hexagon(x,y,40)
        }
    }

    //drawing the triangles in between the hexagons
    for (x = -3.5; x < 700; x += 87) {
        for (y = 53; y < 700; y+=160) {
            trianglePair(x,y)
        }
    }
    for (x = 39; x < 700; x += 87) {
        for (y = -27; y < 700; y+=160) {
            trianglePair(x,y)
        }
    }

    //drawing pumkins inside the hexagons
    for (x = 41; x < 700; x += 87) {
        for (y = 57; y < 700; y+=160) {
            pumpkin(x,y)
        }
    }
    for (x = -5; x < 700; x += 87) {
        for (y = 137; y < 700; y+=160) {
            pumpkin(x,y)
        }
    }
    noLoop()
}

function hexagon(x,y,s) {
    stroke(210,83,73)
    strokeWeight(.5)
    noFill()
    beginShape()
    vertex(x+s,y)
    vertex(x+s/2,y+s*sqrt(3)/2)
    vertex(x-s/2,y+s*sqrt(3)/2)
    vertex(x-s,y)
    vertex(x-s/2,y-s*sqrt(3)/2)
    vertex(x+s/2,y-s*sqrt(3)/2)
    endShape(CLOSE)
}

function trianglePair(x,y) {
    fill(210,83,73)
    triangle(x,y,x-23,y-40,x+23,y-40)
    triangle(x,y+4,x-23,y+44,x+23,y+44)
}

function pumpkin(x,y) {
  pHeight = 30
  pWidth = 40 

  //stem
  strokeWeight(2)
  stroke(0, 150, 0);
  line(x, y-pHeight/2, x-pWidth/4, y - pHeight*.75);
 
  //pumpkin
  strokeWeight(1);
  fill(230, 100, 0);
  stroke(120, 60, 0);
  ellipse(x,y, pWidth, pHeight);
  ellipse(x,y, pWidth*.75, pHeight);
  ellipse(x,y, pWidth*.5, pHeight);
  ellipse(x,y, pWidth*.25, pHeight);
}

LO-05

Ramen by Laura Keuk


I chose to look at Laura Keuk’s 3D art piece which is called “Ramen.” Laura Keuk used shading and lighting to create a dreamy and peaceful atmosphere. She used Blender’s cloth simulation for the noodles, doing one noodle and then duplicating it. We can tie this into for loops, which we are learning about, but at a much more intricate and detailed scale. I admire this because I really enjoy food, and as a college student I eat a lot of ramen. I think it is interesting that the author decided to make art work revolving around food because she believes food is what brings people together.

Laura Keuk’s artwork titled “ramen”

Week 4: String Art Project

sketch
//Brandon Yi
//btyi
//Section A
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 25;

function setup() {
    createCanvas(300, 400);
    background(200);
    line(10,10,10,390);
    line(10,390,290,390);
    line(10,10,290,10);
    line(290,10,290,390);
    dx = (290-10)/numLines; //setting x increments
    dy = (390-10)/numLines; //setting y increments
}

function draw() {
    //setting moveable points for increments
    var x1 = 290;
    var y1 = 390;
    var x2 = 10;
    var y2 = 10;
    var x3 = 10;
    var y3 = 10;
    
    for (var i = 0; i <= numLines; i += 1) {
        line(10, 10, x1, y1);
        x1 -= dx;
        line(290,390,x2,y2);
        y2 += dy;
        line(290,10,x3,y3);
        x3 += dx;
        y3 += dy;

    }
    noLoop();
}

I had a little bit of trouble working around the diagonal piece of my artwork. I think at first I struggled a little bit to understand my own code, but after solidifying the idea that dx and dy are the increments, it made sense that I would need to use them in my code for the diagonal piece.

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.

Project-04

sketch
//Nami Numoto
//mnumoto
//Section A


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var r = 0; //red
var g = 0; //green
var b = 0; //blue

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    var r = random(0,255);
    var g = random(0,255);
    var b = random(0,255);

    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines; //shape 1 (given)

    ex1 = 2 * (150-50)/numLines;
    ey1 = 2 * (300-50)/numLines;
    ex2 = 2 * (350-300)/numLines;
    ey2 = 2 * (100-300)/numLines; //shape 2

    fx1 = 4 * (150-50)/numLines;
    fy1 = 4 * (300-50)/numLines;
    fx2 = 4 * (350-300)/numLines;
    fy2 = 4 * (100-300)/numLines; //shape 3
}

function draw() {
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    stroke(r, 0, 0); //set the stroke colour to some shade of red
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke(0, g, 0); //set the stroke colour to some shade of green
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ex1;
        y1 += ey1;
        x2 += ex2;
        y2 += ey2;
    }
    stroke(0, 0, b); //set the stroke colour to some shade of blue
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += fx1;
        y1 += fy1;
        x2 += fx2;
        y2 += fy2;
    }
    noLoop();
}

I’m not sure why it’s showing up the way it is – baseline, I struggled a lot with this project (mostly technically).

The idea was to make a fractal of sorts by squaring (hence the doubling and quadrupling) the original shape. I also intended to make each segment a different shade of red, blue, and green, infinitely.

Any suggestions? I was going to do a loop, but I was running low on time so I simply did it manually three times.

LO-04

I looked into the FORMS String Quartet. As someone who is very much inspired by and interested in music, I’ve always looked for ways to combine visual art with music, beyond just the performative nature of music. Their website states that they make use of a spectral synthesis algorithm; to my understanding, the algorithm models speech, music, and other sounds by combining multiple sine wave harmonics. I believe Playmodes and the FORMS String Quartet create a perfect fusion between music and visual art, as well as digital and acoustic media, and in a way, it reminds me of the condition synesthesia, in which affected individuals associate sounds, visuals, and other input with colours.

FORMS – String Quartet

LO-04

FORMS – STRING QUARTET


I chose to discuss the project FORMS – String Quartet. Created by Playmodes, ‘FORMS – String Quartet’ is a live multimedia performance for a string quartet, electronic music and panoramic visuals, in the field of visual sonification. The project originates from a real-time visual music score generator created by Playmodes, that is designed with a set of rules using graphic generation, driven by randomness and probability. The algorithm takes the resulting graphics which are transformed into sound using spectral synthesis algorithms. I think this project is very interesting due to the fact that my sister played in many string quartets as a violinist.

An example of a string quartet