//Shannon Case
//Section D
//scase@andrew.cmu.edu
//final project
var eye = [];
var eyeframes = [];
var jar = [];
var jarframes = [];
var fish = [];
var fishframes = [];
var fl = [];
var flframes = [];
var tummy = [];
var tummyframes = [];
var bubbles = [];
var bubblesframes = [];
var pows = [];
var powsframes = [];
var cigs = [];
var cigsframes = [];
var lips = [];
var lipsframes = [];
var swirl = [];
var swirlframes = [];
var word = [];
var wordframes = [];
//global variables for the arrays to store all of my images
var index;
var index2;
var index3;
var index4;
var index5;
var index6;
var index7;
var index8;
var index9;
var index10;
var index11;
//create index to display images
var s1;
var s2;
var s3;
var s4;
var s5;
var s6;
var s7;
var s8;
var s9;
var s10;
var s11;
//variables for each sound
function preload(){
s1 = loadSound("audio/sound1.ogg");
s2 = loadSound("audio/sound2.ogg");
s3 = loadSound("audio/sound3.ogg");
s4 = loadSound("audio/poppopPOP.ogg");
s5 = loadSound("audio/sound4.wav");
s6 = loadSound("audio/sound6.wav");
s7 = loadSound("audio/sound7.wav");
s8 = loadSound("audio/sound8.wav");
s9 = loadSound("audio/sound9.wav");
s10 = loadSound("audio/sound10.wav");
s11 = loadSound("audio/sound11.wav");
myLoop = loadSound("audio/bgsound.ogg");
//load sounds
eye[0]="images/eye1.png";
eye[1]="images/eye2.png";
eye[2]="images/eye3.png";
eye[3]="images/eye4.png";
eye[4]="images/eye5.png";
eye[5]="images/eye6.png";
eye[6]="images/eye7.png";
eye[7]="images/eye8.png";
jar[0]="images/jar1.png";
jar[1]="images/jar2.png";
jar[2]="images/jar1 2.png";
jar[3]="images/jar2 2.png";
jar[4]="images/jar1 3.png";
jar[5]="images/jar2 3.png";
jar[6]="images/jar1 4.png";
jar[7]="images/jar1 4.png";
fish[0]="images/fish1.png";
fish[1]="images/fish2.png";
fish[2]="images/fish3.png";
fish[3]="images/fish4.png";
fish[4]="images/fish5.png";
fish[5]="images/fish3.png";
fish[6]="images/fish7.png";
fish[7]="images/fish8.png";
fl[0]="images/f1.png";
fl[1]="images/f2.png";
fl[2]="images/f3.png";
fl[3]="images/f4.png";
fl[4]="images/f5.png";
fl[5]="images/f6.png";
fl[6]="images/f7.png";
fl[7]="images/f8.png";
tummy[0]="images/tummy1.png";
tummy[1]="images/tummy2.png";
tummy[2]="images/tummy3.png";
tummy[3]="images/tummy4.png";
tummy[4]="images/tummy5.png";
tummy[5]="images/tummy6.png";
tummy[6]="images/tummy7.png";
tummy[7]="images/tummy8.png";
bubbles[0]="images/bubbles1.png";
bubbles[1]="images/bubbles2.png";
bubbles[2]="images/bubbles3.png";
bubbles[3]="images/bubbles4.png";
bubbles[4]="images/bubbles5.png";
bubbles[5]="images/bubbles6.png";
bubbles[6]="images/bubbles7.png";
bubbles[7]="images/bubbles8.png";
pows[0]="images/pow1.png";
pows[1]="images/pow2.png";
pows[2]="images/pow3.png";
pows[3]="images/pow4.png";
pows[4]="images/pow5.png";
pows[5]="images/pow6.png";
pows[6]="images/pow7.png";
pows[7]="images/pow8.png";
cigs[0]="images/cig1.png";
cigs[1]="images/cig2.png";
cigs[2]="images/cig3.png";
cigs[3]="images/cig4.png";
cigs[4]="images/cig5.png";
cigs[5]="images/cig6.png";
cigs[6]="images/cig7.png";
cigs[7]="images/cig8.png";
lips[0]="images/lips1.png";
lips[1]="images/lips2.png";
lips[2]="images/lips3.png";
lips[3]="images/lips4.png";
lips[4]="images/lips5.png";
lips[5]="images/lips6.png";
lips[6]="images/lips7.png";
lips[7]="images/lips8.png";
swirl[0]="images/swirl1.png";
swirl[1]="images/swirl2.png";
swirl[2]="images/swirl3.png";
swirl[3]="images/swirl4.png";
swirl[4]="images/swirl5.png";
swirl[5]="images/swirl6.png";
swirl[6]="images/swirl7.png";
swirl[7]="images/swirl8.png";
word[0]="images/word1.png";
word[1]="images/word2.png";
word[2]="images/word3.png";
word[3]="images/word4.png";
word[4]="images/word5.png";
word[5]="images/word6.png";
word[6]="images/word7.png";
word[7]="images/word8.png";
//load all the images
for(var a = 0; a<8; a++){
eyeframes[a] = loadImage(eye[a]);
}
for(var b = 0; b<8; b++){
jarframes[b] = loadImage(jar[b]);
}
for(var c = 0; c<8; c++){
fishframes[c] = loadImage(fish[c]);
}
for(var d = 0; d<8; d++){
flframes[d] = loadImage(fl[d]);
}
for(var e = 0; e<8; e++){
tummyframes[e] = loadImage(tummy[e]);
}
for(var f = 0; f<8; f++){
bubblesframes[f] = loadImage(bubbles[f]);
}
for(var g = 0; g<8; g++){
powsframes[g] = loadImage(pows[g]);
}
for(var h = 0; h<8; h++){
cigsframes[h] = loadImage(cigs[h]);
}
for(var i = 0; i<8; i++){
lipsframes[i] = loadImage(lips[i]);
}
for(var j = 0; j<8; j++){
swirlframes[j] = loadImage(swirl[j]);
}
for(var k = 0; k<8; k++){
wordframes[k] = loadImage(word[k]);
}
//put all the images into arrays
}
function setup() {
createCanvas(windowWidth,windowHeight);
myLoop.loop(); //play background sound
background(0,0,80);
imageMode(CENTER);
frameRate(10); //set frame rate for the animations
}
function draw() {
background(0,0,80); //refresh background to play through animations
index++;
if(index < eyeframes.length)
image(eyeframes[index], width/2, height/2, eyeframes[index].width/2, eyeframes[index].height/2);
index2++;
if(index2 < jarframes.length)
image(jarframes[index2], width/2, height/2, jarframes[index2].width/2, jarframes[index2].height/2);
index3++;
if(index3 < fishframes.length)
image(fishframes[index3], width/2, height/2, fishframes[index3].width/5, fishframes[index3].height/5);
index4++;
if(index4 < flframes.length)
image(flframes[index4], width/2, height/2, flframes[index4].width/3, flframes[index4].height/3);
index5++;
if(index5 < tummyframes.length)
image(tummyframes[index5], width/2, height/2, tummyframes[index5].width/3, tummyframes[index5].height/3);
index6++;
if(index6 < bubblesframes.length)
image(bubblesframes[index6], width/2, height/2, bubblesframes[index6].width/3, bubblesframes[index6].height/3);
index7++;
if(index7 < powsframes.length)
image(powsframes[index7], width/2, height/2, powsframes[index7].width/3, powsframes[index7].height/3);
index8++;
if(index8 < cigsframes.length)
image(cigsframes[index8], width/2, height/2, cigsframes[index8].width/3, cigsframes[index8].height/3);
index9++;
if(index9 < lipsframes.length)
image(lipsframes[index9], width/2, height/2, lipsframes[index9].width/2, lipsframes[index9].height/2);
index10++;
if(index10 < swirlframes.length)
image(swirlframes[index10], width/2, height/2, swirlframes[index10].width/2, swirlframes[index10].height/2);
index11++;
if(index11 < swirlframes.length)
image(wordframes[index11], width/2, height/2, wordframes[index11].width/2, wordframes[index11].height/2);
//plays each image if its index is set to 0
}
function keyPressed(){
if(key==="A"){
s2.pause();
s3.pause();
s4.pause();
s1.play();
index=0;
}
if(key==="B"){
s1.pause();
s3.pause();
s4.pause();
s2.play();
index2 = 0;
}
if(key==="C"){
s1.pause();
s2.pause();
s4.pause();
s3.play();
index3 = 0;
}
if(key==="D"){
s1.pause();
s2.pause();
s3.pause();
s4.play();
index4 = 0;
}
if(key==="E"){
s1.pause();
s2.pause();
s3.pause();
s5.play();
index5 = 0;
}
if(key==="F"){
s1.pause();
s2.pause();
s3.pause();
s6.play();
index6 = 0;
}
if(key==="G"){
s1.pause();
s2.pause();
s3.pause();
s7.play();
index7 = 0;
}
if(key==="H"){
s1.pause();
s2.pause();
s3.pause();
s8.play();
index8 = 0;
}
if(key==="I"){
s1.pause();
s2.pause();
s3.pause();
s10.play();
index9 = 0;
}
if(key==="J"){
s1.pause();
s2.pause();
s3.pause();
s9.play();
index10 = 0;
}
if(key==="K"){
s1.pause();
s2.pause();
s3.pause();
s11.play();
index11 = 0;
}
// if the key is pressed for a certain image, this sets the image index to 0, and plays the animation
}
For my final project I chose to do a series of short animations and sounds. I wanted to hand draw each of these animations to contrast with the digital way that they are presented. I spend a lot of time drawing each frame for these animations, and then I edited the frames in photoshop so that they would fit into my code. If you press on any keyboard letter A-K, an animation and sound will play. I really struggled to get the animations to play at first, but once I figured out how to play each one separately as related to a key I spent the most amount of time drawing each animation and editing them in photoshop, and recording/editing sounds .
All of the images in my project were created by me. Most of the sounds were things that I recorded using my iPhone, and a few were dowloaded from Freesound.org. I used Audacity to edit all the sounds so that they matched with my animations.
I have to include a link to download my file, as I have over 100 files in my assets folders and they exceed the maximum file size for a wordpress post. It takes a few seconds for all these assets to load. Also my project needs a local server to run.
Here is an example of one of the animations, but it’s really hard to screenshot these short animations so I would definitely recommend downloading it and trying it yourself 🙂
]]>For my final project I would like to make an interactive animation. I would like to draw images and create different short animations when different keys are pressed. I would like to also incorporate sounds for when these images are played, and maybe have some interactions with the mouse if time allows.
I am thinking of creating different animations with different sounds similar to the keyboard example you gave, but I would like to combine this sound element with hand drawn elements. I think it would be really interesting to juxtapose the hand drawn with the computer generated.
I am also considering making this into some sort of game, but I haven’t really thought much about this yet and would like to just try and get the animations done and working first.
I have already started on a few series of drawings, like the one below:
//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 11
function setup() {
createCanvas(600, 600);
background('#230133');
}
function draw() {
background('#230133');
var rot = map(mouseY, 0, width, 130, 137.507764);
var turtle = makeTurtle(width/2, height/2); //center turtle
var turtle2 = makeTurtle(width/2, height/2);
var turtle3 = makeTurtle(width/2, height/2);
if (mouseX < 200){
turtle.penDown();
turtle.setColor('#7100a5'); //purple turtle
for (var i = 0; i < 300; i++) { //draw many turtles
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
//draw the hexagons
turtle.penUp(); //stop drawing
turtle.forward(i); //move out by incriment
turtle.left(rot); //move around the golden angle
turtle.penDown(); //draw again
}
}
else if ( mouseX > 200 & mouseX < 400){
turtle2.penDown();
turtle2.setColor('#d09de8');
for (var i = 0; i < 400; i++) { //draw many turtles
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
//draw the hexagons
turtle2.penUp(); //stop drawing
turtle2.forward(i); //move out by incriment
turtle2.left(rot); //move around the golden angle
turtle2.penDown(); //draw again
}
}
else if ( mouseX > 400 & mouseX < 600){
turtle3.penDown();
turtle3.setColor('#e4dce8');
for (var i = 0; i < 500; i++) { //draw many turtles
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
//draw the hexagons
turtle3.penUp(); //stop drawing
turtle3.forward(i); //move out by incriment
turtle3.left(rot); //move around the golden angle
turtle3.penDown(); //draw again
}
}
}
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;}
For this project I chose to work with the golden ratio turtle graphic that we did for the last assignment. I thought it would be cool to map this to the mouse Y positions to create different spirals. I then made three different turtles so that as you move across the mouse X positions you can play with varied sizes of turtle spirals.
I researched a project by Dr. Vinod Vidwans, a professor of New Media, Creativity and Innovation based in India. His research work is an effort to take explorations in computer music a step ahead. It tries to explore the possibility of computer generated Indian music (computational music) using Artificial Intelligence. He has developed a Computational Theory of Indian Classical Music, and has put together a way to synthesize a Bandish (a musical composition) in a given Raga and renders it in a traditional style. The system works on its own to generate these songs without human intervention. I think the creators artistic sensibilities are shown in that he is representing his cultural heritage through developing a historical style in a new media.
I couldn’t figure out how to embed an mp3 file, so here is a link to one of his works, and there are many more listed on his website.
]]>For this project I chose to generate a landscape of grass that is supposed to look like it is blowing in the wind. I was inspired when I was laying in the park and looking at the nature around me.
var grass = [];
function setup() {
createCanvas(640, 240);
// create an initial collection of grass
for (var i = 0; i < 100; i++){
var rx = random(width);
grass[i] = makeGrass(rx);
}
frameRate(10);
}
function draw() {
background("#badddc");
updateAndDisplayGrass();
removeGrassThatHaveSlippedOutOfView();
addNewGrassWithSomeRandomProbability();
}
function updateAndDisplayGrass(){
// Update the building's positions, and display them.
for (var i = 0; i < grass.length; i++){
grass[i].move();
grass[i].display();
}
}
function removeGrassThatHaveSlippedOutOfView(){
var GrassToKeep = [];
for (var i = 0; i < grass.length; i++){
if (grass[i].x + grass[i].breadth > 0) {
GrassToKeep.push(grass[i]);
}
}
grass = GrassToKeep; // remember the surviving grass
}
function addNewGrassWithSomeRandomProbability() {
// With a very tiny probability, add a new grass to the end.
var newGrassLikelihood = 0.17;
if (random(0,1) < newGrassLikelihood) {
grass.push(makeGrass(width));
}
}
// method to update position of the grass every frame
function grassMove() {
this.x += this.speed;
}
//draw some grass
function grassDisplay() {
var GrassHeight = 20;
var bHeight = this.nGrass * GrassHeight;
fill(255);
stroke(0);
push();
translate(this.x, height - 40);
fill('green');
noStroke();
triangle(0, -bHeight + random(20), this.breadth, bHeight, this.breadth/2, bHeight/2);
fill("#48703d");
triangle(0, -bHeight, this.breadth+random(10,20), bHeight, this.breadth/2, bHeight/2);
pop();
}
function makeGrass(birthLocationX) {
var Grass = {x: birthLocationX,
breadth: 50,
speed: -1.0,
nGrass: round(random(2,8)),
move: grassMove,
display: grassDisplay}
return Grass;
}
]]>This week I would like to discuss a project by Stacey Mulcahy. She has taught at both in academic programs such as the Interactive Multimedia Program at Algonquin College and the BIT program at Carleton, as well as taught workshops in the industry. She is interested in coding and physical computing.
In a 2014 project called “TweetHeart“, she created a big light up heart that was connected to her Twitter account. She wanted to create something that made a more physical representation of the “love” she was feeling when she got likes and shares on her posts. I like this project because it was really inspiring for me to see her working with all the different elements of the project herself. She did everything from learning how to use a laser cutter to build the box to putting together the lights to coding the actual program. I found this really inspiring to see her doing all the work by herself.
Here is a video of the project in action
]]>For my project I chose to do a portrait of my roommate sticking her tongue out. I used triangles to represent her because this is her favorite shape and we both agreed that the aesthetic of this is better because its more varied than ellipses and rectangles or lines. As the project evolves it fills in to reveal the picture. sketch
var underlyingImage;
function preload() {
var myImageURL = "http://i.imgur.com/TPZ3heW.jpg";
underlyingImage = loadImage(myImageURL);
}
function setup() {
createCanvas(500, 500);
background(0);
underlyingImage.loadPixels();
}
function draw() {
var px = random(width);
var py = random(height);
var ix = constrain(floor(px), 0, width-1);
var iy = constrain(floor(py), 0, height-1);
var theColorAtLocationXY = underlyingImage.get(ix, iy);
var point2 = random(40);
var point3 = random(60); //sets variables for the triangle points
noStroke();
fill(theColorAtLocationXY);
triangle(px, py, px + point2, py + point2, px + point2/2, py +point3);
//draws the image in varrying sizes of triangles
}
I chose to look at Cedes’ week 6 post about Jean Tinguely‘s work. She focused on his Drawing Machines, which are moving sculptures that he created with the intention of producing drawings. These drawings were abstract and a bit rough but maintained a rhythm created by the machine. I agree with Cedes about the point she makes that there is a “juxtaposition of using a machine (witch is often associated with precision) to create these un-precise images”, but for me this is not the most interesting aspect of his work. I enjoy both his works that create drawings and his works that are purely performative/moving sculptures.
I think that the Drawing Machine work is most interesting because it functions on many different levels. There are aspects of performance work and sculpture as well as drawing. The machines themselves are beautiful to look at, as well as the products that some of them create. The performance of the work is the most interesting to me, especially in the video clips where you can see the shadows of the work dancing on the walls.
(You have to actually go to Vimeo to watch the video due to the privacy settings)
]]>
Kate Hollenbach is a product designer at a company called Oblong. She studied computer science in college and then was working on her MFA when she joined Oblong. She would describe what they do at Oblong as “gestural and spatial interactions in products and installations”.
The work that they do is based in data visualization using very complex hardware called g-speak that can identify hand poses and track hands in a 3D space. This means that it can track what motions your hand is doing as well as where in the space it is – for example grabbing and dragging. There is even ability for multiple people to interact within the same space. These projects are not only for artistic purposes, but also have useful applications for businesses.
The presentation is given really well, with examples coming up on the screen as she explains what the technology is doing. I think this is a really nice way to present because otherwise, even though she verbally explains how things work, the viewer might not understand what she means. The visuals allow for the viewer to better comprehend what she is talking about and also gain insight into the project.
]]>
//Shannon Case
//Section D
//scase@andrew.cmu.edu
//assignment 07-A
var nPoints = 100;
//var valE = 2.718; // This is the value of # 'e'
function setup() {
createCanvas(400, 400);
frameRate(10);
}
function draw() {
// draw the frame
fill((mouseY/height)*100,(mouseY/height)*200,(mouseY/height)*255);
rect(0, 0, width-1, height-1);
// draw the curve
push();
translate(width / 2, height / 2);
drawEllipseEvoluteCurve();
pop();
}
function drawEllipseEvoluteCurve() {
// Ellipse Evolute
// http://mathworld.wolfram.com/EllipseEvolute.html
var x;
var y;
var a = constrain((mouseX / width), 0.1, 0.5);
var b = constrain((mouseY / height), 0.1, 0.5);
fill((mouseX/width)*255,(mouseX/width)*100,(mouseX/width)*255);
strokeWeight(5);
stroke((mouseX/width)*200,(mouseX/width)*55,(mouseX/width)*255);
beginShape();
for(var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = ((Math.pow(a+(mouseX/45), 2) - Math.pow(b, 2)) / a * (Math.pow(cos(t), 3)));
y = ((Math.pow(b+(mouseY/48), 2) - Math.pow(a, 2)) / b * (Math.pow(sin(t), 3)));
vertex(x, y);
}
endShape(CLOSE);
}
For this project I really struggled with choosing a curve that worked. I chose a bunch that weren’t really able to move well with both the x and y values, but eventually decided on the Ellipse Evolute because it was more easily able to stretch and shrink with my mouseX and mouseY. I chose to have the background color evolve with the mouseY values and the color of the shape change with the mouseX values.
]]>