p5js Drawing

Musical Instrument

I played with tones and melody to change with the knob setting on my bread board

Updated Final Project

My attempt at the first project took longer than expected. The code was extensive and unfamiliar to me and after trying to reduce it's complexity I decided to move on from that game.

I didn't know what I was going to be able to work with but I knew I wanted something moving on the screen and a function or two of some sorts; the basics.

I found a code for a p5js pong game that I edited to my ability. This code was simpler in the sense that it had code familiar to one we've worked with before. I changed the size of the paddle size, the ball size, and the score size. The speed of the ball was much slower and didn't work for the size it had been changed to so I increased that as well.The colors were something I didn't think worked together and changed it to ones I preferred. The last step of the current state of the project was to convert the paddle movements to be continuous on one click and hold as apposed to having to constantly tap the arrow keys to move from side to side.

//variable

var squareSize = 200;

var posX = 300;

var posY = 300;

//speed of movement

var xSpeed;

var ySpeed;

var pMouseX;

var pMouseY;

//boolean to check if the ball was clicked

var ct = false;

/* var caught;

*/

function setup(){

createCanvas(1400, 900);

//starting speeds

xSpeed = 10;

ySpeed = 3;

}

function draw(){

background('#e6fff2');

fill('yellow');

// (rt side, down from top,length,base)

rect(0, 60, 1400, 150)

rect(0, 700, 1400, 150)

//if the mouse is close/inside ball color changes

if((mouseX < (posX + squareSize/2)) && (mouseX > posX - squareSize/2)

&& (mouseY < (posY + squareSize/2)) && (mouseY > (posY - squareSize/2))){

//mouse caught the ball

ct = true;

console.log('yep');

}

else{

fill(0);

//mouse is outside ball

//ct = false;

}

posX += xSpeed;

posY += ySpeed;

noStroke();

fill('#ff66a3')

// (space from top, how wide, how big)

//square(550, 320, 200)

square(posX, posY, squareSize, squareSize)

//bounce off side

if ((posX > (1400 - squareSize/2)) || (posX < squareSize/2)){

xSpeed = -xSpeed;

}

//bounce up + down

if ((posY > (900 - squareSize/2)) || (posY < squareSize/2)){

ySpeed = -ySpeed

}

//setthe previous positions where the mouse is atm

pMouseX = mouseX;

pMouseY = mouseY;

}

function mouseDragged(){

//if mouse insde ball & clicked down, change position

//to be centered on the mouse

if (ct){

posX = mouseX;

posY = mouseY;

xSpeed = 0;

ySpeed = 0;

}

else{

xSpeed = 10;

ySpeed = 3;

}

}

function mouseReleased(){

//center on the mouse, rest the speed when the mouse is released

if (ct){

xSpeed = mouseX - pMouseX;

ySpeed = mouseY - pMouseY;

}

}