Author: Alexander

LO – 05 – Alexander Chen

In the 2009 James Cameron movie, Avatar, there was the issue of creating an alien species that was going to be realistic and relatable on an emotional point of view. Cameron stated that he wanted to not do the traditional way of make up and spot treatment. Instead he went on a route that used a lot of 3D computer graphics. He set up a rig that would have sensors all around (which is pretty ordinary). However, he ended up actually attaching a camera on a carbon fiber rod right in front of the actor’s face. What made this movie’s computer graphic rendering so much better and different from other movies at the time is that the character’s facial features would be very, very accurate and human-like, thus making them very relatable. One thing I really appreciate and admire from this project is that after viewing a info video about how they made the movie, it reminded me a lot of the facial recognition features and “animojis” that Apple recently featured in their iPhone X and the brand new iPhone XS. However, this was implemented on a larger scale in a fast-paced action movie 8 years prior. That is incredibly impressive.

A featurette of Avatar’s 3d computer graphics

PO5 – Alexander Chen

sketch

//Alexander Chen
//Section A 
//alchen1@andrew.cmu.edu
//Project05

function setup() {
    createCanvas(400, 480);
    background (32, 29, 46);
}

function draw() {
    drawGrid();
    noLoop(); 
}
function drawGrid() {

//Red lines on the navy background to create effect of alternating red and blue lined background
	for (var i = 0; i < 40; i+=2) {
		fill (64, 18, 26);
		noStroke();
		rect (i * 15, 0, 15, height);
	}

//SHIELDS//
	for (var y = 40; y < height - 10; y+=55) {
		for (var x = 27; x < width - 10; x+=55) {
            //Shield 
            stroke(255);
            fill(34, 51, 74);
            triangle (x, y, x + 20, y, x + 10, y + 20);
          
            //line detail inside shield
            line(x + 4, y + 7, x + 15, y + 7);
           
           	//red tip of shield
            stroke(255);
            fill (147, 26, 28);
            triangle (x + 4, y + 7, x + 16, y + 7, x + 10, y + 20);


        }
	}
}

This wallpaper was largely inspired by classic Americana/Ivy League fashion. A lot of inspiration was drawn from vintage Ralph Lauren, Tommy Hilfiger, and modern American microbrand Arnold Steiner. Additionally, I found myself reminiscing my home city of Philadelphia and thinking about the colors of the crest of UPenn. This kind of preppy and classic colorway found its way into the three main colors of my wallpaper. I wanted create something that represented old traditional families and what better way to represent that in a simple and minimal but still classic crest.

You can see in the pictures displayed below some inspiration that I drew from:


Shield of the University of Pennsylvania


2013 Tommy Hilfiger Campaign


Arnold Steiner Instagram post from August 2018 @arnoldsteiner

PO4 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project 04

function setup() {
    createCanvas(400, 300);
}

function draw() {
	background(0);

    var x = 0;
    var y = 0;
    var x1 = width/2;
    var y1 = height/2;
    var x2 = width/2;
    var y2 = height/2;
    var x3 = width
    var y3 = height
    var x4 = width/2;
    var y4 = width/2;
 //white curves
    for (var i = 0; i < 50; i++) {

    //BOTTOM RIGHT//
        stroke('red');
        //bottom right corner (bigger gaps)
        line(x1, height, width, height - y1);

        stroke(67, 21, 32);
        //bottom right corner (smaller gaps)
        line(x2, height, width, height - y2);

    //TOP LEFT//
        stroke('red');
        //top left corner (bigger gaps)
        line(width - x1, 0, 0, y1);

      	stroke(67, 21, 32);
        //top left corner (smaller gaps)
        line(width - x2, 0, 0, y2);



    //MIDDLE "SPOTLIGHT"
    	stroke(255);
    	line(x3, 0, x, y2);

    //TOP RIGHT CORNER//
       	//top right corner (smaller gaps)
    	stroke('red');
    	line(x4, 0, width, y4);

    	stroke(67, 21, 32);
		//top right corner (bigger gaps)
    	line(x2, 0, width, y2);

        x1 = x1*1.08;
        y1 = y1*1.08;
        x2 = x2*1.025;
        y2 = y2*1.025;
    	x4 = x4*1.08;
        y4 = y4*1.08;
    }
}

LO4 – Alexander Chen

When it comes to music and technology, I definitely feel that this is an area where we will be headed in the near future. As a music major myself, this is an area where I definitely feel very strongly about. I think technology is going to play a bigger and bigger role in contemporary music and that is inevitable. However, whether or not that is a good thing is up for debate. I personally believe that it is a very good assistant. Like jazz guitarist, Pat Metheny states, it is definitely a good assistance. However, that being said, I do not believe that computers will be able to completely take over music (like a robot symphony orchestra) as author William Hochberg seems to suggest. This is because there is a level of human connection and feeling that computers will not be able to replicate. Unless there is AI that is advanced enough to “feel” I don’t think computers will ever be able to create real art. However, that being said, computers and algorithms writing music has been around for forever, and in that instance, I think it is slightly different and definitely valid.

https://www.theatlantic.com/entertainment/archive/2014/08/computers-that-compose/374916/

A piece written in the style of Bach.

LO3 – Alexander Chen

Digital Grotesque is the name of two separate installations that are pieces of architectural works that resemble the works of Spanish architect Antonion Gaudi. These rooms are 3D printed and were entirely made from algorithms. I admire this project because it takes something that is seemingly very mathematical and calculated like algorithms and make it into something very beautiful and artistic. Replicating architectural styles of the past that well is something already commendable, but it also implies further scientific creations. For example, this kind of structure probably would have taken forever to make in the time that this type of architecture was the norm. However, this took only one month to print which while is a long time to print, it is nothing compared to the years of the original.

Project03 – Aleax

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project03

var circleSize = 0

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

function draw() {

//RECTANGLES//
	//top half
	noStroke();
	if (mouseX < width / 2) {
		fill ("red");
	}
	if (mouseX > width / 2) {
		fill ("blue");
	}
	rect (0, 0, width, height / 2)

	//top half
	noStroke();
	if (mouseX > width / 2) {
		fill ("yellow")
	}
	if (mouseX < width / 2) {
		fill ("green");
	}
	rect (0, height / 2, width, height / 2);

//MIDDLE CIRCLES//
	// middle circle (small)
	strokeWeight(5);
	if (mouseX < width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX > width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX < width / 2) {
		stroke(255);
	}
	if (mouseX > width / 2) {
		stroke(0);
	}

	noFill();
	ellipse (width / 2, height / 2, circleSize, circleSize);

	// middle circle (medium)
	strokeWeight(5);
	if (mouseX < width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX > width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX < width / 2) {
		stroke(255);
	}
	if (mouseX > width / 2) {
		stroke(0);
	}
	
	noFill();
	ellipse (width / 2, height / 2, circleSize - 30, circleSize - 30);	

	// middle circle (big)
	strokeWeight(5);
	if (mouseX < width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX > width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX < width / 2) {
		stroke(255);
	}
	if (mouseX > width / 2) {
		stroke(0);
	}

	noFill();
	ellipse (width / 2, height / 2, circleSize - 60, circleSize - 60);

//SIDE TRIANGLES//
	//right triangle 1
	noStroke();
	fill("purple");
	if (mouseY < height / 2) {
		triangle(width - 30, mouseY - 20, width - 10, mouseY - 20, width - 20, mouseY)
	}
	if (mouseY > height / 2) {
		triangle(width - 20, mouseY, width - 30, mouseY + 20, width - 10, mouseY + 20)
	}

	//right triangle 2
	fill("purple");
	if (mouseY < height / 2) {
		triangle(width - 60, mouseY - 50, width - 40, mouseY - 50, width - 50, mouseY - 30)
	}
	if (mouseY > height / 2) {
		triangle(width - 50, mouseY + 30, width - 60, mouseY + 50, width - 40, mouseY + 50)
	}
	
	//right triangle 3
	fill("purple");
	if (mouseY < height / 2) {
		triangle(width - 90, mouseY - 80, width - 70, mouseY - 80, width - 80, mouseY - 60)
	}
	if (mouseY > height / 2) {
		triangle(width - 80, mouseY + 60, width - 90, mouseY + 80, width - 70, mouseY + 80)
	}

	//left triangle 1
	fill("purple");
	if (mouseY < height / 2) {
		triangle(30, mouseY - 20, 10, mouseY - 20, 20, mouseY)
	}
	if (mouseY > height / 2) {
		triangle(20, mouseY, 30, mouseY + 20, 10, mouseY + 20)
	}

	//left triangle 2
	fill("purple");
	if (mouseY < height / 2) {
		triangle(60, mouseY - 50, 40, mouseY - 50, 50, mouseY - 30)
	}
	if (mouseY > height / 2) {
		triangle(50, mouseY + 30, 60, mouseY + 50, 40, mouseY + 50)
	}
	
	//left triangle 3
	fill("purple");
	if (mouseY < height / 2) {
		triangle(90, mouseY - 80, 70, mouseY - 80, 80, mouseY - 60)
	}
	if (mouseY > height / 2) {
		triangle(80, mouseY + 60, 90, mouseY + 80, 70, mouseY + 80)
	}
}

This project definitely helped me think really creatively due to the open-ended nature of the project. My inspirations for this project was different flags of different countries as well as airplane shows. I think the challenge of this project was to think creatively with the "if" conditional sentences.

LO – 02 – Alexander Chen

In 1757, Johann Philipp Kirnberger wrote a piece based on the randomness of dice. This system, called Musikalisches Würfelspiel, used the values of dice in coordination with preassigned options to compose a piece. The result, “Der allezeit fertige Menuetten- und Polonaise Komponist,” is one of the earliest forms of this type of music.

I admire the fact that this type of generative art (music in this case) is not only something that’s relevant today but also something that’s been around for almost 300 years. Even though this is a very simple and arguably outdated, way of doing generative art, it still qualifies and obviously has stood the test of time.

The artist’s creativity still shines through this otherwise seemingly systematic way of writing music. This is because the preassigned options are still determined by the composer.

Project 02 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project_02


var faceWidth = 100;
var faceHeight = 150;
var eyeSize = 20;
var pupilColor = 255;
var eyeColorR = 0
var eyeColorG = 0
var eyeColorB = 0
var earWidth = 10
var earHeight = 20
var mouthSize = 20
var hairHeight = 40

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

function draw() {
    background(242, 126, 159);

   
   
    //FACE//
    noStroke();
    fill(231, 175, 132);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


      //HAIR
    fill(0)
    var hairX = width / 2 - faceWidth / 2
    var hairY = height / 2 - faceHeight / 2
    var hairWidth = faceWidth
    rect(hairX, hairY, hairWidth, hairHeight, 20, 20, 10, 10);
   

    //EYES//
    //eyes color
    fill(pupilColor)
    
    //pupil size + location
    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);

    //iris
    fill(eyeColorR, eyeColorG, eyeColorB)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);


    //EARS//
    fill(231, 175, 132);
    var earL = width / 2 - faceWidth / 2
    var earR = width / 2 + faceWidth / 2
    ellipse(earL, height / 2, earWidth,  earHeight);
    ellipse(earR, height / 2, earWidth,  earHeight);


    //NOSE//
    fill(100, 75, 46)
    rect(width / 2 - eyeSize / 4, height / 2, eyeSize / 2, eyeSize, 20)

    //MOUTH//
    fill(251, 62, 58)
    ellipse(width / 2, height / 2 + faceHeight / 4, mouthSize, mouthSize)



}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(10, 30);
    earWidth = random(5, 15);
    earHeight = random(10, 20);
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorb = random(0, 255);
    mouthSize = random(10, 20);
}

This project was definitely a bit easier to get started with the templates. However, it was still as hard as I thought it was going to be with the variables within the variables. As someone who loses track easily, I found myself being confused with which variables lined up with which.

Project1 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(400, 400);
    background(73, 153, 173);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
	createCanvas(400, 400);
	background(128, 127, 128);

	//background design
	stroke(255);
	strokeWeight(5);
	if(mouseIsPressed){
		fill(102, 193, 224);
	} else {
		fill(233, 210, 218);
	}
	rect(30, 30, 340, 340);

	//head + neck
	noStroke();
	fill(231, 175, 132);
	ellipse(200, 260, 100, 120);
	fill(231, 175, 132);
	rect(190,310, 20, 30);	
	
	//shirt
	fill(53, 0, 5);
	rect(130, 340, 140, 60, 30, 30, 0 ,0);
	fill(255, 255, 255);
	triangle(200, 340, 180, 340, 190, 330);
	fill(255, 255, 255);
	triangle(200, 340, 220, 340, 210, 330);
	
	//buttons on shirt
	fill(255, 255, 255);
	ellipse(200, 350, 5, 5);
	fill(255, 255, 255);
	ellipse(200, 370, 5, 5);
	fill(255, 255, 255);
	ellipse(200, 390, 5, 5);
	
	//eyes + glasses
	fill(0, 0, 0);
	ellipse(170, 260, 20, 20);
	fill(231, 175, 132);
	ellipse(170, 260, 15, 15);
	fill(0, 0, 0);
	ellipse(210, 260, 20, 20);
	fill(231, 175, 132);
	ellipse(210, 260, 15, 15);
	fill(0, 0, 0);
	rect(180, 258, 20, 3);
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(170, 260, 8, 8, PI, 0);
	stroke(0);
	strokeWeight(2);
	arc(210, 260, 8, 8, PI, 0);

	//mouth
	noStroke();
	fill(193, 52, 27);
	arc(190, 290, 15, 15, 2*PI, (3/4)*PI, OPEN);

	//hair
	fill(0, 0, 0);
	arc(200, 220, 80, 40, PI, 0, CHORD);
	fill(0, 0, 0);
	ellipse(235, 235, 20, 40);
	fill(0, 0, 0);
	ellipse(238, 245, 20, 40);
	fill(0, 0, 0);
	ellipse(240, 245, 20, 40);
	fill(0, 0, 0);
	ellipse(242, 255, 20, 40);

}

This experience was very eye opening for me. I have never written any code before and it was very evident that I had no idea what I was doing. However, after playing around with it and reading a lot on the p5.js I’ve managed to conjure up something that slightly resembles me. I even challenged myself to add in “if” commands with the background changing colors when the mouse is pressed down.

LO1 – Alexander Chen

There is an app that was developed a while back called Cadenza and the purpose of this app is to have a live orchestra playback for a musician as they are playing the solo line. As a musician and music major this is very important and groundbreaking. Before this, musicians would have to either play along with a recording (that won’t follow you), imagine the orchestra part, or hire a piano accompanist to rehearse. No one just has access to an orchestra whenever they want to practice a solo piece. With Cadenza, musicians can now play and perform their solo repertoire with accompaniment anytime (and at all tempo both practice and performance tempo) and the orchestra will interact with you via microphone and follow you.

The app, created by Christopher Raphael, had to have many programming components to it in order for it run as smoothly as it does. As a musician at Carnegie Mellon, we talk a lot about technology in music and how the role of technology plays. While computer simulated music will never be able to replace real musicians (or will it?), I admire this app because it makes the artificial intelligence part feel natural. I think this project points to a future where electronic music will play a larger role in music of all genres (even ones that usually are not associated with electronics)

https://www.youtube.com/watch?v=mEwbmaWcmaA

This is a video of violinist Stephanie Zyzak demonstrating the Cadenza app. Notice she is playing the Tchaikovsky Violin Concerto but at a much, much slower tempo than the performance tempo and the orchestra still follows her.

Website to Cadenza:

http://www.sonacadenza.com/the-app/