Month: November 2016

Final Project Proposal – Simin Li

For the final project, I want to make an interactive animation. I have always loved gardening games because of the joy of harvesting and would like to make one myself. The player would be asked to plant one seed in the soil. Then with each attempt to water the plant the seed would grow leaves and eventually fruit of their own. The number and distribution of leaves and fruit would be generated randomly while following the rules of nature like having more leaves than fruit and not cramming too many leaves on one branch. The extent to which the plant grows will depend on how many times it is watered, but watering the plant too much would cause a sudden and unexpected death. The amount of times of watering that would kill the plant is random and different each time. So it is kind of like a betting game: you want to water the plant as much as possible, but it is up to the player to decide when it might be dangerous to keep watering. Keep your current plant or have a dead one. After you have decided to stop watering, it is harvesting season. The player clicks on a button called “Harvest!” and  can harvest the fruit by clicking on the fruit and the number of fruit harvested will be displayed on the screen.

file_000

Diana Connolly – Project 12 Proposal

For my final project, I am thinking of making an interactive computer game. Back when I was in middle school, I remember spending a lot of time playing this one game where you were playing as a scuba diver or jet-packer, and had to use the up and down keyboard buttons to avoid hitting cliffs that were above and below you. I couldn’t find this game when I was searching it online, but I want to create something like this. I will use similar code to that of the planting the flag assignment to make the cliffs continuously and randomly generate, as if they are passing by the camera. For making the game restart when the user hits a cliff, I will have to record the location of the jet-packer with relation to the cliffs’ edge locations (will need some advice for how to do this). Below is a drawing of what I want this to look like:

fullsizerender

looking outward

1
his project created by Mark Wheeler is generated by integrating computational music data and visual graphics. It is a performance that shows how the soundtrack could control the world as well as how the outside could affect sound interactively.


The performance setup uses two synths, a monome running Mark Eats’ own Sequencer app and another monome controlling Ableton Live. These instruments connect via MIDI over wifi to a second laptop running a custom openFrameworks app that produces the visuals. Ableton Live and MidiPipe handle the routing. The visuals software was built using openFrameworks and operates much like a game engine. A map is created with rules for traffic flow, junctions and traffic lights. The simulation could thus visualize people’s behavior by manipulating the sound. By this project, not only the computational music got known by more general people, but It also give this kind of music a more functionalism position than it is before.

sajohnso-project 11

turtleart


/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project 11
*/

var t1, t2, t3, t4;
function setup() {
    createCanvas(400, 400);
        background('white');

    t1 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    t2 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    t3 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    t4 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));

    t1.setColor('#C7E094');
    t2.setColor('#4B845C');
    t3.setColor('#4B845C');
    t4.setColor('#4B845C');

    t2.setWeight(6);
    t3.setWeight(7);
    t4.setWeight(8);

    frameRate(80);
}
 
function draw() {
            background('white');
    turtleDesign(t1.x,t1.y);
    t1.forward(1);
    t2.forward(1.3);
    t3.forward(1.6);
    t4.forward(1.9);
    var targetX = mouseX;
    var targetY = mouseY;
    t1.turnToward(targetX, targetY, 1);
    t2.turnToward(targetX, targetY, 1.3);
    t3.turnToward(targetX, targetY, 1.6);
    t4.turnToward(targetX, targetY, 2);
   // t1.left(random(-5, 5));
}

function turtleDesign(turtleX, turtleY) {
    var shellWidth = 30;
    var shellHeight = 35;

    //draw the turtle's head
    stroke('#8BCA79');
    fill('#8BCA79'); //dark green
    ellipse(turtleX, turtleY-22, 15, 20);

        //draw the turtle's limbs
    strokeWeight(9);
    stroke('#8BCA79'); //dark green
    line(turtleX, turtleY, turtleX+17, turtleY-17); //front right leg
    line(turtleX, turtleY, turtleX-17, turtleY+17);//back left leg
    line(turtleX, turtleY, turtleX+17, turtleY+17); //back right leg
    line(turtleX, turtleY, turtleX-17, turtleY-17); //front left leg

    //draw the turtle's shell
    strokeWeight(4);
    stroke('#C7E094'); //light green
    ellipse(turtleX, turtleY, shellWidth, shellHeight);

    //design on the turtle's shell
    quad(turtleX-5, turtleY, turtleX, turtleY+5, turtleX+5, turtleY, turtleX, turtleY-5);
    strokeWeight(2);
    line(turtleX-5, turtleY, turtleX-(shellWidth/2), turtleY);
    line(turtleX, turtleY-5, turtleX, turtleY-(shellWidth/2));
    line(turtleX+5, turtleY, turtleX+(shellWidth/2), turtleY);
    line(turtleX, turtleY+5, turtleX, turtleY+(shellWidth/2));

    //draw the turtle's eyes
    noStroke();
    fill('#4B845C');//darkest green
    ellipse(turtleX-4, turtleY-25, 3, 3);
    ellipse(turtleX+4, turtleY-25, 3, 3);

}


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;}

project 11

sketch

//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a 
//project 11


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

    frameRate(10);
}

function draw() {

    for (var i=0;i<30;i++) {
        strokeWeight(15);
        stroke(220-i);
        line(0,i*15,width,i*15);
    }//background color

    push();
    var turtle = makeTurtle(0, 45);
    turtle.penDown();
    turtle.setColor(255);
    turtle.setWeight(3);
    strokeJoin(MITER);
     strokeCap(PROJECT);
    var i = 0;
    while ( i < width) {
        i++;
        turtle.left(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(30);
        turtle.right(90);
        turtle.forward(20);
        turtle.right(90);
        turtle.forward(10);
        turtle.right(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(20);
        turtle.left(90);
        turtle.forward(30);
        turtle.left(90);
        turtle.forward(40);

    }
    noLoop();
    turtle.penUp();
    pop();//upper frame

    push();
    var turtle = makeTurtle(0, height-5);
    turtle.penDown();
    turtle.setColor(255);
    turtle.setWeight(3);
    strokeJoin(MITER);
     strokeCap(PROJECT);
    var i = 0;
    while ( i < width) {
        i++;
        turtle.left(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(30);
        turtle.right(90);
        turtle.forward(20);
        turtle.right(90);
        turtle.forward(10);
        turtle.right(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(20);
        turtle.left(90);
        turtle.forward(30);
        turtle.left(90);
        turtle.forward(40);

    }
    noLoop();
    turtle.penUp();
    pop();//bottom frame
    
    
}

function mousePressed()  {
    var turtle = makeTurtle(mouseX, mouseY);
    turtle.penDown();
    turtle.setColor(255);
    for (var i = 0; i < 20; i++) {
        turtle.forward(50);
        turtle.right(137.5);
        turtle.forward(50); 
    }
    turtlePenUp();
    //make random turtles

}



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 tried to use turtle to create some abstract graphic that could interact with mouse motion. I use the turtle to make frames and another turtle to follow the mouse movement. whenever the mouse is pressed, a new turtle is drawn.

%e5%be%ae%e4%bf%a1%e6%88%aa%e5%9b%be_20161112235419

Turtle Composition

This is a doodle of mine that I have doodled in the corners of my notebooks and sketchbooks since my freshman year of high school. I was very excited to be able to doodle it in code!

data-width=’600′ data-height=’400′ index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

data-width=’600′ data-height=’400′ sketch

//Arula Ratnakar
//Section C
//Turtle Composition
//aratnaka@andrew.cmu.edu




function setup() {
	createCanvas(600, 400);
    background(255);
    var turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setColor(0);
    turtle.setWeight (4)
    	turtle.left(90)
    	turtle.forward(145)
    	turtle.right(135)
    	turtle.forward(16)
    	turtle.right(135)
    	turtle.forward(100)
    	turtle.right(90)
    	turtle.forward(16)
    	turtle.right(90)
    	turtle.forward(16)
    	turtle.right(90)
    	turtle.forward(75)
    	turtle.right(135)
    	turtle.forward(16)
    	turtle.right(135)
    	turtle.forward(150)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(100)
    	turtle.left(135)
    	turtle.forward(16)
    	turtle.left(135)
    	turtle.forward(11.313708499)
    	turtle.forward(63.686291501)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(20)
    	turtle.forward(120)

    turtle.penUp()


   
    
}

function draw() {
	
}

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;}

Looking Outwards-11

The website touchpianist.com is a really fun website in which you can “play” songs using a single key on your keyboard and view notes that are abstracted as lights in front of you on your browser page. I admire the mesmerizing way in which the lights appear on the html canvas, and the fact that you can tailor the songs to speeds of your choosing.

touchpianist.com uses an HTML canvas to display the lights, and WebAudio to play the songs.
Batuhan Bozkurt is both a musician and a creative coder, and he combined these two talents to create the website by playing all the songs, and then coding the setup itself.

touchpianist.com was created by Batuhan Bozkurt in May 2015.

AndrewWang-Project-11

sketch

var myTurtles = [];
var img;
function preload(){
    img = loadImage("https://i.imgur.com/eQWbexS.png");
}
function setup() {
    createCanvas(600, 400);
    var turtle = new makeTurtle(width/2, height/2);
    turtle.setColor("yellow");
    turtle.setWeight(4);
    myTurtles.push(turtle);
    strokeJoin(MITER);
    strokeCap(PROJECT);
   
}
function mousePressed(){
    //creates new turtle on mouse click
    var ranColor = random(0,255);
    px = random(0,width);
    py = random(0,height);
    turtle = new makeTurtle(px,py);
    turtle.setColor('yellow');
    turtle.setWeight(4);
    myTurtles.push(turtle);
}

function draw() {
    //draws image
    background(255);
    image(img, 0, 0, 600, 400);
    //draws firefly 
    for(i=0; i<myTurtles.length; i++){
        myTurtles[i].penDown();
        drawTurtles(myTurtles[i]);
        myTurtles[i].penUp();
    }
}

function drawTurtles(turtle){
    //draws a firefly
    angle = random(-90,90);
    distance = random(0,3);
    turtle.right(angle);
    turtle.forward(distance);
}
////////

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 wanted to replicate the effect of fireflies using the turtles. I made them move randomly and change direction randomly in order to do this over a dark relevant background.

rgriswol_lookingoutwards-11

This Looking Outwards, I decided to focus on what is probably the funniest use of computer music ever: autorap.

Some screenshots of the app in use.
Some screenshots of the app in use.

The autorap app is by Smule, a company that makes mobile apps and is located in San Francisco. It was founded in 2008, by Jeff Smith and Ge Wang, who is a Stanford Ass. Professor. The idea is that you can record yourself speaking/singing/whatever, and it will turn that recording into “”rap.”” I use this term loosely. It really just autotunes whatever you record, but it’s honestly hilarious.

Here’s a video of Ge Wang testing the app, which I highly recommend everyone watch because again, it’s hilarious:

They also have a very pretty graphic moving in the background when you record, which I thought was a nice touch.

project-11

For this project I decided I wanted to play around with how turtles worked and what they could look like, so I didn’t start out with anything specific in mind. I ended up with someone that looks almost like electricity – it reminded me of a plasma globe!

The screenshots of it don’t look very cool, you really have to view it in motion.

This does not look cool.
This does not look cool.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 11
*
*/

var turtles = [];
function setup() {
    var colors =[color(250, 45, 125), color(113, 222, 241),
        color(175, 230, 51), color(183, 140, 255), color(255), color(253, 162, 35)];

    createCanvas(600, 600);

    for(i = 0; i < colors.length; i++){ // creates multiple turtles
        var turt = makeTurtle(width/2,height/2);
        turt.setColor(colors[i]);
        turt.penDown
        turtles.push(turt);
    }
}

function draw() {
    background(0);
    fill(0);
    ellipse(300, 300, 300, 300);

    for(i = 0; i < turtles.length; i++){
        turtles[i].forward(random(50));
        turtles[i].left(random(100));
        turtles[i].forward(random(50));
        turtles[i].right(random(50));
        if(turtles[i].distanceTo(300, 300) > 300){
            turtles[i].goto(300, 300);
        }
    }

   
}

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;}