Directions:

Use your mouse you glide the paddle to save the ball from dropping.

colorful cubes will be dropping at the consistent timed rate, make sure to hit the brick with the ball to increase count.

When you hit the ball, you get one point count.

For a challenge, click on the screen to add more balls, but you must balance all to save the game.

Im pretty happy with how this turned out, I definetly used almost everything I knew or saw in the course. It was really fun to make a remix of brick breaker and I learned even more along the way. I was definetly fun to recreate my child hood game.

sketch

//Zee Salman
//SECTION E

var gravity = 0.3;   // downward force
var springy = 0.2; // velocity 
var drag = 0.0001;    // drag 
var np = 1;      // how many particles
var fp= 1;
var particles = [];
var endgame = false;
var timerValue = 3;
var startButton;
var numberBalls = 0;
var x;
var y;
var count = 0;

var block = {
    x: 200,
    y: -25,
    w: 30,
    h: 30,
    color: "blue",
}



function particleStep() {
    this.x += this.dx;
    this.y += this.dy;
    if (this.y >= height) { // bounce off bottom
        endgame = true;
    }
    if (this.x > width) { // bounce off right wall
        this.dx = -this.dx * springy;

    } else if (this.x < 0) { // bounce off left wall
        this.dx = -this.dx * springy;

    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * springy;
    } 

}

function particleDraw() {
  //draws the ball
	fill(this.colorR, this.colorG, this.colorB);
    ellipse(this.x, this.y, this.size, this.size);
}


// create a ball object 
function makeParticle(px, py, pdx, pdy) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         step: particleStep,
         draw: particleDraw,
         size: 20,
         colorR: randomColor(),
         colorG: randomColor(),
         colorB: randomColor(),
        
        }
    return p;
}

//randone color for each ball
function randomColor(){
	return (random(0,255));
}

function hitBlock(ball, block) {
  //ball characteristics
        const ballLeft = ball.x - ball.size/2;
        const ballRight = ball.x + ball.size/2;
        const ballTop = ball.y - ball.size/2;
        const ballBottom = ball.y + ball.size/2;
//block characteristics
        const blockLeft = block.x - block.w / 2;
        const blockRight = block.x + block.w / 2;
        const blockTop = block.y - block.h / 2;
        const blockBottom = block.y + block.h / 2;
//check for collision
        if (
            ballRight >= blockLeft &
            ballLeft <= blockRight &&
            ballBottom >= blockTop &&
            ballTop <= blockBottom

        ) {
           
            if (ballRight >= blockLeft && ballLeft <= blockLeft) {
            
                return true;
            } else if (ballLeft <= blockRight & ballRight >= blockRight) {
               
                return true;
            } else if (ballBottom >= blockTop & ballTop <= blockTop) {
                return true;
            } else if (ballTop <= blockBottom & ballBottom >= blockBottom) {
               
                return true;
            }

        }

        return false;
      }
function collide() {
    for (let i = 0; i < particles.length; i++) {
    //if the ball hits the brick, irt disappears
      if(hitBlock(particles[i], block)){
        count +=1;
        block.y = -300;
        block.color = randomColor();
      }
     
    }


  }



function setup() {
    createCanvas(600, 400);
    for (var i = 0; i < np; i++) {
        // make a particle
        var p = makeParticle(80, 20, 7,7);       
        // push the particle onto particles array
        particles.push(p);
  
    }
    setInterval(timeIt, 1000);

}


function draw() {
    //console.log(count);
    background("pink");

    
    //drawing the board
    stroke(0);
    fill('black');
    rectMode(CENTER);
    rect(mouseX,(11*height/12)+10,100, 10);
        
    //if the game is not over...
    if (endgame == false){
        //console.log("Working draw func");
        collide();
        fill(block.color);
        noStroke();
        rectMode(CENTER);
        rect(block.x, block.y, block.w, block.h);
        if (block.y >= (11*height/12)) {
          endgame = true;
                }
    // draw all particles in the particles array
        for (var i = 0; i < particles.length; i++) { // for each particle
            var p = particles[i];
            p.step();
            p.draw();
          //if the ball touches the board, 
          //it bounces at a slighlty different angle everytime
       		if (near(p.x,p.y,p.size)){
       		 	p.dx = -p.dx + (PI/3);
       		 	p.dy = -p.dy;
                springy = 1.01;
                push();
                translate(width,height);
                rotate(PI/3);
                p.draw();
                p.step();
                pop();
                if((block.y >= height)){
                  endgame = true;
                }
    		}
        }   
        //timer to display when the next ball is going to disperse
            fill("black");
            textStyle(BOLD);
            text("Count: " + count, width / 2.3, height / 3);
            textStyle(NORMAL);
            if (timerValue >= 10) {
              fill(0);
              textSize(20);
              text("0:" + timerValue, width / 2, height / 2);
            }
            if (timerValue < 10) {
              fill(0);
              textSize(20);
              text('0:0' + timerValue, width / 2, height / 2);
            }
            if (timerValue == 0) {
              if(block.y < 0){
                block.y = random(20, 350);
                block.x = random(20, 350);  
              }else{
                block.y +=20;
                fill(0);
                textSize(20);
                timerValue = 3;  
              }
              
            //}
            }
        //if the game is over...
        }else if (endgame == true){
                count = 0;
                // transperent background
                fill(0,0,0,100);
                rect(0,0,width*2, height*2);

                //Game Over display
                fill(0);
                rect(width/2, height/2, 200, 70);
                fill(255);
                textSize(32);
                text("Game Over!", width / 2.8, height / 1.9);

                //Restart button w/ a hover effect
                fill(255);
                noStroke();
                rect(width/2, height/1.5, 100, 50);
                fill(0);
                textSize(20);
                text("Restart", width / 2.25, height / 1.47);

                if ((mouseX > (width/2)-50) & (mouseY < (height/1.5)+25) &&
                 (mouseX < (width/2)+50 && (mouseY > (height/1.5) - 25))) {
                    fill("green");
                    rect(width/2, height/1.5, 100, 50);
                    rect(width/2, height/1.5, 100, 50);
                    fill(255);
                    textSize(20);
                    text("Restart", width / 2.25, height / 1.47);


            }
            
                }

    }


function timeIt() {
  //timer
  if (timerValue > 0) {
    timerValue--;
  }
}
function mouseClicked() {
    //for users that want a challenge, click.
    var newp = makeParticle(mouseX, mouseY,
                                random(4, 6), random(4, 6));
        particles.push(newp);
    if(endgame == true) {
    //if restart button clicked, reset game 
        if (mouseX > 250 & mouseX < 550 && mouseY < 291 &
                 mouseY > 241) {
            endgame = false;
            particles = [];
            var p = makeParticle(80, 20, 7,7);
            particles.push(p);
            timerValue = 3;
            block.y = -25;

        }
    }
}


function near(x,y,size) {
//constant testing to see if the ball is touching the board
      if ((block.y + block.h) >= (11*height/12)) {
        //count +=1;
        block.x = random(20,300);
        block.y = -25;
      }

    	if((y + size/2) >= (11*height/12) &
       (x >= mouseX-50 && x <= mouseX + 100)) {

    		return true;

    	}
    	else{
    		return false;

    	}

    }

I was very interested and inspired by these projects because it requires user input and is based of the direction where the player wants to go the determines where the piece/interactive movement goes. In the first project it is based of a movement that rises and blocks of the fishes from the users character, in this case its the balloon hand. An interactive game called rise and fall created by Theodore Watson and Emily Gobeille. the second project is a bit similar in the sense that the pixels rise and it changes every time. And deletes the older line of pixels on the screen. Also another difference is that it doesn’t really have a shown user tool, but it is modified by time. This also helps with what I want for my final project because I want to make the bricks fall and change as they fall and create a new line. This second interaction piece is called I really enjoyed this project because it was a nice element of surprise the Edge Of Chaos.

https://www.design-io.com/projects/riseandfall

http://math.hws.edu/eck/js/edge-of-chaos/CA.html

For my final proposal, I want to create a game inspired by a game I used to play when I was younger. I’ve really been interested in learning about arrays in class as well as objects. Even though they are both tough topics to grasp (for me), I think it would make a good challenge to use those and create a fun interactive game. I also wanted to tie this to my childhood with a game that I used to play when I was younger. I definitely want to put other spins to the game to make it more interesting. The objective of the game is to hit the bricks or rectangles with the ball. The bad would bounce of the platform to stay afloat while lines of bricks will come down at a contact rate which would gradually increase to make the game difficult. If the line of bricks touches the bottom of the screen or the platform, the player will lose. Or if the ball hits a bomb for example, the player will lose. I really want to incorporate bonuses or special bricks to make the game even more interesting. or create multiple balls for the player to use to their advantage.

https://www.youtube.com/watch?v=-DVnzOdiB8I

video of his performance

A artist I decided to talk about Joel Hunt. He is a composer that uses algorithmic computer music and electroacoustic in his performances. He is famous all over the world and his compositions have been performed at music festivals including the Conferences in (Athens, Greece), New York City Electronic Music Festival, Electronic Music Midwest (Kansas City), Primavera Festival of Contemporary Arts and Digital Media (Santa Barbara), and the California Electronic Music Ex-change Concert Series (Los Angeles). Joel is a Lectur-er in Music and Digital Media, Arts, and Technology at Penn State Behrend. He uses his phone which is attached to the instrument to create unique sounds in his performances. It is very unique and I didn’t think that one could use their phone as well as the instrument together to make music. It is very impressive and it is continuing to gain attraction, making it one of the main things that got him famous.

sketch

// Zee Salman
//fawziyas@andrew.cmu.edu
//Project-11
//section E

var trees = []
var terrain = 0.005;
var midTerrain = 0.016;
var lowTerrain = 0.020;
var terrainSpeed = 0.0004;
var rate = 0.007; 

function setup() {
    createCanvas(400, 400);
    frameRate(300);  
    }
function draw() {
    //background 
    fill(163,221,255);
    rect(0,0,width,height);
    
    //sun 
    noStroke();
    fill(255,228,26);  
    ellipse(width-60, 70, 80, 80);
    
    //mountain 
    mountains(); 
    addT();
    removeT();
    newT();
    ground(); 
}


function removeT(){
    //takes away trees
    var treesKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesKeep.push(trees[i]);
        }
    } 
    trees = treesKeep;
}



function addT(){
    // x coordinate 
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function newT() {
    // new tree on screen
    if (random(0,1) < rate) {
        trees.push(drawT(width));
    }
}


function treesMove() {
    this.x += this.speed;
}
    
//show trees
function treesDisplay() {
    
    //bottom
    strokeWeight(8);
    stroke(120, 79, 25);
    line(this.x, 350, this.x, 420);

    //top
    noStroke();
    fill(48,67,7);
    triangle(this.x - 30, 360, this.x + 30, 360, this.x, 300);
}


function drawT(px) {
    var bx = {x: px,
                breadth: 20,
                speed: -1.0,
                move: treesMove,
                display: treesDisplay}
    return bx;
}

function ground() {
    noStroke(); 
    fill("grey");
    rect(0, height-25, width, height/5);
}

function mountains() {
    //creates mountains 
    beginShape(); 
    stroke(43, 99,41);
    for (var x = 0; x < width; x++) {
        var q = (x * terrain) + (millis() * terrainSpeed);
        var m = map(noise(q), 0, .95, 300, 3);
        line(x, m, x, height); 
    }
    endShape();

   
    
    beginShape(); 
    stroke(76, 160, 73);
    for (var x = 0; x < width; x++) {
        var q = (x * midTerrain) + (millis() * terrainSpeed);
        var m = map(noise(q), 0, .75, 250, 200);
        line(x, m, x, height); 
    }
    endShape();

    
    beginShape(); 
    stroke(120, 205, 117);
    for (var x = 0; x < width; x++) {
        var q = (x * lowTerrain) + (millis() * terrainSpeed);
        var m = map(noise(q), 0, 3, 300, 250);
        line(x, m, x, height); 
    }
    endShape();
}

I was very interested in this project because it would never be the same when the landscape would pass by. It reminds me of when I go on a road trip and stick my head out the car window. The scenes change all the time. That is where I got my inspiration from to do this project.

//UPDATED SOUND//

sketch

//Zee Salman
//Project 10
// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)


function preload() {
    stomach = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/447911__breviceps__growling-stomach-stomach-rumbles-1.wav");
    fart = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/402628__inspectorj__whoopee-cushion-long-a-1.wav");
    laugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/259611__stevious42__baby-laugh-1.wav");
    cry = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/386923__gumballworld__baby-newborn-cry2-1.wav");
    stomach.setVolume(5);
}



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


function draw() {
    // you can replace any of this with your own code:
    background(200);
    //baby head
    noStroke();
    fill("brown");
    ellipse(width/2, height/4, 100, 120 );
    //arms
    rect(width/2.75, height/2.2, 140, 100);
    //baby top
    fill("pink");
    ellipse(width/2, height/2, 100, 140);
    ellipse(width/2.5, height/2.25, 50, 60);
    ellipse(width/1.65, height/2.25, 50, 60);
    //chest
    fill("brown");
    triangle(width/2.5,height/2.6, 300, 192, width/2,height/2);
    //baby tummy
    fill("white");
    ellipse(width/2, height/1.9, 70, 90);
    //baby diapers
    fill("gray")
    ellipse(width/2, height/1.63, 100, 90);
     //baby tummy
     fill("pink");
    rect(width/2.5, height/1.95, 100, 40);
    fill("white");
    rect(width/2.32, height/1.98, 69, 30);
    //baby legs
    fill("brown");
    ellipse(width/1.55,height/1.5, 70, 50);
    ellipse(width/2.65,height/1.5, 70, 50);
    fill("pink");
    ellipse(width/2.35,height/1.5, 50, 50);
    ellipse(width/1.7,height/1.5, 50, 50);
    //baby neck
    fill("brown");
    rect(width/2.22, height/4, 50, 90);
    //hair
    fill("black");
    ellipse(width/2, height/5.5, 90, 60);
    //eyes
    fill("black");
    ellipse(width/2.2, height/3.8, 15, 15);
    ellipse(width/1.85, height/3.8, 15, 15);
    //pacifier
    fill("white");
    ellipse(width/2, height/3.2, 30, 20);
    fill("pink");
    ellipse(width/2, height/3.2, 10, 15);
    

    
}
function mousePressed() {
    //click on the baby's bib/ stomach
    if (mouseX < width/2 + 30 &  mouseX > width/2 - 30 && mouseY < height/2 + 40 && mouseY > height/2- 40){
        stomach.play();
        
        }else{
        stomach.pause();
    }
    //click on the baby's neck/pacifier area
    if (mouseX < width/2 + 10  &  mouseX > width/2 - 30 && mouseY < height/2+20 && mouseY > height/4){
        laugh.play();

        }else{
        laugh.pause();
    }
    //click on the baby's diaper
    if (mouseX < width/2 + 10  &  mouseX > width/2 - 30 && mouseY < height/1.5 && mouseY > height/1.7){
        fart.play();
        }else{
        fart.pause();   
    }
    //click on the bab'ys left leg
    if (mouseX < width/1.55 + 10  &  mouseX > width/2.55 - 10 && mouseY < height/1.5+20 && mouseY > height/1.7){
        cry.play();
        }else{
        cry.pause();

    }

}

I wanted to create a sketch that was cohesive but still had different sounds that would be interesting when put together. I was inspired when I was walking past a woman who had two kids, one was crying and one was laughing. Babies make a variety of sounds and these are just a few interesting ones.

https://carolinesinders.com/work#/nudge/

Caroline Sinders is machine learner as well as user researcher. She has a variety interests ranging from politics, digital spaces, as well as convocational design. She has worked for IBM, Intel, Wikimedia Foundation, and more. Caroline has a variety of different media projects as well as research that she has done over the past few years. The one that really stood out to me was a project called Nudge Nudge.

I was very intrigued by its design in the beginning, then I followed upend read some more about the projects. It is a device worn like a watch that alarms when there is a reminder approaching. But to alarm the user, it doesn’t use anything but color to indicate the sense of time. This way it reminds users when a task is near or a reminder that needs attention soon. Its used was used in the study to show times in between a meeting for example. I think this is really awesome because it is definitely a unique way of showing and telling time. It is also a different way of reading an alarm that isn’t exactly direct.

I took a look at Aarons Looking Outwards and I agree with his post from week 4. With Widows, they use a strong sound to attract users. Even when decades have passed, it is still memorable. This is good design in the sense that it makes people connect to Windows brand when they hear the tone.

sketch

//Zee Salman
//SECTION E
//project 09

var picture;

function preload(){    
    var url = "https://i.imgur.com/J5xj43q.jpg"; 
    picture = loadImage(url); 
}

function setup() {
	background(255);
    createCanvas(360, 340);
    picture.loadPixels(); 
//rate of the pixels
    frameRate(8000); 
}

function mouseDragged(){
//size of the brush
    var Bmouse = random(11, 30);
//selecting the color
    var Dmouse = picture.get(mouseX, mouseY); 

//drawing with the mouse dragged    
    fill(Dmouse);
    ellipse(mouseX, mouseY, Bmouse, Bmouse);
}
    
function draw() {
//random  
    var x = random(width); 
    var y = random(height); 

//color for pixel 
    var cx = constrain(floor(x), 0, width - 1); 
    var cy = constrain(floor(y), 0, height - 1); 

    var selColor = picture.get(cx, cy); 

//color of the circles    
    noStroke(); 
    fill(selColor); 

//more focus on the person
    if (x > 60 & x < 200 && y > 0 && y < height){
        ellipse(x, y, 5, 5); 
    }

//closer to the person
    else if (x > 20 & x < 300 && y > 0 && y < height){
        ellipse(x, y, 7.5, 7.5); 
    }
    
//out of focus background
    else {
        ellipse(x, y, 9, 9); 
    }
 }

I really had fun with this project because I had the opportunity to test out and create different outcomes for different interactions. I also wanted it to still be a picture that has some sort of focus as well, so I created smaller dots/ellipses towards the figure and facial features. But, I still left room for abstraction with the interaction piece making it so that random sized dots create the pictures.

sketch

//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//Project- 07

var nPoints = 100;
var EPITROCHOID = 0; // Cartesian Parametric Form  [x=f(t), y=g(t)]
var curveMode = EPITROCHOID;


function setup() {
    createCanvas(400, 400);
    frameRate(50);
}


function draw() {
    background(180,190,175);
    
    // draw the frame
    fill(0); 
    noStroke();
    noFill(); 

    // draw the curve
    push();
    translate(width / 2, height / 2);
    switch (curveMode) {
    case EPITROCHOID:
        drawEpitrochoidCurve();
        break;
    }
    pop();
}

//--------------------------------------------------
function drawEpitrochoidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    
    var nPoints = 20;
    var radius = 50;
    var separation = 125;

    var x;
    var y;
    
    var a = mouseX / 10;
    var b = a / 10.0;
    var h = constrain(mouseY / 20.0, 20, b *50);
    var ph = mouseX / 50.0;

    stroke(255, 250, 100);
    strokeWeight(3);
//BIGGER SHAPE
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a +30 + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a+30 + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);


   //// smaller shape
    stroke(245, 20, 200);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);

     
    push();
    translate(5*separation, height / 2);
    var qx = 0;
    var qy = 0;
    for (var i = 0; i <= nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        if ((i % 2 == 0) & (i > 1)) {
            line(qx, qy, px, py);
        }
        qx = px;
        qy = py;
    }
    pop();

    //// smallest shape
    //// smaller shape
  	stroke(mouseY,45,mouseX)
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a/2 + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a/2 + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);

//outer shape
	stroke(mouseY, mouseX, 200);
    push();
	rotate(mouseX*6/ mouseY*6);
    strokeWeight(2);
    beginShape();
    for(var i = 0; i < 200; i +=2) {
        var x =   a * (10 * cos(i) - cos(i));
        var y =   a * (10 * sin(i) -sin(i));
        vertex(x, y);
    }
    endShape();
    pop();


}

I started out wanting to do something floral or something almost pufferfish like but I started to stray away from those because I started to experiment more with my code. I started looking at the constraints and seeing where I can really try to make the piece interesting without losing sight of the project. Also trying to make each part visible to the user. I also played around with repetition and space which I really liked together in the composition. I would also like to take this project further and see how maby Epitrochoids I can fit onto one canvas and how I can make them more complex while again, making it clear.