Category: SectionA

Min Ji Kim Kim- Looking Outwards – 05

Peter Nowacki’s “The Race Day”

The Race Day is a 3D environment created by Peter Nowacki. Inspired by concept artist Gary Tonge’s Old Backstreet, Nowacki sought to recreate the environment with a more “steampunk” vibe. Utilizing tools like 3ds Max and Vray, Nowacki clay sculpted the basic components of the environment first and then spent a lot of time creating UV maps, which is essentially projecting a 2D image onto a 3D surface, to add texture and make the environment more realistic. 

Clay model of “The Race Day”

He then proceeded to create the gears, bicycles and dust details for the steampunk effect using Zbrush and Mudbox and added finishing touches on AfterEffects. 

Before and after adding the steampunk details.

Overall, I was in awe of Nowacki’s portfolio, but I was particularly attracted to this piece because it showed me the power of 3D rendering. I admire how Nowacki was able to recreate the 2D graphic design and bring it to another dimension, creating an even fuller and more complete environment by adding details and depth that can’t be captured in 2D. I think Nowacki’s twist of adding the steampunk vibe was a very good artistic choice. 

You can read more about Nowacki’s process here, and see his portfolio here.

project 04 – Ilona Altman – string art

This project was very interesting. It really helped me to isolate the changes of the variables in terms of width and height.

sketch

//Ilona Altman
//iea 

function setup() {
  createCanvas(400, 300);
  background(230,212,160);
}

function draw() {


for(var x = 0; x < 2*width; x = x + 5) {
    line(x, width, 0, -1*x);
    stroke(194,130,150);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(x, width, height, -1*x);
    stroke(180,200,190);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(width - x, -1.5*height, 0, height-x);
    stroke(230,212,160);
    }

for(var x = 0; x < 2*width; x = x + 10) {
    line(0.000000005*width + x, height, width, height - x);
    stroke(180,120,140);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(width - x, height, width, 0.000000001*width + x);
    stroke(190,130,90);
    }


}

LookingOutwards 4 – Danny Cho

Dot Piano – by Alex Chen & Yotam Mann

I love how the sound of piano is directly translated in to a warming visual. Personally, when I play piano, I enjoy playing subtle music as jazz or acoustic music, and this kind of visualization of sound matches it really well. At Cooper Hewitt, I encountered this creation and thought it was so beautiful and fun to play with, especially in a bigger scale. It is also available online at https://dotpiano.com with different types of displays.

Each note is assigned a color and a path to move in. The intensity of the sound and the volume determines how bright, fast, saturated the colored circle will be.

I would like to create some kind of collaboration between sound and coding in this course.

Hyejo Seo – Project -04: String Art


For this project, I wanted to explore different shapes that could be created by overlapping lines. I thought of playing cards, so I decided to use “Diamond” as my theme. 

sketch

/* 
Hyejo Seo
Section A
hyejos
Project - 04 - String Art
*/

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

function draw() {
    background(47, 47, 47);
    
    for(var q = 0; q < 50; q += 3){
        stroke(106, 127, 219); // blue line 
        line(q - 30, -q, q + 300, height - q + 30);
        stroke(224, 141, 172); // pink line
        line(q - 60, height + q, width + q, q - 60);
    }
    //white lines 
    for(var q = 0; q < 50; q += 5){
        stroke(255); 
        strokeWeight(0.7);
        line(q + 150, height + q, width + q + 160, q);
        line(q - 250, height + q, width + q, q - 260);
    }
    //Joker 
    fill(87, 226, 229);
    noStroke();
    textSize(15);
    textFont('Serif');
    text("J", 283, 315);
    text("O", 280, 335);
    text("K", 280, 355);
    text("E", 280, 375);
    text("R", 280, 395);

    //other letters
    textFont('Serif');
    textSize(25);
    //k + diamond
    text("K", 10, 25);
    quad(19, 35, 30, 50, 19, 65, 8, 50);
    //Q + Diamond 
    text("Q", 10, height - 40);
    quad(19, 369, 30, 384, 19, 399, 8, 384);
    text("J", width - 23, 25);
    quad(width - 19, 35, width - 30, 50, width - 19, 65, width - 8, 50);   
}

Min Ji Kim Kim – Project 04 – String-Art


sketch

This week’s project was both fun and challenging at the same time. I initially struggled trying to manipulate the movement of the curves but after a little while I got used to it. I got the color inspiration from the lasers at Illenium’s concert.

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(0);
    for (i = 0; i < width / 2; i += 30) {
        stroke(30, 255, 50); //bottom left green lines
        line(mouseX, i, i, height);

        stroke(255); //top right white lines
        line(i, mouseY, width, i);

        stroke(220, 0, 214); //top right pink lines
        line(i, mouseY, width, -i);

        stroke(255); //bottom left white lines
        line(mouseX, i, -i, height);
    }
   
    for (i = 0; i < 400; i += 10) {
        stroke(230, 240, 39); //yellow curve
        line(mouseX, i, i, height - mouseY);

        stroke(34,206,255); //blue curve
        line(-mouseX, i, i, mouseY);
    
        stroke(140, 0, 255); //purple curve
        line(mouseX, i, i, -mouseY);

        stroke(255, 131, 0); //orange curve
        line(width - mouseX, i, i, mouseY);
    }
}

Danny Cho – Project 4 – String Art

LineDrawing

// Danny Cho
// changjuc
// Section: A

var rate1 = 0;
var rate2 = 0;
var rate3 = 0;
var rate4 = 0;

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

  noStroke(); 
}



function draw(){
	background(0);
	//living vertex with two moving curves (exploration)
	noFill();
	strokeWeight(1);
	for (var i = 0; i <= 20; i++) {
	noFill();
	strokeWeight(1);
	stroke(100);
	beginShape();
	vertex(0, 30 * cos(radians(rate2)));
	quadraticVertex(20 * i, i * 30 * cos(radians(rate2)), 400, 300);
	quadraticVertex(20, i * 30 * sin(radians(rate2)), 0, 20 * i);
	vertex(400, 0);
	endShape();
	}
	
	//first curve: waves horizontally at rate1
	for (var i = 0; i <= 20; i++) {
			stroke('green');
		line(20 * i * cos(radians(rate1)), 0, 0, 300 - (20 * i) * sin(radians(rate1)));
	}
	rate1 = rate1 + .6;
	//second curve: waves horizontally at rate2

	for (var i = 0; i <= 20; i++) {
		stroke('blue');
		line(20 * i * sin(radians(rate2)), 0, 0, 300 - (20 * i) * cos(radians(rate2)));
	}
	rate2 = rate2 + 1;
	//third curve: waves in a clockwise direction
	for (var i = 0; i <= 20; i++) {
			stroke('red');
		line(0, 300 - (20 * i) * cos(radians(rate4)), 20 * i * tan(radians(rate4)), 0);
	}
	rate4 = rate4 + .6;
	//fourth curve: waves of changing strokeweight

	for (var i = 0; i <= 40; i++) {
		if (i%2 == 0) {strokeWeight(5);}
		else {strokeWeight(1);
			
		}
		stroke(200);
		line(400, i * 10 * cos(radians(rate3)), width - (i * 10 * cos(radians(rate3))), 300);
	}
	rate3 = rate3 + 0.8;




}

I wanted to continue to work with constantly changing geometry at an organic rate. The next step might be making a solid form that also morphs in an organic way?

looking outwards- 04 – ilona altman

video explaining the workings of the Weather Thingy

I was so happy to discover this project! This project is a beautiful mix of computation and sound. It is called “Weather Thingy” and it was made by Adrien Kaeser, a fellow bachelor’s student in school in Switzerland, last year! In this project, a musical can create music, that responds to, and changes with the local weather conditions.

I especially admire the visual design and the conceptual vision of this piece. Visually, this work is stunning, so simple and looks easy to use. I love the images that pop up on the screen associated to each facet of weather. Conceptually, I love the idea of the weather influencing song. It kind of makes me think about Ellaisson’s Weather Project/ meditating on how weather is one of the ways we experience nature within our city, it is an ever-present source of chaos. (link below)

https://www.tate.org.uk/whats-on/tate-modern/exhibition/unilever-series/unilever-series-olafur-eliasson-weather-project-0

Algorithmically, I would guess that each input (of the weather, and the musicians movements on the keyboard), are combined together in the ratio requested by the musician. Each weather input (rain, wind speed) affects a different aspect of the music. Thus the input of the music from the musical must also be analyzed according to these distinct parts so that it can be mixed with the weather inputs accordingly.

The artists artistic sensibility is present even within the name of this project, which is really funny and causal. A sensibility for clear design is also present within both the project’s interface and the documentation.

Weather Thingy – Real time climate sound controller

Steven Fei – Project 4


sketch

This drawing was my attempt to understand how small changes of the two coordinates can create fluent curves. With the combinations of different lineweights, I was experimenting with the visual depth of different elements. Meanwhile, the three “Taichi” like symbols were inspired by the Sharingan from Naruto which represents creating a world of illusions.


function setup() {
    createCanvas(400, 300);
    background("black");
    
}
var x1; //variables for central white, blue, and purple curves
var x2; //variables for peripheral curves
var stepX1 = 10;//steps of change for central curves
var stepX2 = 20;//steps of change for peripheral curves
var y1=0;//variables for peripheral curves
var angle;//variables for the red curves
var radius = 30;//varaibles for the size of red curves
function draw() {
    
    //    top green lines
    for (var i = 0; i < 30; i++){
        x2 = -50 + i * stepX2;
        x3 = 30 + width;
        y1 = 15 * i;
        stroke(3,122,43);
        strokeWeight(0.1);
        line(x2, 0, x3, y1);
    }
//    bottom blue curves
    push();
    translate(0,height);
    for (var i1 = 0; i1 <= 90; i1 += 5){
        x2 = i1*5;
        y1 = 0;
        x3 = 450-x2;
        y2 = sin(radians(i1))*-80;
        stroke("blue");
        strokeWeight(0.1);
        line(x2,y1,x3,y2);
    }
    pop();
//    Dark purple lines on the bottom;
    push();
    translate(0,height);
    for (var i2 = 0; i2 <= 90; i2 += 5){
        x2 = i2*5;
        x3 = 450-x2;
        y2 = sin(radians(i2))*-80;
        i3 = map(i2, 0, 90, 0, PI*1/4);
        x4 = -50 + 500*cos(i3);
        y4 = 300-500*cos(i3);
        stroke(71,3,112);
        strokeWeight(0.1);
        line(x3,y2,x4,y4);
    }
    pop();
    
//    Central to left bottom White Lines    
    push();
    translate(width/2,height/2);
    rotate(radians(60));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(0.5);
        stroke("white");
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
        
    }

//    Central to left top light blue lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(0.5);
        stroke(109,129,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
//    central to right light purple lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(0.5);
        stroke(152,109,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    pop();
//   left top Taichi Fish 
    push();
    translate(100,70);
    rotate(radians(80));
    for (angle = 0; angle <90; angle += 5){
        angConv = radians(angle);
        angConv2 = 1.5*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
    }
    for (angle=90; angle<100; angle += 3){
        angConv = radians(angle);
        angConv2 = 1.8*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
        
    }
    for (angle=120; angle<=180; angle += 3){
        angConv = radians(angle);
        angConv2 = 3*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
        
    }
    for (angle=135; angle<163; angle+=4){
        angConv = radians(angle);
        strokeWeight(0.5);
        stroke("red");
        line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
    }
    pop();
    
    //   right side top Taichi Fish 
    push();
    translate(320,150);
    rotate(radians(190));
    for (angle = 0; angle <90; angle += 5){
        angConv = radians(angle);
        angConv2 = 1.5*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
    }
    for (angle=90; angle<100; angle += 3){
        angConv = radians(angle);
        angConv2 = 1.8*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
        
    }
    for (angle=120; angle<=180; angle += 3){
        angConv = radians(angle);
        angConv2 = 3*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
        
    }
    for (angle=135; angle<163; angle+=4){
        angConv = radians(angle);
        strokeWeight(0.5);
        stroke("red");
        line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
    }
    pop();
    
    //   left bottom Taichi Fish 
    push();
    translate(110,230);
    rotate(radians(320));
    for (angle = 0; angle <90; angle += 5){
        angConv = radians(angle);
        angConv2 = 1.5*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
    }
    for (angle=90; angle<100; angle += 3){
        angConv = radians(angle);
        angConv2 = 1.8*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
        
    }
    for (angle=120; angle<=180; angle += 3){
        angConv = radians(angle);
        angConv2 = 3*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
        
    }
    for (angle=135; angle<163; angle+=4){
        angConv = radians(angle);
        strokeWeight(0.5);
        stroke("red");
        line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
    }
    pop();

}

Hyejo Seo – Looking Outwards-04


Video that demonstrates how Uncertainty Principle of the Invisible works. 

“There is no such thing as emptiness; it is full of randomness”

This interactive art project, Uncertainty Principle of the Invisible, created by Hyesoo Chang was inspired by the connection between human’s voice and the random movement of dust. Every individual has unique vocal tone and rhythm that, consequently, differentiates the movement of the dust in the air. In this case, human’s voice and dust particles work as “the Invisible”, and the random interaction between the two is the “Uncertainty Principle”. How this installation works is that, when a person speaks into the microphone (physical interaction), their voices get transformed into digital files, which, then, affects how the dust bounces. This art installation was created using Maxmsp. 

I think it’s a very intriguing and creative piece that shows how our voices – something that is invisible to us – affects the physical world around us. This project shines light on the interaction between us and our surroundings that is rather overlooked everyday. So cool! 

Steven Fei-LookingOutwards-04

  The advent of robots, sound art has been mediated by machines and artificial intelligence. Robots can be programed to “think” to produce music that can fool humans to consider the sons were made by their same species. From the article “When Robots Write Songs”, some robots were specially designed to emulate some famous Jazz musians and DJs and they indeed surprised me by copying and developing those personal preferences and styles in music compositions. Starting from building the Fibonacci relationships among the notes to generate people’s general appreciation towards beauty, the amazing robots can even develop the algorithms to deconstruct and understand personal music styles in such a rational way.

    One of the most interesting projects about how artificial sound art can change human’s perception of the world is the Prelude in ACGT. Eploring the relationship between biology and music, the tool designed by Pierry Jequillard uses the developer’s own DNA and converts it into music. By controlling several parameters like Tempo, the developer is able to visualize and understand the algorithmic process of how artificial intelligence converts his chromosomes into musical arrangements. Such a technological advances amazes me in its conversion of our natural form into encoded eternal artworks. Moreover, the experiment successfully demonstrates the versatility of artificial intelligence in producing interdisciplinary of arts.

Click here to view the original article