For my final project I decided to create a two player game. I like anime so I wanted to have Goku from Dragonball Z fight Naruto from Naruto. After I tested out different types of game play, I decided to make the game a battle of who can tap the fastest. The player on the left (Naruto) needs to press the “a” key as fast as they can while the person on the right needs to press the “l” key as fast as they can. As each person presses their respective buttons, each character’s “Battle Bar” should increase. The objective of the game is to have the largest bar by the end of the time limit. If your character wins, the character shall initiate their ultimate move. Unfortunately, I was unable to upload the sketch successfully for some reason even after I changed the .mp3 location to WordPress but I still wanted everyone to be able to see how my code looks as well as the result. I included some screenshots to show a clearer view of how my project looks. The video links are found under them. The first link leads to a video that shows Goku winning, and the second link shows a video of Naruto winning. I tried doing a screen record to make it clearer, but it just slowed my computer down so I am sorry for the bad quality.

GOKU WINS SCREENSHOTS

NARUTO WINS SCREENSHOTS

VIDEO LINKS

Goku Wins

Naruto Wins

//Seth Henry

//sehenry@andrew.cmu.edu

//Tuesdays at 10:30

//Final Project



//Global Variables
var clouds=[];
var img;
var goku;
var naruto;
var gX = 600
var gY = 280
var speed = 15
var speedHover = .5
var dirX= -1
var dirY = -1
var ballX = 10
var xVel = dirX*speed
var yVel = dirY*speedHover
var ballY = 300
var count = 0
var ballSize = 12
var c1;
var c2;
var length1 =20
var gokuY = 180
var stars = []
var star;
var clickCount=0
var narutoXPos = 100
var narutoYPos =205
var movingPoint = 570
var keepGoing;
var sec=0
var enlarge;
var cloneX1 = 400
var cloneY1 = 310
var cloneX2 = 350
var cloneY2 = 310
var cloneX3 = 450
var cloneY3 = 310
var cloneX4 = 380
var cloneY4 = 310
var gokuX = 500
var cloneX5 = 420
var cloneY5 = 100
var cloneX6 = 380
var cloneY6 = 100
var cloneX7 = 400
var cloneY7 = 70
var cloneX8 = 400
var cloneY8 = 130
var explodeSize = 200
var narutoSpeed = 12
var x = [70, 81, 103, 89, 91, 70];
var y = [58, 87, 83, 100, 122, 113];
var grasses = []
var endOfGround = 800
var rockX;
var rockY; 
var rocks = []
var newEdge = 270
var leftEdge = 290

function preload() {
    goku = loadImage("http://i.imgur.com/FwBOhJE.gif"); //loads image goku
    naruto = loadImage("http://i.imgur.com/exGBT3y.gif") //loads image of naruto
    chargeUpGokuSound = loadSound("ChargeUpSound.mp3")
    kamehaSound = loadSound("Kamehah.mp3")
    intenseMusic = loadSound("IntenseMusic.mp3")
    rasenganSound = loadSound("Rasengan.mp3")
    newRasenganSound = loadSound("NewRasengan.mp3")
    cloneSound = loadSound("cloneSound.mp3")
    teleportSound = loadSound("Teleport.mp3")
    narutoSays = loadSound("narutosays.mp3")
    explode = loadImage("http://i.imgur.com/FDzMwny.png")
    explodeSound = loadSound("ExplosionSound.mp3")
    cloneSay = loadSound("N-R-TO.mp3")
    scream = loadSound("AH.mp3")
    gokuScream = loadSound("gokuScream.mp3")
}

function setup() {
    createCanvas(800, 400);
    for(i=0;i<100;i++){ //puts a load of random stars in the sky
        stars.push(new Star(random(800),random(80)))
    } 
    for(i=0;i<5;i++){
        rocks.push(new rock(random(120,600),random(380,400)))
    }

}

function draw() {
    var countDown = 7-sec //countdown
    var gokuHand = gokuY+60 // goku's hand placement
    var nPoints = x.length; 
    c1=color(0)
    c2=color(0,76,153)
   for (var i = -00; i <= height; i++) { //fades the colors from blue to black
        var inter = map(i, 20, 150, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, i, width, i);
    }
    for (var i=20; i>0; i--){ //planet/moon glow in background
        noStroke();
        fill(0,255,255,(10-i)*4);// semi-transparent yellow glow
        ellipse(width/2, (height/2)+400, 900+(10*i), 900+(10*i));
    }
    
    if(frameCount%60==0){ //seconds for countdown
        sec++
    }

    fill(2,0,51)
    if(count>1 && frameCount<480){ //yellow charge up
        gokuAura();             
    }
    if(count>clickCount && frameCount==470){ // plays when naruto gets hit by kamehameha blast
        scream.play(0,0,1);
    }
   if(clickCount>count && frameCount == 830){ //plays when goku gets hit by rasengan attack
        gokuScream.play()
    }
    if(count==2 && frameCount<400){ //plays when Goku starts to charge up
    chargeUpGokuSound.play(0,1,.2,1,8);
    }
    
    noStroke();
    fill(102,0,51)
    rect(0,380,endOfGround,height) // ground
    for(i=0;i<rocks.length;i++){ //draws some jagged rocks on the ground
        rocks[i].draw();
    }
    updateAndDisplayClouds(); //calls cloud function
    removeClouds(); //takes clouds out of the picture
    addRandomClouds(); //random cloud function
    cloudDisplay(); //display cloud function
    makeClouds(); //create cloud function

    gokuY+=yVel //for goku hovering

    if(clickCount>1 && frameCount<500){ //naruto's red aura 
        beginShape();
        fill(random(190,255),0,0)
        for (var i = 0; i < nPoints; i++) {
            var px = x[i] + random(-4, 4);
            var py = y[i] + random(-4, 4);
            noStroke();
            ellipse(narutoXPos+30,290,px,py);
        }
        endShape(CLOSE);
    }

    image(goku, gokuX, gokuY, 150,150); //pixel image of goku
    push()
    image(naruto, narutoXPos, narutoYPos, 80,80);
    pop()
    gokuBall(); //charge up sphere

    if(gokuY<180){ //causes goku to hover down
        yVel=-yVel
    }
    if(gokuY>210){ //causes goku to hover up
        yVel=-yVel
    }

    fill(0)
    quad(0,390,100,leftEdge,200,newEdge,300,380) //creates black rock that naruto is standing on

    if(frameCount>550){ //takes off a piece of the rock naruto is on. 
        newEdge=300
        leftEdge=300

    }
    
    ultimateAttack(); //calls 
    noStroke();
    for(i=0;i<stars.length;i++){ //Draws stars through many times
            stars[i].draw();
        }

    gokuChargeBar(); //goku charge up bar
    narutoChargeBar(); //naruto charge up bar
    if(countDown>-1){ //Countdown Text and ends after certain time
        push();
        fill(255)
        textAlign(CENTER)
        stroke(0)
        textSize(120)
        text(countDown,width/2,200)
        pop();
        }
    if(countDown>0){ //In game instruction
        fill('blue')
        textSize(random(24,25))
        text("Press L", 590, height-190)
        }
    if(countDown>0){ //In game instruction
        fill('red')
        textSize(random(24,25))
        text("Press A",90,height-180)
   }
   
    rasengan(); //calls rasengan function
    narutoUltimate(); //calls naruto's ultimate attack
    cloneRasengan(); //calls the clone's rasengans

    push();//Name of the Game 
    textAlign(CENTER)
    fill(255)
    text("BATTLE BARS",width/2,50)
    pop();
   
}





function gokuChargeBar(){ //A blue charge bar for goku's power
    push();
    fill('blue')
    rectMode(CENTER)
    rect(width/2,80,(2*count),10)
    pop();
}

function narutoChargeBar(){ //A red charge bar for naruto's power
    push();
    fill('red')
    rectMode(CENTER)
    rect((width/2),70,2*clickCount,10)
    pop();
    
}


 //Key and Clicking Section

function keyTyped (){ //if "l" key is pressed, add to goku's bar and if "a" key is pressed, add to naruto's
    if(key === 'l' && frameCount <500){
        count+=1
    }
    else if(key === 'a' && frameCount<500){
        clickCount+=1
    }
 }


//Attack and Auras

function gokuBall (){ //creates a charge up blast that gets bigger as you click more
    if(count>1 && frameCount<500){
        noStroke();
        fill(0,255,random(200,255));
        ellipse(gX,gokuY+60,random(10),random(10)*count/2)
    }
   
}

function rasengan (){ //creates a ball of energy for naruto
    if(clickCount>1 && frameCount<860){
        fill(30,0,random(200,255))
        ellipse(narutoXPos+21,narutoYPos+55,random(10),10)
        fill(255)
        ellipse(narutoXPos+21,narutoYPos+55,random(5),random(5))
    }
}
function cloneRasengan(){ //creates rasengans for all the clones
    if(frameCount>750 && clickCount>count&& frameCount<870){
        fill(30,0,random(200,255))
        ellipse(cloneX5+21,cloneY5+55,random(10),10)
        fill(255)
        ellipse(cloneX5+21,cloneY5+55,random(5),random(5))
        fill(30,0,random(200,255))
        ellipse(cloneX6+21,cloneY6+55,random(10),10)
        fill(255)
        ellipse(cloneX6+21,cloneY6+55,random(5),random(5))
        fill(30,0,random(200,255))
        ellipse(cloneX7+21,cloneY7+55,random(10),10)
        fill(255)
        ellipse(cloneX7+21,cloneY7+55,random(5),random(5))
        fill(30,0,random(200,255))
        ellipse(cloneX8+21,cloneY8+55,random(10),10)
        fill(255)
        ellipse(cloneX8+21,cloneY8+55,random(5),random(5))
    }
    
}


function gokuAura(){ // goku aura consists of many yellow rectangles being called near his position
    push();
    fill('yellow')
    noStroke()
    for(i=0;i<30;i++){
        rect(random(600,650),0,3,400)
    }
    pop();
}


function ultimateAttack(){ //starts kamehameha sound and blast
    var gokuHand = gokuY+60
    noStroke();
    fill(0,random(200,255),255)
    if(frameCount==1){
        kamehaSound.play();
    }

    if(frameCount>500 && frameCount<670){//releases a very large blast towards naruto
        push();
        movingPoint-=50
        strokeCap(ROUND)
        rectMode(CORNERS)
        rect(580,gokuY+20,movingPoint,gokuY+90)
        pop();
        ellipse(560,gokuHand,100,random(100,130))
    }

    if(movingPoint < narutoXPos && narutoYPos<300 && frameCount< 550 ){ //naruto gets blown off the screen if he is hit by the blast
        narutoXPos-=20
    }
   
}

function narutoUltimate(){ //naruto teleports, summons clones to bring goku down, naruto jumps up and summons more clones, and then hits goku
    if(frameCount>500 && clickCount>count && narutoXPos> 0 && frameCount<700){ //teleport naruto
        narutoXPos=400
        narutoYPos=310
        }
    if(frameCount>550 && clickCount>count && narutoXPos>0 && frameCount<900){ //summons 4 shadown clones
        image(naruto,cloneX1,cloneY1,80,80)
        image(naruto,cloneX2,cloneY2,80,80)
        image(naruto,cloneX3,cloneY3,80,80)
        image(naruto,cloneX4,cloneY4,80,80)
        if(frameCount>600){
            if(cloneX1<gokuX+90){ //shadow clones move forward
                cloneX1+=5
            }
            if(cloneX2<gokuX+85){
                cloneX2+=5
            }
            if(cloneX3<gokuX+90){
                cloneX3+=6
            }
            if(cloneX4<gokuX+95){
                cloneX4+=4
            }
            if(cloneX1==gokuX+90 && cloneY1>gokuY+30){ //shadow clones jump up
                cloneY1-=4
            }
            if(cloneX1==gokuX+90 && cloneY2>gokuY+30){
                cloneY2-=4
            }
            if(cloneX1==gokuX+90 && cloneY2>gokuY+30){
                cloneY3-=4
            }
            if(cloneX1==gokuX+90 && cloneY2>gokuY+30){
                cloneY4-=4
            }
        }
    if(gokuY+130<410 && cloneX1==gokuX+90 && cloneY1<gokuY+30){//shadow clones bring goku down
        gokuY+=2
        cloneY1+=2
        cloneY2+=2
        cloneY3+=2
        cloneY4+=2
        }
    
    }
        if(frameCount>700 && narutoXPos<gokuX+90&& narutoYPos>100 && frameCount<800){ //naruto jumps into sky
            narutoYPos-=10
        }
        if(narutoXPos<gokuX+90 && frameCount>850 && frameCount<970 ){ //naruto goes towards goku
            narutoXPos+=narutoSpeed
            narutoYPos+=narutoSpeed
            cloneX5+=narutoSpeed
            cloneX6+=narutoSpeed
            cloneX7+=narutoSpeed
            cloneX8+=narutoSpeed
            cloneY5+=narutoSpeed
            cloneY6+=narutoSpeed
            cloneY7+=narutoSpeed
            cloneY8+=narutoSpeed
        }
        if(narutoXPos<gokuX+90 && frameCount>750 && clickCount>count && frameCount<900){ //summons shadow clones in the sky
            image(naruto,cloneX5,cloneY5,80,80)
            image(naruto,cloneX6,cloneY6,80,80)
            image(naruto,cloneX7,cloneY7,80,80)
            image(naruto,cloneX8,cloneY8,80,80)
        }
        if(frameCount==460 && clickCount>count){ //teleport sound
            teleportSound.play();
        }
        if(frameCount==530 && clickCount>count){ //summoning sound
            cloneSound.play();
        }
        if(frameCount==720&&clickCount>count){ // naruto says rasengan
            narutoSays.play();
        }
        if(frameCount==730 && clickCount>count && frameCount<880){ //when naruto says rasengan and the clone sound plays
            cloneSound.play();
        }
        if (frameCount>870 && clickCount>count && frameCount<980){ //explosion occurs as goku is hit, grows, as well as plays an explosion sound
            push();
            imageMode(CENTER)
            for(i=0;i<8;i++){
                explodeSize+=20
                image(explode,600,320,explodeSize,explodeSize) //image of explosion
            }
            pop();
        }
        if(frameCount>970 && clickCount>count){ //naruto stands right before the hole, creates hole in the ground with goku nowhere to be found
            narutoXPos=570
            narutoYPos= 310
            gokuX=1000
            fill(0)
            noStroke()
            endOfGround=610
        }
        if(frameCount==840 && clickCount>count){ //explosion sound
            explodeSound.play(0,0,5);
        }

        if(frameCount==600 && clickCount>count){ //clones say naruto
            cloneSay.play();
        }
}
   //Background and Landscape 

function moon (){ //draws a moon/planet
    fill('#FED196')
    ellipse((width/2)+5,(height/2)+100, 250,250)
    fill('#836469')
    ellipse(width/2,(height/2)+100,250,250)
}

function Star(positionX,positionY){ //Position for stars
    this.x=positionX
    this.y=positionY
    this.draw = function(){
    stroke(255)
    point(this.x,this.y)
    }
}
function rock(positionX,positionY){ //draws jagged rocks object 
    this.x=positionX
    this.y=positionY
    this.draw = function(){
        noStroke();
        fill(0)
        quad(this.x,this.y,this.x+10,this.y-10,this.x+20,this.y-7,this.x+30,this.y)
    }
}
function updateAndDisplayClouds(){ //Update the cloud's positions, and display them.
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}
function removeClouds(){ //makes cloud object
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds
}
function addRandomClouds() {//Add a random cloud with probability 
    var newCloudLikelihood = 0.030; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(width));
    }
}
function cloudMove() {
    this.x += this.speed; //the cloud speed
}
function cloudDisplay() { //height of cloud
    var floorHeight = 10;
    var bHeight = (this.nFloors * floorHeight); 
        fill(150); 
        stroke(0); 
        push();
        noStroke();
        ellipseMode(CENTER)
        translate(this.x, 0);
        ellipse(20, 160, this.breadth, bHeight);
        ellipse(40, 140, this.breadth, bHeight);
        ellipse(60, 160, this.breadth, bHeight);
        stroke(200); 
        pop();
}


function makeClouds(beginLocationX) { //function for making the clouds
    var cld = {x: beginLocationX,
                breadth: 80,
                speed: -1.0,
                nFloors: round(random(1,4)),
                move: cloudMove,
                display: cloudDisplay}
    return cld;
}

A project that I really found interesting and that pertained to project is one by Bjork Digital. The project is very short but consists of a man moving around and colors, lights, and animations are moving around and seem to react to the way that he moves. The reason why it relates is because initially I was going to include a camera in my project that reads the positioning of your hands based on the lighting. So instead of pressing a key on a keyboard to make the bars rise to the top, you could kind of raise them to the top by yourself like the text rain letter project. The other project that I found interesitng and that pertained to my project was Masaki Fujihata. This project was supposed to take a camera and focus on a specific object until a video came to life with the object that you were focusing on. Going back to my want of using a camera in my project, this could be a really cool interaction between the characters I am using and the person who is playing the game. Unfortunately I do not believe that I can recreate anything that this project has demonstrated.

Björk
James Merry

●ProjectPlanning / Produce and Production　
　Dentsu Lab Tokyo　

Creator: Daito Manabe

Creator: Masaki Fujihata

For my final project, I would like to create a little, simple game involving two characters from some TV shows I used to and sometimes watch. I want to create a game that requires players to tap their respective keys ( Key Press A and Key Press L) as fast as they can in order to win. As they press their keys, a level bar will start to fill up. Once this bar is full, the player will see their character attack the other which symbolizes the end of the game. The reason why I want to do this is because I really enjoy making short animations and I think it would be cool to match up the two characters (Naruto and Goku) that are always being compared to each other. If this project goes the way I envision it, then I will be very pleased and can always have a little game to show people that I created. The project would include sound, turtles?, and perhaps a moving background with clouds.

The piece of computer music that I found very interesting was a video called “Pipe Dream”. If you watch the video you will see a series of different objects interact with one another and make this beautiful harmonious melody. There are any other videos as well that symbolize the same thing but the reason why I found this particular one more interesting than the others was the work that must have gone into it. There were so many pieces and so much animation that if the music was strictly created from the computations, this would have been a very long and treacherous project. If it was played by another instrument and then made to match the music this would be different. I still encourage anyone to listen to this song and watch the video! It is fantastic! The second video under that shows a real life version of “Pipe Dream”. I found this at the last second and I am just in awe of what humans can do.

Website:Animusic

I tried a bunch of different ideas for this project but in the end I wanted to keep it simple. I created two turtles that would draw and rotate themselves in two different positions and in the end I thought that it kind of looked like a tire on a car. As a result I drew a road and a sign that says how far carnegie mellon is from my home while the tiring is stitching itself together before it hits the road. I think it worked out well.

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 10 Frestyle Playing With Turtles

//Global Variables
var turtle1Length = 20
var turtle2Length = 40
var turtle3Length = 50
var turtle4Length = 60

function setup() {
    createCanvas(400, 400);
    background('teal');
    myTurtle1 = makeTurtle(width/2,height/2) //make turtle 1
    myTurtle2 = makeTurtle(width/2,height/2) //make turtle 2
    myTurtle1.penDown();
    push();
    fill(50)
    rect(0,(height/2)-12,width,12) //road
    pop();
}

function draw() {
    
    push()
    rotate(frameCount) //rotation
    turtleLine1(turtle1Length)
    pop();
    push();
    rotate(-frameCount) //rotation in other direction
    turtleLine2(turtle2Length)
    pop();
    line(60,(height/2)-12,60,(height/2)-50) //sign 
    rectMode(CENTER)
    rect(60,(height/2)-50,50,30) //signrectangle
    textAlign(CENTER)
    textSize(5)
    text("CARNEGIE MELLON",60,(height/2)-50) //CMU Text
    text("238 Miles",60,(height/2)-45) //CMU Miles To my House
    push();
    for(i=0;i<width;i+=10){ //road yellow marks
        noStroke()
        fill('yellow')
        rect(i,(height/2)-6,3,1)
    }
    pop();
}

function turtleLine1 (length){ //turtle 1 Actions
    myTurtle1.setColor('blue')
    myTurtle1.setWeight(1)
    strokeJoin(MITER)
    myTurtle1.left(90)
    myTurtle1.forward(10)
    myTurtle1.left(90)
    myTurtle1.forward(20)
    myTurtle1.left(30)
    myTurtle1.forward(length)
   
    
    
}

function turtleLine2 (length){ //turtle 2 Actions
    myTurtle2.setColor('black')
    myTurtle2.setWeight(1)
    strokeJoin(MITER)
    myTurtle2.left(90)
    myTurtle2.forward(10)
    myTurtle2.right(90)
    myTurtle2.forward(20)
    myTurtle2.right(30)
    myTurtle2.forward(length)
    }




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

Loop.ph is a studio based in London and was created by Mathias Gmachl and Rachel Wingfield. This studio focuses on architecture, design, and other sciences. They try and connect reality, the virtual, and the future. One of the projects that I was looking at that they did was very interesting to say that least. They built a small bicycle course that had lights implanted on the course to represent something bigger. The course was supposed to be a way to celebrate the relationship between Taipei and the importance of healthy living styles. Going deeper into the description of the project (found HERE), you can see how they were trying to connect the structure of course to how lungs are structured while the cycling can represent air quality and its effect on the lungs. I cannot do it justice by explaining it here so click on the link to read more.

Rachel Wingfield is a researcher and a designer who trained at the Royal College of Art in London. She works on a lot of environmental and living systems related projects.

I really liked this project because I think it is important to educate people on their environment and how it affects their body. Rachel and her partner just found a really cool way to do it!

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 10: Generative Landscape

//Global Variables 


var terrainSpeed = 0.0005;
var terrainDetail = 0.0005;
var clouds = []
var sizeD = 30
var dragonHead;
var stars = []
var star;
var Star;


function preload() {
    dragonHead = loadImage("http://i.imgur.com/vAqmPf5.png"); //loads image of spirited away dragon
}

function setup() {
    createCanvas(600, 400);
    frameRate(10);
    for(i=0;i<100;i++){ //puts a load of random stars in the sky
        stars.push(new Star(random(600),random(250)))
    } 
}

function Star(positionX,positionY){ //Position for stars
    this.x=positionX
    this.y=positionY
    this.draw = function(){
    stroke(255)
    point(this.x,this.y)
    }
}

function draw() {
    background(25,25,112);
    stroke(255)
 for(i=0;i<stars.length;i++){ //Draws stars through many times
        stars[i].draw();
    }
    push();
    noStroke();
    fill('khaki')
    ellipse(width/2, 30, 40,40)
    pop();
    push();
    noStroke();
    fill('midnightblue')
    ellipse(290,28,40,40)
    pop();

 for(i=0;i<20;i++){ //supposed to be scales coming off the dragon
    fill(255)
    rect(random(width),random(400),20,.5)
}
    updateAndDisplayClouds()
    removeClouds();
    addRandomClouds();
    noFill(); 
    beginShape(); //draw dragon body shape
    stroke(255)
    for (var x = 20; x < width-90; x++) {
        strokeCap(ROUND);
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, mouseY);
        vertex(x, y);
        vertex(x,y-10) 
       }
    endShape();


    image(dragonHead, width-100, y-40, 70,70); //Dragon head attached to the dragon body
}





function updateAndDisplayClouds(){ //
    // Update the cloud's positions, and display them.
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}
function removeClouds(){
   
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds
}
function addRandomClouds() {
   //Add a random cloud with probability 
    var newCloudLikelihood = 0.23; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(width));
    }
}
function cloudMove() {
    this.x += this.speed; //the cloud speed
}
function cloudDisplay() { //height of cloud
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(150); 
    stroke(0); 
  push();
    noStroke();
    ellipseMode(CENTER)
    translate(this.x, height - 40);
    ellipse(20, -bHeight+40, this.breadth, bHeight);
    ellipse(40, -bHeight+20, this.breadth, bHeight);
    ellipse(60, -bHeight+40, this.breadth, bHeight);
    stroke(200); 
  pop();
}


function makeClouds(beginLocationX) { //function for making the clouds
    var cld = {x: beginLocationX,
                breadth: 60,
                speed: -3.0,
                nFloors: round(random(1,4)),
                move: cloudMove,
                display: cloudDisplay}
    return cld;
}

As I was thinking about what I could do this project on, I realized that I could use the noise line that is used in the plant the flags project as an object or representation of a dragons body. I would just have to upload an image of a dragon head to make it look realistic. As I was thinking about how the project was going to look like, I kept remembering the movie, Spirited Away and how Haku kind of moved like a wavy line. I decided to use the movie as an inspiration. I tried to add rectangles going by to represent the scales coming off of the dragon but I had a hard time focusing the scales around the body so I just left them as wind strokes.

The post that I thought had an interesting yet simple concept was found in Vtavarez‘s week 4 post. He wrote about how an artist made a graphical representation of a musical composition called He’s a Pirate. I listened to the soundtrack and it was the one from Pirates of the Caribbean. If you click on the link, then you can see that the The Wrong Way to Draw a Pirate is a animation of how the song comes to be. In the past LookingOutwards, I loved when we analyzed the relationship between sound and animation and this is just another example of how cool these things can be when they are illustrated clearly. The person who made this composition has made a series called The Wrong Way to Draw Music. On there, they have many different types of songs that are portrayed the same way as the Pirate song was. I do agree that the way that the song is drawn, could have been better. All the layers that were written before hand just get layered over by new sounds and pitches. However, I still think it was a really cool idea.

For this project I wanted to use a photo that looked really clear and artistic. So as I was scrolling through photos on my phone, I found a photo that my girlfriend took of herself and edited. I thought that the green background of the building would look really good split apart by many pixels. As I looked at the example on the deliverable page, I wanted to include a different shape and background to present itself as the picture comes together. So I decided to use small triangles while allowing the user to use their mouse to drag even smaller circles to reveal more detail in the face or clothing.

I enjoyed this project.

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 09 Computational Portrait 

//Global Variable 

var rachelImg;

function preload() {
    var rachelUrl = "http://i.imgur.com/z5nysOD.jpg" //Upload Picture
    rachelImg = loadImage(rachelUrl);
}

function setup() {
    createCanvas(600, 500);
    background(255); //white background
    rachelImg.loadPixels(); //Grab pixels
    frameRate(1500);//Pixels Appear Fast
}

function draw() {
  
    var rW = random(width); //Random x Loc
    var rH = random(height); //Random y Loc
    var posX = constrain(floor(rW), 0, width-25); //Will not appear past boundaries
    var posY = constrain(floor(rH), 0, height-25);
    var rachelColor = rachelImg.get(posX,posY) //Retrieve color pixels of image
    noStroke();
    fill(rachelColor);
    rectMode(CENTER)
    triangle(rW,rH, rW+4,rH-4, rW+8,rH); //draw triangles


}
function mouseDragged(){
    var rachelColor = rachelImg.get(mouseX,mouseY) //Retrieve color of pixel where mouse is
    noStroke();
    fill(rachelColor);
    ellipse(mouseX,mouseY,1,1) //Drags smaller, more defined pixels in shape of circle
}

Eyeo 2013 – Memo Akten from Eyeo Festival // INSTINT on Vimeo.

Memo Akten Bio

Memo Akten is a visual artist, director, musician, and engineer which is probably why I admire his work a lot. He takes many aspects of what he is passionate about and illustrates it through his work. He has been involved in the video game industry as well as the music industry. One thing that shows how his wide variety of talents can combine together, is demonstrated by one of his projects called the Webcam Piano 2.0. In his lecture he talks about this project and if you look at it and listen, the Webcam piano really resembles a mixture of a video game and a music performance. He was born in Instanbul Turkey and has lived in London as well. Being in these different places surely shaped part of who he is today. I have a lot of family in England, and I have been there as well and I can tell you that it is a very artistic and expressive place. In his lecture he always tries to bring in his viewers by explaining each project in depth and you can see in his eyes how important these things are to him. He describes himself as someone who wants to illustrate Poetry of Reality and cross back and forth from reality and the digital. Memo takes different projects from other people whether it be musical or other, and recreates it digitally. This can be shown by his Simple Harmonic Function project. His background of being a civil engineer really allows him to tie together his artistic side with his digital experience. He has been involved in many other projects that I have not mentioned that are unparalleled by many projects I have seen from other artists. This is why I admire him. He strives to separate himself from the crowd to create his own brand and he loves doing it.