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.
//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
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.
]]>// 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//
//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.
//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.
//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.
