Category: Section C

JDBROWN-Looking Outwards-05

https://www.instagram.com/extraweg/

Posted by The Content Zone on Saturday, September 9, 2017

Here is a link to a video that continuously amazes me. It’s some sort of exercise in computational animation and the physics associated with realistic movement. It deals with smearing animation, bulging, puckering, and stretched texture. There’s something wildly unsettling about this video (probably the eyes), but I love it and I have no idea how people made this happen. Partially, animation has always astounded me because EVERYTHING has to be created from scratch.

Imagine the person who had to program the marmalade man spreading himself all over a piece of toast? What goes through their mind?

Josh

Bettina-LookingOutwards_05

This image is from the same site as the Ebola rendering example. It is by Tiago Alexandrino who creates architectural visualisations for private clients. Taking just five or six days, he created this scene using 3ds Max and V-Ray.

I appreciate this for it’s application. Many 3D graphics are impressive, creating hyperrealistic portraits or adding depth to video game or movie characters. But, I think this work represents our potential with using virtual reality in our everyday lives. Imagine this: instead of showing still images, one could create an entire building design for Google Cardboard and allow clients to step into their ideas before it’s ever built. This concept of presenting the future could work in policy-making as well– we could build ideal or unfavorable scenarios and show those as an additional way to persuade others. Showing the future would serve as powerful fodder to instill motivation and action amongst people.

Looking Outward 04- Ronald Jenkees

My Looking Outward for this week is Guitar Sound by Ronald Jenkees.

Guitar Sound

(I had an issue embedding the YouTube video)

Ronald Jenkees is an electronic music composer who has been making music since 2007. He has 5 albums; this song is from the second one (from 2009). Ronald Jenkees uses a combination of his own playing on synthesizers with generated tracks to create a characteristic personal sound. Although his method is not deeply algorithmic, the combination of conventional playing and electronic methods creates an effect different from both conventional songs and typical electronic music.

Project-04 Sunrise

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-04


function setup() {
    createCanvas(400, 300);
    background(220);
}
 
function draw() 
{
    strokeWeight(1);
    //Sun
    //Drawn between points along a half circle in the middle of the canvas.
    //i is an angle measure going from 0 to 90 degrees.
    stroke(200,200,50);
    for(var i = 0; i < 90; i += 5 )
    {
        line( width / 2 + 50 * cos(radians(i)), 
              height / 2 - 50 * sin(radians(i)),
              width / 2 - 50 * cos(radians(i)),
              height/2 - 50 * sin(radians(i)));
    }
 
    //Sun rays
    //Drawn along the same angles between 2 circles, 1 radius 50
    //(the edge of the sun), the other with radius 250
    stroke(221,85,119);
    for( var i = 0; i <= 180; i += 5 )
    {
        line( width / 2 + 50 * cos(radians(i)),
              height / 2 - 50 * sin(radians(i)),
              width / 2 + 250 * cos(radians(i)),
              height / 2 - 250 * sin(radians(i)));
    }

    //Sea
    //The sea is just sketched in with diagonal lines spaced out linearly
    stroke(25, 25, 150)
    for( var i = -20; i < 600; i += 10 )
    {
        line( 0, height / 2 + i, i, height / 2 );
    }

    strokeWeight( 2 );
    //Sun's reflection on the water
    //horizontal lines following a sinusoidal pattern
    stroke( 200, 200, 50 );
    for( var i = 0; i < 150; i += 5 )
    {
        line( width / 2 - 35 - i / 3 - 4 * sin(radians(i * 12)), height / 2 + i,
              width / 2 + 35 + i / 3 + 4 * sin(radians(i * 12)), height / 2 + i );
    }
}

It’s a sunrise

I used a lot of circles; the sun’s reflection on the water uses a sinusoidal pattern.

aerubin-project-04-string-art

I was inspired by the interesting curves and shapes that are depicted in paintings of waves. I began by drawing a single wave and then trying different lengths and positions to create the desired effect. I also added movement in the bottom-most waves that makes it seem like it is moving from left to right. I really enjoy using the “for loops” in our design, it makes coding much faster and simpler than writing out every parameter for each line.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-04-String-Art

var Y_AXIS = 1;
var c1, c2;

function setup() {
    createCanvas(300, 400);
    background(220);
    c1 = color(255, 183, 60);
    c2 = color(45, 100, 245);
}

function draw() {
    background(220);

    setGradient(0, 0, 300, 400, c1, c2, Y_AXIS);

    for(var i=0; i <200; i++) {
        littlewaves(i);
}
    for(var p=0; p <200; p++) {
        rightwave(p);
}
    //Sun
    noStroke();
    fill(255, 250, 217);
    ellipse(153, 204, 50, 50);

}

function littlewaves(x) {
    //little waves on bottom
    for(var z=0; z<10; z++) {
    push();
    translate(x+(z*20)+(mouseX/2),30); //moves waves 
    rotate(radians(x*2));
    stroke(53, 74, 107);
    line(150,200,10 + x, 400);
    pop(); 
}
}

function rightwave(y) {
    //middle curve
    push();
    translate(y+210, 60);
    rotate(radians(y));
    stroke(97, 132, 158);
    line(150,200,10 + y, 200);
    pop();

    //large wave, dark colored
    push();
    translate(y+122, 170);
    rotate(radians(y*2));
    stroke(82, 115, 149);
    line(150,230,10 + y, 20);
    pop();

    //large wave, light colored
    push();
    translate(y+50, 150);
    rotate(radians(y));
    stroke(70, 170, 200);
    line(150,230,10 + y, 20);
    pop();
}

function setGradient(x, y, w, h, c1, c2, axis) {

    //Sets Gradient in Background
    noFill();
    if (axis == Y_AXIS) {
    for (var i = y; i < y+h; i++) {
    var inter = map(i, y, y+h, 0, 1);
    var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x+w, i);
    }
  }
}

myoungsh-lookingoutwards-04

As soon as I read this looking outwards was about sound a project I was tangentially involved in immediately came to mind. Actually quite similar to our professors work with music by a professor at Princeton university Perry Cook. He had a totally electronic orchestra.

https://www.cs.princeton.edu/~prc/

He did work with my dad, a stone sculptor on a project for an installation in Princeton. They made a lithopone, historically a large upright stone xylophone. The installation quark park was many pieces done in collaboration between local artists and Princeton University scientists.

http://www.princetonoccasion.org/quarkpark/

They created a system that mixed sounds from a stone sculpture being hit with random sounds recorded from the process of making the sculpture toy create a large electronic and stone instrument. When I was a little kid working with my dad on this project I had no idea really what electronic music really meant but as soon as we were showed the trumpet accompanied by a full electronic bras section in class I was reminded of this project.

Project-04-StringArt-sjahania

sketch

var density; //changes how thick the arcs are

//changes the colors
var col1; 
var col2;


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

function draw() {
	//redraws a new canvas every time the mouse is pressed
	fill(240);
	rect(0,0,400,300);

	//sets the colors based on the x coordinate of the mouse
	col1 = mouseX/(400/255);
	col2 = mouseX/(400/255);

	for (var a = 0; a < 400; a += density) {
		//draws the top left arc
		stroke(180,255 - col2,180);
		line(a, 0, 0, 400-a);

		//draws bottom left arc
		stroke(255 - col1,180,180);
		line(400 - a, 300, 0, 300 - a);

		//draws bottom right arc
		stroke(180,col2,180);
		line(a, 300, 400, 300 - a);


		//draws top right arc
		stroke(col1,180,180);
		line(a, 0, 400, a);
	}

}
//changes the thickness of the arcs by drawing a different # of lines
function mousePressed() {
	density = random(5,12);
}

Using the for loop took me a while because it is different enough from python to really throw me off. Once I figured it out, I had fun making different shapes, but I settled for something symmetrical because the other shapes I made weren’t very aesthetically pleasing. Then I played with colors.

myoungsh-project-04-string-art

sketch

function setup() {
  createCanvas(400, 300);
  background(0);
  angleMode(DEGREES);
  for(var x = 100; x < 300; x += 10) { //vary x
    stroke(256);
    line(width, x, x, 0); //draw a line, curve it using varied x
  }
  push(); //reflect the curve
  scale(-1, 1);
  translate(-400, 0);
  for(var y = 100; y < 300; y += 10) {
    stroke(256);
    line(width, y, y, 0); 
  }
  pop();
  push(); //reflect both curves
  scale(1, -1);
  translate(0, -300);
  for(var n = 100; n < 300; n += 10) {
    stroke(256);
    line(width, n, n, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z = 100; z < 300; z += 10) {
    stroke(256);
    line(width, z, z, 0); 
  }
  pop();
  pop();
  push(); //disapear into the distance
  scale(.5, .5);
  translate(200, 150);
  for(var x1 = 100; x1 < 300; x1 += 10) {
    stroke(256);
    line(width, x1, x1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y1 = 100; y1 < 300; y1 += 10) {
    stroke(256);
    line(width, y1, y1, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n1 = 100; n1 < 300; n1 += 10) {
    stroke(256);
    line(width, n1, n1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z1 = 100; z1 < 300; z1 += 10) {
    stroke(256);
    line(width, z1, z1, 0); 
  }
  pop();
  pop();
  pop();
  push(); //go even further back
  scale(.25, .25);
  translate(600, 450);
  for(var x2 = 100; x2 < 300; x2 += 10) {
    stroke(256);
    line(width, x2, x2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y2 = 100; y2 < 300; y2 += 10) {
    stroke(256);
    line(width, y2, y2, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n2 = 100; n2 < 300; n2 += 10) {
    stroke(256);
    line(width, n2, n2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z2 = 100; z2 < 300; z2 += 10) {
    stroke(256);
    line(width, z2, z2, 0); 
  }
  pop();
  pop();
  push();
  scale(.5, .5);
  translate(200, 150);
  for(var x3 = 100; x3 < 300; x3 += 10) {
    stroke(256);
    line(width, x3, x3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y3 = 100; y3 < 300; y3 += 10) {
    stroke(256);
    line(width, y3, y3, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n3 = 100; n3 < 300; n3 += 10) {
    stroke(256);
    line(width, n3, n3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z3 = 100; z3 < 300; z3 += 10) {
    stroke(256);
    line(width, z3, z3, 0); 
  }
  pop();
  pop();
  pop();
  pop();
}

This project started with a lot of frustration with only being able to create arrays of line. And then once I was able to create a curve creating another curve, and controlling it was close to impossible within the same for loop. To solve this problem I copied the same curve and used translations to draw more.

aerubin-LookingOutwards-04-Section-C

As a music major, technology has affected our craft in both negative and positive ways. One of the most beneficial aspects of technology integrated into music, in my opinion, is the newfound ease that compositional programs provide composers, musicians, and creatives. Back in the day, composers would sit down and write hundreds of thousands of notes, one by one, on pieces of paper. This is a very slow method, erasing becomes a large hassle, and there is no way to hear what it sounds like completed, especially for compositions for large ensembles, unless one was to recruit the 50+ musicians necessary to create a full orchestra.

One of Beethoven’s original scores to exemplify the issues encountered while composing using pen and paper:

Composing on the computer allows the composer to quickly tap notes on the staff to write music. If the artist would like to get rid of a note, it is easy to click on it and press delete instead of erasing; one can even select an entire section to delete. One now has the ability to copy a melody, and paste it to have another instrument double the line, or even place it in another section of the piece. It is also possible to move a passage up or down by any interval, such as moving a melody down by an octave or changing the key by moving an entire piece a half-step or more up/down. In addition, there is a play-back setting that allows the composer to hear computer-generated instruments perform their work, and even listen to selected instruments individually. All of these features have greatly improved the speed and ease of composing.

Audacity
Created by: Roger Dannenberg and Dominic Mazzoni, Carnegie Mellon University

There are a multitude of composition applications and computer programs. Some of the most common ones are Sibelius, Ableton Live, Audacity, Pro Tools, Garage Band, and MuseScore. There are many differences between all of them, as some have the ability to edit sound, while others are more adapted for writing in notes on a staff. For many of my composition assignments I do for music classes, I use a computer program to cleanly write out and listen to my assignments. It is extremely helpful as I am not particularly fluent on piano, so I can easily listen to the counterpoint of my four-part harmony without the struggle of playing it myself. All in all, composing music utilizing technology has changed the field of composition and the music world for the better.

MuseScore
Written Using C++

https://en.wikipedia.org/wiki/List_of_music_software

abradbur-Project-04-String Art

stringart

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

function draw() {
    background(150, 53, 54);
    //black string
    for ( x = 0; x < 400; x += 20){
        stroke(84,1,3);
        line(x, 0, x * 1.5, 120);
        line(1.5 * x, 120, 1.2 * x, 300);
    }
    //light pink string
    for (y = 20; y < 300; y+= 50){
        noFill();
        stroke(254, 170, 171);
        bezier(0, y * 1.5 , 50, y, 20, y * .4, 400, y);
    }
    //strawberry string
    for (a = 0; a < 200; a += 10){
        noFill();
        stroke(210, 107, 108);
        bezier(0, a * 0.5, 30, a * 1.3, 300, a, 400, a *2);
        bezier(1.5 * a, 120, 1.2 * a, 300, 0, a, 40, 20);
        stroke(140, 123, 172);
        bezier(50 * a, 120, 1.2 * a, 300, 0, a, 40, 20);
        bezier(100 * a, 120, 1.2 * a, 300, 0, a, 40, 20);
    }
    //purple string
    for (b = 350; b < 400; b+= 20){
        bezier(300, 60, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(30, 20, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(60, 20, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(100, 20, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(170, 22, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(250, 40, b, 40, 20, 10 * b, 120, 1.2 * b);
    }
}

With this project I had fun playing with bezier curves and seeing what resulted from different loops in the code. I didn’t exactly have a distinct form in mind, and I didn’t want to make one because I felt it would take away from my exploration of the piece.