Author: Kyle

Kyle Leve Final Project


One image from the animation


Another image from the animation

Final Project-Kyle Leve

My project is an interactive art form where a tree is decorated with ornaments in time with music playing in the background. The song that is playing is “Carol of the Bells” by the Trans Siberian Orchestra. However, since I used multiple js files for this project WordPress would not run the whole project. So I have attached a zip file to run all the files. Download and unzip the zip file. Then to look at the code, look at all the different js files. To look at the project, open the index. As long as the index is running in a browser that allows audio, the file should play correctly. Once the index is loaded, all that needs to be done to start the animation is click the mouse on the screen and the music should start playing.

Kyle Leve-Project-12-Proposal

For my project I would like to combine music and visuals. Through this project I hope to create a visual performance where what is projected corresponds to the song that I choose. I hope to find a way to create visual effects that will portray a story that can go with the music. Hopefully, through this project I will be able to create a performance that enhances both the visual and audio experience. I plan on paying attention to the time in which certain events in the music take place and planning my object movements around that. Hopefully, I will be able to pinpoint when important aspects of the music happen and I can plan my visuals accordingly. I plan on making this performance last around 1-2 minutes so I will need to choose a song that is not too long, but not too short. In addition, I want it to be a complete song so that the entire message of the piece can be portrayed.

Kyle Leve-LO-Week-12

For my project I decided I wanted to incorporate music. One project that I discovered that relates to my project is the company Magic Music Visuals. The company has created a software that creates visuals for music performance. This software is able to be used in both live performance and with imported audio.

Link: https://magicmusicvisuals.com/video

Another project that has inspired me is a music video created by Zoon Designs for Olafur Arnalds’ song “3055.” I had never heard this song before, however I was captivated by how the visuals correlated to the music and enhanced the overall performance. Music can already portray so many emotions, however with the addition of a visual component, those emotions are heightened even more.

 

The music video for “3055”

Kyle Leve-Project-11-Composition

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-11-Composition

var faceWidth = 350;
var eyeSize = 50;
var irisSize = 30;
var pupilSize = 15;
var glimmerSize = 7;
var angle1 = 0;
var angle2 = 0;
var angle3 = 0;

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

function draw() {
	background(0);
    
    // Smile
    noFill();
    stroke(255);
    strokeWeight(5);
    curve(225, 300, 240, 320, 255, 320, 275, 300);

	// Eyes
	noStroke();
    fill('white'); // Left eyeball
    var eyeLX = 175;
    ellipse(eyeLX + 10, 200, eyeSize, eyeSize);

    fill('white'); // Right eyeball
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeRX - 30, 200, eyeSize, eyeSize);

    fill(77,47,23); // Left iris
    ellipse(eyeLX + 15, 205, irisSize, irisSize);

    fill(77,47,23); // Right iris
    ellipse(eyeRX - 25, 205, irisSize, irisSize);

    fill('black'); // Left pupil
    ellipse(eyeLX + 20, 210, pupilSize, pupilSize);

    fill('black'); // Right pupil
    ellipse(eyeRX - 20, 210, pupilSize, pupilSize);

    fill('white'); // Left eye shimmer
    ellipse(eyeLX + 25, 212, glimmerSize, glimmerSize);

    fill('white'); // Right eye shimmer
    ellipse(eyeRX - 15, 212, glimmerSize, glimmerSize);

    // Creates rotating cat face, ears, and whiskers   
    if (mouseX >= 0 & mouseX <= width) {
    	var ttl1 = makeTurtle(0, 0);
	    var ttl2 = makeTurtle(0, 0);
	    var ttl3 = makeTurtle(0, 0);
	    var ttl4 = makeTurtle(0, 0);
	    ttl1.setColor('orange');
	    ttl2.setColor('orange');
	    ttl3.setColor('orange');
	    ttl4.setColor(255);
	    ttl1.setWeight(10);
	    ttl2.setWeight(10);
	    ttl3.setWeight(10);
	    ttl4.setWeight(5);
	    ttl1.penDown();
	    ttl2.penDown();
	    ttl3.penDown();
	    ttl4.penDown();

	    // Cat head
        push();
        translate(220, 380);
        rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    pop();
	    angle1 = angle1 + 0.5;

        // Left ear
        push();
        translate(155, 125);
        rotate(radians(angle3));
        ttl2.left(90);
	    ttl2.forward(75);
	    ttl2.right(125);
	    ttl2.forward(75);
	    pop();

        // Right ear
        push();
        translate(335, 125);
        rotate(radians(angle3));
	    ttl3.left(90);
	    ttl3.forward(75);
	    ttl3.left(125);
	    ttl3.forward(75);
	    pop();
	    angle3 = angle3 + 5;

        // Whiskers
        push();
        translate(245, 260);
        rotate(radians(angle2));
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(10);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.right(10);
        ttl4.forward(50);
        ttl4.penUp();

        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(180);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(170);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(190);
        ttl4.forward(50);
        ttl4.penUp();
        pop();
        angle2 = angle2 + 5;
    } else { // Sets unmoving cat face if the mouse is not on the canvas
    	var ttl1 = makeTurtle(0, 0);
	    var ttl2 = makeTurtle(0, 0);
	    var ttl3 = makeTurtle(0, 0);
	    var ttl4 = makeTurtle(0, 0);
	    ttl1.setColor('orange');
	    ttl2.setColor('orange');
	    ttl3.setColor('orange');
	    ttl4.setColor(255);
	    ttl1.setWeight(10);
	    ttl2.setWeight(10);
	    ttl3.setWeight(10);
	    ttl4.setWeight(5);
	    ttl1.penDown();
	    ttl2.penDown();
	    ttl3.penDown();
	    ttl4.penDown();
        
        // Cat head
        push();
        translate(220, 380);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
        pop();

        // Left ear
        push();
        translate(155, 125);
        ttl2.left(90);
	    ttl2.forward(75);
	    ttl2.right(125);
	    ttl2.forward(75);
        pop();

        // Right ear
        push();
        translate(335, 125);
	    ttl3.left(90);
	    ttl3.forward(75);
	    ttl3.left(125);
	    ttl3.forward(75);
        pop();

        // Whiskers
        push();
        translate(245, 260);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(10);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.right(10);
        ttl4.forward(50);
        ttl4.penUp();

        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(180);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(170);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(190);
        ttl4.forward(50);
        ttl4.penUp();
        pop();
    }
}

function turtleLeft(d) {
    this.angle -= d;
}
 
 
function turtleRight(d) {
    this.angle += d;
}
 
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
 
function turtleBack(p) {
    this.forward(-p);
}
 
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I decided for this project I would use turtles to create a cat. I found it interesting that with lines I was still able to make circular shapes such as the head of the cat. In addition I decided to mess around with the rotation function to make the cat seems to break apart when the mouse is on the canvas. However, once the mouse is off the campus, the image would return to its original cat face.

Kyle Leve-LO-Week-11

A piece of sound art that I discovered is called The 40 Part Motet by Janet Cardiff. This project uses 40 different speakers to play 40 different parts of the piece Spem in Alium by Thomas Tallis. The piece is originally very simple however this project makes the piece much more complex. The voices relate to each other in ways that are a lot less apparent in the original versions. What I find inspirational about this project is that Cardiff was able to take a piece of music created in the 16th Century and apply today’s advancements in technology to create something emotional and spiritual. This demonstrates how past and present can be combined to create something that can relate to everyone.

Video explaining the piece

The piece

 

Kyle Leve-Project-10-Landscape

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-10-Landscape

var img1;
var img2;
var snowman = [];
var terSpeed1 = 0.0002;
var terDetail1 = 0.01;
var terSpeed2 = 0.00025;
var terDetail2 = 0.005;
var terSpeed3 = 0.0003;
var terDetail3 = 0.0001;

// Loads ski guy and snowman images
function preload() {
	img1 = loadImage('https://i.imgur.com/9Bjj5oY.jpg');
	img2 = loadImage('https://i.imgur.com/6UIcB6H.jpg');
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
	background('indigo');

    // Dark blue mountains
	fill(0, 20, 70);
	beginShape();
	vertex(0, height);
	for (var x = 0; x < width; x++) {
		var z = (x * terDetail1) + (millis() * terSpeed1);
	    var y = map(noise(z), 0, 1, 0, height/3);
		vertex(x, y);
	}
	vertex(width, height);
	endShape();

    // Lighter blue mountains
	fill(0, 20, 120);
	beginShape();
	vertex(0, height);
	for (t = 0; t < width; t++) {
		var s = (t * terDetail2) + (millis() * terSpeed2);
	    var r = map(noise(s), 0, 1, 0, height - 100);
		vertex(t, r);
	}
	vertex(width, height);
	endShape();

    // Snow hill
	fill(255);
	beginShape();
	vertex(0, height);
	for (a = 0; a < width; a++) {
		var b = (a * terDetail3) + (millis() * terSpeed3);
	    var c = map(noise(b), 0, 0.75, 0, height - 70);
		vertex(a, c);
	}
	vertex(width, height);
	endShape();

    // Ski guy image
    noStroke();
	image(img1, 20, c + 40, 70, 70);

    displaySnowman();
    removeSnowman();
    newSnowman(); 
}

// To show the snowman
function displaySnowman() { 
    for (var i = 0; i < snowman.length; i++){
        snowman[i].move();
        snowman[i].display();
    }
}

// Removes any snowmen that go off the screen
function removeSnowman() {
    var keepSnowman = [];
    for (var i = 0; i < snowman.length; i++){
        if (snowman[i].x + snowman[i].breadth > 0) {
            keepSnowman.push(snowman[i]);
        }
    }
    snowman = keepSnowman;
}

// Creates snowmen
function newSnowman() {
    var snowmanChance = 0.0005; 
    if (random(0.1) < snowmanChance) {
        snowman.push(makeSnowman(width));
    }
}

// Moves snowmen
function snowmanMove() {
    this.x += this.speed;
}

// Calls the snowman image    
function snowmanDisplay() {
    var b = (a * terDetail3) + (millis() * terSpeed3);
    var c = map(noise(b), 0, 0.75, 0, height - 70); 
    noStroke();
    push();
    translate(this.x, height - 100);
    image(img2, 10, 0, 70, 100);
    pop();
}

// Sets the location of the snowman and moves it across the screen
function makeSnowman(LocationX) {
    var snow = {x: LocationX,
                breadth: 50,
                speed: -20.0,
                move: snowmanMove,
                display: snowmanDisplay}
    return snow;
}

I found this project to be very fun because it allowed me to create a scene even if it just repeated itself. I decided to create a winter scene with a guy skiing and some snowmen. I used the snowmen as an object that would randomly generate itself as the scene continued.

Kyle Leve-LO-Week-10

A woman that I discovered in the field of interactive artwork is Caroline Record. A project that she did during her time as a student at Carnegie Mellon University was assisting with the “Very Eric Carle” exhibit at the Children’s Museum. As a part of a four-student team called Click’d, Record worked to create an interactive exhibit that both children and adults could enjoy. What they created was an interactive play area based off Eric Carle’s most famous book “A Very Hungry Caterpillar.” This play area had different components such as grass, rocks, and hills that the children could play on and depending on their interactions with the landscape, the landscape would have different sounds. I admire how this project was done in a way that focused on creating a real-life version of a popular children’s book. I like how the play area considers of many different interactions and it seems like there is a lot to do even though it is a limited space. It was also interesting to study a project that is so close to me!

Link to project and video: https://carolinerecord.com/clickd/

Kyle Leve-Project-09-Portrait-Section A

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-09-Portrait

var img;

function preload() {
	var myImage = "https://i.imgur.com/lsBIvvW.jpg"; // Variable for image
	img = loadImage(myImage); // Loads image
}

function setup() {
    createCanvas(480, 480);
    background(220);
    img.loadPixels(); // Calls image
    imageMode(CENTER);
    frameRate(500);
}

function draw() {
	var x = constrain(floor(random(width)), 0, width-1); // Randomizes x position of pixels
	var y = constrain(floor(random(height)), 0, height-1); // Randomizes y position of pixels

    noStroke();
	var clr = img.get(x, y); // Gets colors from image for pixels
	fill(clr);
	rect(x, y, 10, 10); // Draws image using rectangles
}

I found this project to be really fun because it allowed me to apply something from my life into my code. The image that is being created is of my friend Sara in hot dog costume while we were taking a trip to target. The one problem I faced was originally the image was too big so only a quarter of the image was being displayed. However, I went back to the image and edited it to a smaller size and that fixed the issue.


Original image


Nearly completed replication

Kyle Leve-LO-Week-09

A previous report that I looked at that I found interesting was Sara Frankel’s Week 3 Looking Outwards about the first 3D printed violin. As she said, “This project harmonizes the art of code and music together.” I found it amazing that someone was able to play something made by a machine with just as much emotion and expression as a man-made instrument. However, I also noticed some different aspects in the tone of the 3D-printed violin that makes it have its own unique sound. I noticed there were even instances where I thought a guitar was playing! Many different algorithms were put into the fabrication of this instrument, and the machine had to be programmed to act like a human was making the instrument. I find this project very inspirational because it demonstrates the many different mediums of music, and that music can be played in many different fashions.

The world’s first 3D printed violin (from Sara’s Looking Outwards)

Kyle Leve-LO-Week-08

Jake Barton is one of the founders of the company Local Projects which is a media-design firm for museums and public spaces. Barton’s company has worked on various projects around the world such as the Beijing 2008 Olympics, media designs for the New York City Visitors Information Center, and the World Trade Center. However, the video that I watched discusses his project titled “Like Falling in Love.” Throughout his discussion, Barton talks about the different ways people view things especially if it is for the first time. This translates into what Local Projects does in that it strives to create an atmosphere that all people can find comforting and enjoyable. Barton mentions how artwork is a language used to communicate a message and an atmosphere to people. I feel that this can be applied to all forms of art. No matter the art form, whether it be music, design, architecture or anything else, it strives to convey a certain feeling or emotion. One slide that was shown in the presentation that caught my attention was the quote “Styles change but human emotions are timeless and universal.” This quote inspires me to continue down my path, because as a musician, even though job opportunities look bleak, there will always be human emotions and there will always be an audience that wants to feel something.

https://vimeo.com/channels/eyeo2012

http://localprojects.com/about

 

Gallery One, found at the Cleveland Museum of Art, is an interactive project conducted my Local Projects that made the art exhibit more technological and interactive.