Final

//Daphne Lee
//15-104::1 (9:30am) Section D
//daphnel@andrew.cmu.edu
//Final-Project

//x is x location of ball;
//y is y location of ball;
var x = 200;
var y = 200;
var dirx = 1;
var diry = 5;
var speed = 0.75;
var paddleWidth = 75;
var paddleHeight = 10;
var ballDiam = 20;
var score = 0;
var lives = 3;
var scaled = 0.6;

var blockRowCount = 4;
var blockColCount = 13;
var blockWidth = 50;
var blockHeight = 20;
var blockPadding = 10;
var blockOffsetX = 30;
var blockOffsetY = 10;

var blockXArr = [];
var blockYArr = [];
var statusArr = [];
var started = false;

//preloaded items
var bg;
var girlLeft;
var girlRight;
var girlYPosition = 150;
var girlsSize = 100;
var press;
var enter;

function preload() {
    bg = loadImage("https://i.imgur.com/kElOb6m.jpg");
        //items on the start page before game starts
        if(started==false){
            press = loadImage("https://i.imgur.com/kbAP99M.png");
            enter = loadImage("https://i.imgur.com/4ijF2zc.png")
            // the girl gifs on the start screen
            girlLeft = createImg("https://i.imgur.com/IjEVc03.gif");
            girlLeft.position(150 * scaled, girlYPosition * scaled);
            girlLeft.size(girlsSize, girlsSize)
            girlRight = createImg("https://i.imgur.com/IjEVc03.gif");
            girlRight.position(500 * scaled, girlYPosition * scaled);
            girlRight.size(girlsSize, girlsSize);
        }
}

function setup() {
    createCanvas(800, 400);
    for(var i = 0; i < blockRowCount * blockColCount; i++) {
        //status makes sure if blocks disappear or remain
        statusArr.push(1);
    }
}

function collision(){
    for(var c = 0; c < blockColCount; c++){
        for(var r = 0; r < blockRowCount; r++){
            if(statusArr[r * blockColCount + c] == 1) {
                var radius = ballDiam / 2;

                //creating the blocks;
                var blockX = c * (blockWidth + blockPadding) + radius
                var blockY = r * (blockHeight + blockPadding) + radius;

                //collision points for each block;
                var minXCollide = blockX - radius;
                var maxXCollide = blockX + radius + blockWidth;
                var minYCollide = blockY - radius;
                var maxYCollide = blockY + radius + blockHeight;

                var collidesX = (x > minXCollide & x < maxXCollide);
                var collidesY = (y > minYCollide & y < maxYCollide)

                //what happens as a result of the collision;
                if(collidesX & collidesY) {
                    diry = -diry;
                    score++;
                    statusArr[r * blockColCount + c] = 0;
                }
            }
        }
    }
}

function countScore(){
    stroke(255);
    strokeWeight(1);
    textSize(15);
    //gives you a score when you lose
    text("Score: " + score, width - 70, height - 10);
}

function drawLives(){
    stroke(255);
    strokeWeight(1);
    textSize(15);
    //shows you the number of lives you have
    text("Lives: " + lives, 10, height - 10);
}

//creating the end result of what happens if you destroy all the blocks
function congrats(){
    if(score == blockColCount * blockRowCount){
        fill("lavender");
        textStyle(BOLD);
        textFont("cursive", 50);
        text("Congratulations You Won!", 120, 200);
    }
}

function draw() {
    scale(scaled);
    background(bg);
    noStroke();
    var textWidth = 150;
    var textHeight = 50;

    //creates the beginning press enter text before the game starts
    if(started == false){
        image(press, 340, 150, textWidth, textHeight);
        image(enter, 340, 210, textWidth, textHeight);
    }

    if(started){
        //ping pong ball
        rectMode(CENTER);
        fill(255);
        ellipse(x, y, ballDiam, ballDiam);

        //the paddle on the bottom
        fill(100, 300);
        rect(mouseX * scaled * 3, height - paddleHeight, paddleWidth,
        paddleHeight);

        //moves the ball
        x += dirx * speed;
        y += diry * speed;

        //left and right wall boundaries
        if(x > width - ballDiam / 2 || x < ballDiam / 2) {
            dirx = -dirx;
        }
        //top wall boundary
        if(y < ballDiam / 2){
            diry = -diry;
        }

        // else if(y > height + ballDiam / 2){
        if(lives > 0 & y > height + ballDiam / 2){
            x = width / 2;
            y = height / 2;
            lives --;
        } else if(lives == 0){
            speed = 0;
            stroke(0);
            fill("lavender");
            textStyle(BOLD);
            textFont("cursive", 50);
            //creating text to show if you fail to complete game
            text("GAME OVER", 250, 200);
            textSize(20);
            text("Score: " + score, 350, 250);
        }

        //Collision detection for the paddle
        var radius = ballDiam / 2;
        var minXCollide = (mouseX * scaled * 3) - radius - paddleWidth / 2;
        var maxXCollide = (mouseX * scaled * 3) + radius + paddleWidth / 2;
        var minYCollide = (height - paddleHeight) - radius - paddleHeight / 2;
        var maxYCollide = (height - paddleHeight) + radius + paddleHeight / 2

        var collidesX = (x >= minXCollide & x <= maxXCollide);
        var collidesY = (y >= minYCollide & y <= maxYCollide)

        if(collidesX && collidesY) {
            if(diry > 0) {
                diry = -diry;
                dirx = random(-5, 5);
                dirx = -dirx;
            }
        }

        countScore();
        drawLives();
        rectMode(CORNER);

        //creating the blocks
        for(var c = 0; c < blockColCount; c++){
            for(var r = 0; r < blockRowCount; r++) {
                if(statusArr[r * blockColCount + c] == 1) {
                    var blockX = c * (blockWidth + blockPadding) + ballDiam / 2;
                    var blockY = r * (blockHeight + blockPadding) + ballDiam / 2;
                    fill(100, 100);
                    stroke(255);
                    strokeWeight(1);
                    rect(blockX, blockY, blockWidth, blockHeight);
                }
            }
        }
        collision();
        congrats();
    }
}

function keyPressed() {
    // start the game
    if(keyCode == 13){
        //hides the girls running in the beginning frame before the game starts
        girlLeft.hide();
        girlRight.hide();
        started = true;
    }
}

I had a lot of ideas for my proposal but I found implementing the ideas I had difficult. For my project, I focused on keeping it at one level. You start out with three lives and whenever you die, the ball will reset at the middle of the canvas and move downwards from there. Once the 3 chances are used, it’s game over. I made it so that even if you are late in hitting the ball and you hit the left or right edge of the paddle, the ball could still be saved and move back up. As long as any contact with the paddle is made, the ball will be in play. When two side by side blocks are simultaneously hit by a ball due to the ball hitting the blocks directly in between the blocks, both blocks will disappear and the ball will continue moving upwards or diagonally until it has reached a solid border like the wall or the edge of another block.

Some Key Points

1. Note that the ball moves randomly at all times so you need to make sure to keep your focus on the direction of the ball at all times.
2.  Refresh the page to play the game again.
3. The ball is reset in the middle of the screen when you die and will immediately start moving again towards a random downwards direction.

For Graders:: TIP! Playing this game takes a while so if you would like, you can increase the PaddleWidth from 75 to 800 or 900 and center it on the screen and let it just run itself until the blocks are all gone.

This game does not work as well on WordPress due to some parts of the code that could not be scaled well. Please click below for the Zip File to the full size of the game.

Click Here for the Game

I want to this game that involves having a ping pong like ball that shoots up and hits the blocks. The block locations will be randomly generated. The game will start off with the blocks all being the same color. Once the ball hits the block, the block should disappear. When all the blocks are hit, the game restarts with a new set of blocks, this time with one additional color. So for example, level one had grey blocks, but level two had grey and red blocks. The added color will need two hits to make the block disappear. When you hit the red block once, it should turn lighter in color to signify it has been hit before. I will try to make a legend somewhere containing the information on how many hits each color block needs for it to disappear. The ball should be able to bounce off from all corners of the walls except for the bottom border. The ping pong paddle is used to control where the ball goes. I am planning on making the blocks slowly move downwards using the seconds function when the game progresses a bit farther. Each normal one hit block is one point and two hit blocks are two points and so on. I have yet to fully decide on the colors but this is the general idea that I want for my game. I based this idea off of one of my favorite games when I was a kid, though I don’t remember the name of that game clearly.

Curious Vase is a project made by Mianne de Vries and consists of a group of vases within each other. You need to break through the outer vase in order to see the second layer of the vase beneath and so forth. Each vase has up to 3 vases hidden inside. I like the concept of this vase in how you need to break through the outer layer in order to reach the second type of vase beneath because it started giving me the idea for my game. I wanted to create a game in which blocks were used and destroyed based on the movement of a ball. At first, I wasn’t sure how to make this game work, but then I realized, I could just use this breaking system to increase the difficulty of my game, which I will talk about more in my proposal.

The second project I found was the Surface Tension Lamp, created by Front.I found this project very intriguing in how it used bubbles. Bubbles change colors all the time due to the fact that it catches light and reflects the room or area like a multi colored structure. This bubble gave me the idea of changing the colors of my blocks on my game depending on the difficulty. As you continuously hit the block, the color fades and it will disappear just like how a bubble does. This project made by Front looks relatively simple but I like the simplicity and meaning behind the creation of this work.

Composition

var turtle;
var turtles=[];
var nTurtles=10;
var s;
var r;
var g;
var b;

function setup(){
    createCanvas(480,480);
    background(0);
    frameRate(10);
    //background before the black and white turtles appear
    var turtle=makeTurtle(width/2,height/2);
    turtle.setColor(color(255,255,0,100));
    turtle.setWeight(1);
    turtle.penDown();
    var goldenRatio=1+sqrt(5)/2;
    for(var i=0; i<150; i++){
    var s=5;
    turtle.right(60*goldenRatio);
    turtle.forward(s*i);
    }
}

function draw(){
    for(var i=0; i<turtles.length; i++){
        var step=random(-3,3);
        turtles[i].setWeight(i*3);
        var r=random(100,255);
        var g=random(150,255)
        var b=random(150,255)
        turtles[i].setColor(r,g,b);
        turtles[i].penDown();
        turtles[i].forward(step*i);
        turtles[i].left(25);
        turtles[i].penUp();
    }
}
function mousePressed(){
    //click to make turtles appear
    turtles.push(makeTurtle(mouseX,mouseY));

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

While I was experimenting with the golden ratio assignment previously, I was able to make some interesting designs as I played around with the code. I decided to use one of them as a basis for my background. This code starts off with a canvas with a patterned background. When you click on the canvas, turtles are made. I tend to like it when the entire canvas is covered by something and is constantly flickering like lights.

In 2010, Tristan Perich created a full length album called “1-bit Symphony” on a small single microchip that was encased in a CD jewel case. Perich has always had a certain amount of interest in music and got into working with microchips to create music and art in his college days. For Perich, a microchip is just a smaller version of a computer but you are more in touch with it and you can understand it better. I love how he was able to use his talents and likes in order to create something very different and unique from many other music pieces and composers. He combined his love for composing and his interests in microchips in order to create something new and musically interesting.

landscape

//Daphne Lee
var terrainSpeed = 0.0003;
var terrainCurves = 0.001;
var jx=280;
var jy=300;
var jw=107;
var jh=149;
var jx2=240;
var jy2=280;
var jw2=72;
var jh2=100;
var cx=0;
var cy=390
var cw=113;
var ch=75;
var kx=0;
var ky=350;
var kw=249;
var kh=250;

function preload(){
    jellyfish1 = loadImage("https://i.imgur.com/7ELhX6R.png?1");
    jellyfish2 = loadImage("https://i.imgur.com/Uhau0GX.png?1")
    crab = loadImage("https://i.imgur.com/tPxrvjd.png?1")
    kelp= loadImage("https://i.imgur.com/OZH9VCf.png?1")
}
function setup() {
    createCanvas(480, 480);
}

function drawSeaAndFloor(){
        beginShape();
        noStroke(0);
    //sea
    beginShape();
    fill(51, 204, 204);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainCurves) + (millis() * terrainSpeed*2);
        var y = map(noise(t/2), 0,1, 0, 400);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
    //floor
        beginShape();
        fill(204, 153, 102);
        for (var x = 0; x < width; x++) {
        var t = (x * 2* terrainCurves) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 400, height);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
}
function drawJellyfish(){
    //the bigger jellyfish moving left
    image(jellyfish1,jx,jy,jw,jh);
    jx-=random(0.5,1);
    jy-=random(-0.5,0.5);
    if(jx<-jw){
        jx=480;
    }
    image(jellyfish2,jx2,jy2,jw2,jh2);
    //smaller jellyfish moving right;
    jx2+=random(-0.5,2);
    jy2+=random(-0.5,0.5);
    if(jx2>width){
        jx2=-100;
    }
}
function drawCrab(){
    //crab
    image(crab,cx,cy,cw,ch);
    cx+=random(0.1,2);
    cy+=random(-0.5,0.5);
    if(cx>width){
        cx=-100;
    }
}
function drawKelp(){
    image(kelp,kx,ky,kw,kh);
    kx+=random(0.5,2);
    ky+=random(-0.5,0.5);
    if(kx>width){
        kx=-250;
    }
}

function draw(){
    background(179, 236, 255);
    drawSeaAndFloor();
    drawJellyfish();
    drawCrab();
    drawKelp();
    //sun
    fill(255, 255, 0);
    ellipse(20,20,150,150)
}

I started off with the idea of wanting to make an ocean with sea creatures swimming inside. I tried starting off with clouds but it didn’t really end up the way I wanted to. I decided to use photos to depict these sea creatures and the first picture I stumbled upon was a jellyfish. I started off with one, and then added another one. It was hard for me to figure out how to work with using objects so I ended up going a simpler route that felt more straightforward in my opinion. I tried to make the ocean more realistic looking so I added some kelp and a crab to add more details to it. I didn’t have enough time to try to incorporate some of the other ideas I had such as working with more objects and creating new functions to relate them to and getting a clearer understanding on how these objects move.

Notes on Blindness is an incredibly fascinating and interactive documentary that follows the story of a man named John Hull, who lost his sight back in 1993. After losing sight, John started documenting his new world through audio recordings and these recordings were used to make Notes on Blindness, which uses a mix of storytelling and VR to replicate John’s experiences. Béatrice Lartigue was the animation and art director for this production that won Best Experimental Experience at the Tribeca Film Festival. She is a visual artist based in Paris and studies things like the invisible relationships between time, space and images. She works a lot with immersive experience and physical interactive installations. I find it amazing how she was able to animate a supposedly world of darkness through some audio recordings. Each moment and aspect of the audio recorded scenes were brilliantly constructed and although monotone in color, was still beautiful.

dance

var dancers;

function preload() {
    //loading the image;
    var image = "https://i.imgur.com/vEGDVWM.jpg?1";
    dancers = loadImage(image);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    dancers.loadPixels();
    frameRate(70);
}

function draw() {
    //setting random vars to use as location of dots drawn;
    var x = random(width);
    var y = random(height);
    var col = dancers.get(x, y);

    noStroke();
    fill(col);
    var size=random(5,20);
    var diam=random(30,100);
    ellipse(x, y, size,size);//random sized balls;
    stroke(col);

}

I decided to choose one of my favorite photos taken of my friend and I this past weekend at a dance competition. The theme was T-Rex arms so we both looked really awkward but had big smiles! I started off trying to make a myriad of things. I tried to use the dots as the main base and tried adding ripples to the photo to make it more interesting but while experimenting, I also ended up just making a lot of lines of different thicknesses. I wasn’t a big fan of how the lines and ripples(not seen in photo below) sometimes weren’t as accurate in getting the colors like the points did though. I ended up sticking to my points even though it was quite simple because I just loved the way it ended up depicting the image.

I chose to discuss Jiaxin Wen’s Looking Outwards post from Week 4. The work she chose was a Cloud Piano created by David Brown in 2014. I found this piece of work particularly interesting for relatively similar reasons to the ones she wrote. The Cloud Piano plays piano pieces based on cloud movement. I think that although a programmed machine playing a piano may not have as much emotion and excitement as would if a real person was playing it, the art of it is still beautiful. I also liked how the creator combined an everyday aspect of nature with a form of music. Since I tend to find the movement of clouds intriguing at times when I look at them, I admire the fact that there are people out there that may have the same feelings and me but have more of a capability to make something out of that feeling.

Jake Barton, an American designer based in New York, works a lot with interactive design and focuses on trying to combine technology and emotion to create new things. In this video, Barton talks a lot about creativity and the ways that make it feel like the experience of falling in love. I love how the way Barton tries to create creative and interesting interactive designs and how he is interested about connecting technology and creativity. One of his past projects, which was the Big Heart NYC Project, was an interactive installation that involved a giant cube made of transparent tubes and LED lights. This heart reacts to affection and touch and converts the energy from it into light in the heart. Barton tells us that “appealing to emotions itself can build something big; interactions don’t have to be complicated to make a specific human moment and to make something satisfying.” I love and admire the way he talks about his works and the way he tries to approach every idea he has. Creativity can be fickle and hard to deal with sometimes but in the end, it is also incredibly beautiful and exhilarating to have.