Moving a ball around the screen in p5.js - javascript

I wanted to move the ellipse around the screen using if statement I only made it move left and down and right but I couldn't manage to move it up so it complete a full cycle that is my code:
var x;
var y;
var r=33;
var speed=4;
function setup() {
createCanvas(660, 500);
x=width;
y=0;
}
function draw() {
background("black");
ellipse(x,y,r)
if(x<=width&&x>=0)
{
if(y<=0)
x-=12;
else if(y>=height)
x+=21;
}
if(y>=0&&y<=height)
{
if(x>=width)
y-=21;
else if(x<=0)
y+=21
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

The issue is, that the ball does not stop exactly at the borders of the window. It slightly moves beyond. Use min() and max(), to keep the ball in bounds.
e.g.:
x = max(r, x - speed_x);
y = min(height-r, y + speed_y);
See the example
var x, y, r=25, speed_x = 12, speed_y = 12;
function setup() {
createCanvas(500, 200);
x=width-r;
y=r;
}
function draw() {
background("black");
ellipse(x,y, r*2)
// move left
if (y == r && x > r)
x = max(r, x - speed_x);
// move down
if (x == r && y < height-r)
y = min(height-r, y + speed_y);
// move right
if (y == height-r && x < width-r)
x = min(width-r, x + speed_x);
// move up
if (x == width-r && y > r)
y = max(r, y - speed_y);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

Related

p5.js mouseclick move over Canvas

I am trying to solve a school assignment in p5 JavaScript. I want something to move over the canvas after one mouseclick. But it only moves a little bit and I have to click several times to get it all the way over. What have I done wrong? Shouldn't the loop make it move all the way? Can post the whole code if needed.
function CanvasPressed()
{
if ( mouseX > 0 && mouseX < 638 && mouseY > 0 && mouseY < 100 )
{
Bird.stop();
Bird.play();
for ( let b = 640; b > 0; b--)
{
x = x - 0.05;
}
}
Alright, so you've got a couple misunderstood things, here:
// purely aesthetic but in javascript functions are usually written as (i think) camelCase
// so: canvasPressed() rather than CanvasPressed(), Class-es start with upper case
function CanvasPressed()
{
// you can check for width & height if you want if ( mouseX > 0 && mouseX < width)
if ( mouseX > 0 && mouseX < 638 && mouseY > 0 && mouseY < height )
{
for ( let b = 640; b > 0; b--) // this, in this case, does the same as for(let i = 0; i < width; i ++)
{
x += 0.05
// 0.05 is very little, only a very small part of a pixel
}
// here it moves 0.05 * 640 (0.05 + 0.05 + 0.05 ... )
}
}
javascript naming conventions thingy if you want
and this is how i would make it move through the canvas:
let mouseWasPressed = false;
let x = 20
function draw() {
background(20);
ellipse(x, height / 2, 40)
if(mouseWasPressed) // don't need {} for 1 line after the if()
x ++; // x = x + 1 shortening in javascript
// }
}
function mousePressed(){
mouseWasPressed = true
}
if you don't want the "animation" you could use your previous method, but change the 0.05 to 1:
for(let i = 0; i <= width; i ++) // you don't have to add parentheses for 1 line
x ++; // x = x + 1 just a shortening in javascript
OR just
x = width // or x += width (x = x + width)

Collision detection and resolving in a generalized coordinate system

I have this game I'm working on with a 2 dimensional array with coordinates and a generalized coordinate system (i.e. player x = 0 and y = 0, it's standing in the first item in the array). I'm trying to work out a solution to collision detection and resolving, but I'm having a really hard time.
This is my code so far (detecting collisions but not resolving them correctly and I have just no clue how to fix thayut):
let xOffset = 0;
let yOffset = 0;
let self = this;
let a, b, c, d, e, f, g, h;
// get the 4 colliding tiles from the layout array
function reset() {
a = Math.floor(self.x);
b = Math.ceil(self.x);
c = Math.floor(self.y);
d = Math.ceil(self.y);
e = (currentClassRoom.layout[c] || [])[a];
f = (currentClassRoom.layout[c] || [])[b];
g = (currentClassRoom.layout[d] || [])[a];
h = (currentClassRoom.layout[d] || [])[b];
}
function X() {
// x collisions
// get the distance inside the block from corresponding direction
if (Walkable.indexOf(f) < 0 || Walkable.indexOf(h) < 0) { xOffset += -(self.x - a) }
if (Walkable.indexOf(e) < 0 || Walkable.indexOf(g) < 0) { xOffset += 1 - (self.x - a) }
}
function Y() {
// y collisions
// get the distance inside the block from corresponding direction
if (Walkable.indexOf(e) < 0 || Walkable.indexOf(f) < 0) { yOffset += 1 - (self.y - c) };
if (Walkable.indexOf(g) < 0 || Walkable.indexOf(h) < 0) { yOffset += -(self.y - c) };
}
// run and resolve
reset();
Y();
this.y += yOffset;
X();
this.x += xOffset;
Is there something wrong with my code or is a generalized coordinate system a bad idea in my case? I haven't made anything like this and can't seem to find solutions online (which might be an indicator that the way I'm thinking about this is bad but I just don't know)

Blocking the movement of an object in a boundary

I am trying to make an web application that would simulate a joystick control. I have managed to generate 2 circles on click. (one stationary as a boundary and another following my mouse cursor as a joystick). Right now I am trying to figure out how to restrict the joystick movement inside the generated boundary. Any help would be appreciated.
<div class="eye"> </div>
<div class="ball">
</div>
</div>
<script>
var balls = document.getElementsByClassName("ball");
document.onmousemove = function () {
var x = event.clientX + "px";
var y = event.clientY + "px";
// event.clientX => gets the horizontal coordinate of the mouse
// event.clientY => gets the vertical coordinate of the mouse
// window.innerWidth => gets the browser width
// window.innerHeight => gets the browser height
for (var i = 0; i < 20; i++) {
balls[i].style.left = x;
balls[i].style.top = y;
balls[i].style.transform = "translate(x , y)"
}
Maybe quickest solution is to divide x to a number. Tricky but should work.
balls[i].style.left = x /10;
balls[i].style.top = y/10;
and why do you need that loop? It will prevent this solution.
At a mouse click xs and ys are taken as datum points.
if (x < xs - barrierDist) {
x = xs - barrierDist;}
else if (x > xs + barrierDist) {
x = xs + barrierDist;}
else {
x = x;}
/* barrier for y movement*/
if (y < ys - barrierDist) {
y = ys - barrierDist;}
else if (y > ys + barrierDist) {
y = ys + barrierDist;}
else {
y = y;}

JS Canvas - Filling a bean-shaped polygon

I have a problem with JS canvas ctx.fill() filling outside of my polygonal shape.
Here's how my code works :
ctx.beginPath()
// Here are for loops that draws a the closed shape using
ctx.stroke();
ctx.fill();
Here are the for loops:
var sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2;
for(var i = 0; i < n; i += Math.floor(n/steps)){
var radius = Math.exp(-2*i/n)*rmax+rmin;
radius += frequencyData[i]/255*(n-i + 200)/n*50;
var angle = -Math.PI/2 - i/n*2*Math.PI;
var x = radius*Math.cos(angle) + w/2+rmin/2;
var y = radius*Math.sin(angle) + (h-110)/2+rmin/2 + analyser_offset;
if (i == 0) {
gctx.moveTo(x,y);
sx1 = x;
sy1 = y;
}else if (i == n-1){
ex1 = x;
ey1 = y;
}else{
gctx.lineTo(x,y);
}
spd += frequencyData[i];
}
for(var i = 0; i < n; i += Math.floor(n/steps)){
var radius = Math.exp(-2*i/n)*rmax+rmin;
radius -= frequencyData[i]/255*(n-i + 200)/n*50;
var angle = -Math.PI/2 - i/n*2*Math.PI;
var x = radius*Math.cos(angle) + w/2+rmin/2;
var y = radius*Math.sin(angle) + (h-110)/2+rmin/2 + analyser_offset;
if (i == 0) {
gctx.moveTo(x,y);
}else if (i == 20){
sx2 = x;
sy2 = y;
}else if (i == n-1){
ex2 = x;
ey2 = y;
} else {
gctx.lineTo(x,y);
}
}
gctx.moveTo(sx1, sy1);
gctx.lineTo(sx2, sy2);
gctx.moveTo(ex1, ey1);
gctx.lineTo(ex2, ey2);
So the first for loop draws the outter side of the shape, the second for loop draws the inner side. And then the sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2 variables are here to ensure that in the last 4 lines, it closes the shape (by adding vertical line between the outter and inner lines). Maybe this problem happens because I draw the lines in an unusual order? (like drawing a rectangle by starting with 2 horizontal lines and then adding 2 vertical ones)
Here's what I get after the fill() :
And this is what I would like to have:
So could you guide me on how I'm supposed to achieve this?
Ok I fixed it by making the second loop go in the reverse order like this: for (var i = n-1; i >= 0; i -= Math.floor(n/steps)) so it draws the polygon in a more usual order and that works! I don't even need to close it using the last 4 lines which was what I wanted so that's great!

How to get a collision function to work properly in Javascript?

I'm pretty close to finish this program using Canvas. This program is simply a ball that falls down from top to bottom and there's a basket that catches it, that is it. However, I have the following issues.
1) When I press the left or right arrows from keyboard for more than couple of times somehow the basket will go all the way to either left or right and disappear.
2) When the ball hits the basket nothing happens (my Collision detection function doesn't work properly). However, I should say that my collision detection works just fine when the balls hits the ground (alert message shows up saying "Ball hit the ground").
Is there a way to show a message on the top of the canvas like "1 point" every time the basket catches a ball ( if there are 5 balls then I should get a message to say "5 points")
Can someone tell me what I am doing wrong please? Thank you so much in advance!!
LIVE CODE HERE
http://codepen.io/HenryGranados/pen/QNOZRa
Here's my code :
//create the constructor for the class pad
function Pad() {
//initialisation code will go here
//create private variables for the x and y coordinates
var x = 200,
y = 200,
vx = 0,
vy = 0,
padX = (canvas.width - 20) / 2;
rightPressed = false,
leftPressed = false;
//create the draw function to give us the draw method
//it accepts one parameter which is the context from the canvas it is drawn on
Pad.prototype.draw = function (context) {
//save the state of the drawing context before we change it
context.save();
//set the coordinates of the drawing area of the new shape to x and y
context.translate(x, y);
//start the line (path)
context.beginPath();
context.fillStyle = "#800000"; // This is the basket
context.moveTo(15, 20);
context.bezierCurveTo(20, 100, 150, 100, 150, 20);
//close the path
context.closePath();
context.fill();
//go ahead and draw the line
context.stroke();
//restore the state of the context to what it was before our drawing
context.restore();
}
//create a public property called X (note caps!)
Object.defineProperty(this, 'X',
{
//getter
get: function () {
//return the value of x (lower case)
return x;
},
//setter
set: function (value) {
//ste the value of x (lower case)
x = value;
}
}
)
//create a public property called Y (note caps!)
Object.defineProperty(this, 'Y',
{
//getter
get: function () {
//return the value of y (lower case)
return y;
},
//setter
set: function (value) {
//ste the value of y (lower case)
y = value;
}
}
)
padX = function () {
if (rightPressed && padX < canvas.width - 20) {
padX += 5;
}
else if (leftPressed && padX > 0) {
padX -= 5;
}
}
Pad.prototype.move = function () {
//change the x axis by the x velocity
x += vx;
//change the y axis by the y velocity
y += vy;
}
Pad.prototype.setVector = function (vector) {
//set the vx value based on this vector
vx = vector.VX;
//set the vy value based on this vector
vy = vector.VY;
}
//public method to set the vector of the saucer
Pad.prototype.accelerate = function (Acceleration) {
//set vx
vx += Acceleration.AX;
////set vy
//vy += Acceleration.AY;
}
//create a public property called Top
Object.defineProperty(this, 'Top',
{
//getter
get: function () {
//return the y posn less the height
return y - 10;
}
}
)
//create a public property called Bottom
Object.defineProperty(this, 'Bottom',
{
//getter
get: function () {
//return the y posn plus the height
return y + 10;
}
}
)
//create a public property called Left
Object.defineProperty(this, 'Left',
{
//getter
get: function () {
//return the x posn less the width
return x - 80;
}
}
)
//create a public property called Right
Object.defineProperty(this, 'Right',
{
//getter
get: function () {
//return the x posn plus the width
return x + 80;
}
}
)
}
(1) There are at least two options to solve this problem
in your Pad.move function you could limit the change of x. You change it only when its within canvas width:
Pad.prototype.move = function() {
//change the x axis by the x velocity
var canvasWidth = 400,
padWidth = 150;
if (x + vx < canvasWidth - padWidth && x + vx >= 0)
x += vx;
//change the y axis by the y velocity
y += vy;
}
or similarly as you create ground you could create walls on both sides and collide pad with them.
(2) There is no collision handling between ball and pad:
place it in function drawFrame():
if (collision.Overlapping(ball, pad)) {
context.strokeText('ball hit pad!',20,100)
//..do some other stuff here
}
(3)Which brings us to showing message on canvas, you can just draw text on canvas
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Demo: http://codepen.io/anon/pen/RaxwLp?editors=1011
Pad was blocked because when key is pressed acceleration is always increased, so in order to move in opposite direction first it must go to 0 which takes quite some time. I have added keyup event and when key is released acceleration is zeroed:
if(leftPressed){
acceleraton.HThrust(.01);
}else if(rightPressed){
acceleraton.HThrust(-.01);
}else{
acceleraton.Halt();
}

Categories