I'm making a ball class / object that bounces around like the DVD screen thing. But when the balls hit the edge the variable that controles their X and Y speeds dont change.
I've already tried running the same IF statement outside the class whith the exact same names and everything and then it works but as soon as i do it inside the class it breaks.
var dvd1;
var dvd2;
function setup() {
createCanvas(400, 400);
dvd1 = new dvdlogo();
dvd2 = new dvdlogo();
}
function draw() {
background(255);
dvd1.move(2, 3);
dvd1.show(200, 200, 200);
dvd2.move(3, 2);
dvd2.show(255, 0, 0);
}
class dvdlogo {
constructor() {
this.x = 0;
this.y = 0;
}
move(speedX, speedY) {
this.x = this.x + speedX;
this.y = this.y + speedY;
//speedX and Y arn't changing when the statement is true
if (this.y >= height || this.y <= 0) {
speedY = -speedY;
}
if (this.x >= width || this.x <= 0) {
speedX = -speedX;
}
}
show(r, g, b) {
noStroke();
fill(r, g, b);
ellipse(this.x, this.y, 50, 50);
}
}
this is what the balls should do: https://editor.p5js.org/wiski/sketches/06p20NSgZ
this is what they do: https://editor.p5js.org/wiski/sketches/mym6EJenN
(If you know how to fix it tell me on here if u change the code in the web editor it doesn't send the changes to me thx in advance)
speedX and speedY are no global variables, they are parameters of the function move. speedY = -speedY changes the value of the parameter, but that doesn't effect the call of the function with the constant values dvd1.move(2, 3);.
The value of speedX and speedY is always 2 repectively 3, because the function move is called with this constant values.
Add attributes .speedX and .speedY to the class dvdlogo and use the attributes rather than parameters:
function setup() {
createCanvas(400, 400);
dvd1 = new dvdlogo(2, 3);
dvd2 = new dvdlogo(3, 2);
}
function draw() {
background(255);
dvd1.move();
dvd1.show(200, 200, 200);
dvd2.move();
dvd2.show(255, 0, 0);
}
class dvdlogo {
constructor(speedX, speedY) {
this.x = 0;
this.y = 0;
this.speedX = speedX;
this.speedY = speedY;
}
move() {
this.x = this.x + this.speedX;
this.y = this.y + this.speedY;
if (this.y >= height || this.y <= 0) {
this.speedY = -this.speedY;
}
if (this.x >= width || this.x <= 0) {
this.speedX = -this.speedX;
}
}
You are so close!
You are passing the xSpeed and the ySpeed in each frame with the .move() function this is making your if statement redundant!
What I recommend is specifying the xSpeed and ySpeed in the constructor, this way it'll be stored in the object for you, so your if statement can alter the fields directly!
var dvd1;
var dvd2;
function setup() {
createCanvas(400, 400);
dvd1 = new dvdlogo(2, 3);
dvd2 = new dvdlogo(3, 2);
}
function draw() {
background(255);
dvd1.move();
dvd1.show(200, 200, 200);
dvd2.move();
dvd2.show(255, 0, 0);
}
class dvdlogo {
constructor(xSpeed, ySpeed) {
this.x = 0;
this.y = 0;
this.speedX = xSpeed;
this.speedY = ySpeed;
}
move() {
this.x = this.x + this.speedX;
this.y = this.y + this.speedY;
if (this.y >= height || this.y <= 0) {
this.speedY = -this.speedY;
}
if (this.x >= width || this.x <= 0) {
this.speedX = -this.speedX;
}
}
show(r, g, b) {
noStroke();
fill(r, g, b);
ellipse(this.x, this.y, 50, 50);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
Related
I'm trying to create a ball hop game where the ball has to jump from one platform to another. However, I'm struggling with having the ball land on the platform and I think it might be because the platform itself is moving rather than the camera/background. Does anyone know a way I could move the camera, or a solution to the ball landing on the platform even if the platform is moving?
This is my code now.
let gravity = 1.5;
class Ball{
constructor(){
this.x = 0;
this.y= 200;
this.d = 30;
// constant velocity of the ball
this.v = 0.001;
this.xg = 0;
this.yg = 0;
}
draw() {
// stroke(0, 255, 255);
ellipse(this.x, this.y, this.d);
}
update() {
this.draw();
this.y += this.yg;
// ensures that ball doesnt go past screen
if (this.y + this.d + this.yg <= windowHeight) {
this.yg += gravity;
}
}
}
class Platform{
constructor({x,y}){
this.x = x;
this.y= y;
this.w = 30;
this.h = 30;
this.s = 1;
}
draw(){
push();
rectMode(CENTER);
rotateX(1.45);
rect(this.x,this.y,this.w,this.h);
pop();
}
move(){
this.y = this.y + this.s
this.s = this.s + 0.0001
}
}
let ball;
let plat;
let scrollOffset = 0;
function setup(){
createCanvas(710, 400, WEBGL);
ball = new Ball();
plat = [
(new Platform({x:0,y:200})),
(new Platform({x:50,y:100})),
(new Platform({x:0,y:0})),
(new Platform({x:-50,y:-100})),
(new Platform({x:0,y:-200})),
];
}
function draw(){
background(255);
ball.update();
plat.forEach((plat) => {
plat.draw();
plat.move();
});
plat.forEach((plat) => {
if (
ball.y + ball.d <= plat.y &&
ball.y + ball.d + ball.yg >= plat.y &&
ball.x + ball.d >= plat.x &&
ball.x <= plat.x + plat.w
) {
ball.yg = 0;
}
});
}
function keyPressed() {
if (keyCode === UP_ARROW) {
ball.yg -= 20;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
I want to create a function rotating where my triangle can pivot on itself like a wheel but I have a conflict with a part of my code which moves my triangle and I tried many solutions without success, maybe if one of you have a clue it will be nice!
This is my code:
let triangle1;
let triangle2;
let triangle3;
let triangle4;
let triangle5;
let triangle6;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;
function setup() {
startColor = color("hsl(144, 100%, 61%)");
endColor = color("hsl(0,77%,36%)");
createCanvas(windowWidth, 800);
//creer notre triangle
triangle1 = new Triangles(200, 100, 0, 4);
/* triangle2 = new Triangles(100, 50, 2, 0);
triangle3 = new Triangles(50, 200, -1, 4);
triangle4 = new Triangles(250, 400, 4, 4);
triangle5 = new Triangles(150, 500, 0, 2);
triangle6 = new Triangles(350, 500, -4, 2);*/
}
function draw() {
colorMode(RGB);
background(252, 238, 10);
triangle1.show();
triangle1.move();
/* triangle2.show();
triangle2.move();
triangle3.show();
triangle3.move();
triangle4.show();
triangle4.move();
triangle5.show();
triangle5.move();
triangle6.move();
triangle6.show();*/
}
class Triangles {
//configuration de l'objet
constructor(triX, triY, speedX, speedY) {
this.x = triX;
this.y = triY;
this.speedX = speedX;
this.speedY = speedY;
}
show() {
if (amt >= 1) {
amt = 0;
let tmpColor = startColor;
startColor = endColor;
endColor = tmpColor;
}
amt += 0.03;
let colorTransition = lerpColor(startColor, endColor, amt);
noStroke();
fill(colorTransition);
triangle(this.x, this.y, this.x + 25, this.y + 40, this.x - 25, this.y + 40);
}
move() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > width || this.x < 0) {
this.speedX *= -1;
}
if (this.x + 25 > width || this.x + 25 < 0) {
this.speedX *= -1;
}
if (this.x - 25 > width || this.x - 25 < 0) {
this.speedX *= -1;
}
if (this.y > height || this.y < 0) {
this.speedY = this.speedY * -1;
}
if (this.y + 40 > height || this.y + 40 < 0) {
this.speedY = this.speedY * -1;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
Use the matrix transformations to rotate, scale and translate an shape. The Operations rotate, scale and translate define a new transformation matrix and multiply the current matrix with the new matrix.
If you want to transform a single shape (triangle), you nee to save current matrix before the transformation with push and restore the matrix after the transformation with pop.
push();
// [...] scale, rotate, translate
// [...] draw shape
pop();
If you want to rotate a shape about a local pivot point, you need to draw the shape around (0, 0). Rotate the shape and move the rotated shape to its target position:
shapeTrasformation = translate * rotate * scale
Local rotation of an equilateral triangle:
push()
translate(this.x, this.y, this.z);
rotate(this.angle)
scale(30);
triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);
pop();
this.angle += 0.01;
let triangle1;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;
function setup() {
startColor = color("hsl(144, 100%, 61%)");
endColor = color("hsl(0,77%,36%)");
createCanvas(windowWidth, windowHeight);
//creer notre triangle
triangle1 = new Triangles(200, 100, 0, 4);
}
function draw() {
colorMode(RGB);
background(252, 238, 10);
triangle1.show();
triangle1.move();
}
class Triangles {
//configuration de l'objet
constructor(triX, triY, speedX, speedY) {
this.x = triX;
this.y = triY;
this.speedX = speedX;
this.speedY = speedY;
this.angle = 0;
}
show() {
if (amt >= 1) {
amt = 0;
let tmpColor = startColor;
startColor = endColor;
endColor = tmpColor;
}
amt += 0.03;
let colorTransition = lerpColor(startColor, endColor, amt);
noStroke();
fill(colorTransition);
push()
translate(this.x, this.y, this.z);
rotate(this.angle)
scale(30);
triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);
pop();
this.angle += 0.01;
}
move() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > width || this.x < 0) {
this.speedX *= -1;
}
if (this.x + 25 > width || this.x + 25 < 0) {
this.speedX *= -1;
}
if (this.x - 25 > width || this.x - 25 < 0) {
this.speedX *= -1;
}
if (this.y > height || this.y < 0) {
this.speedY = this.speedY * -1;
}
if (this.y + 40 > height || this.y + 40 < 0) {
this.speedY = this.speedY * -1;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
class Bubble {
constructor() {
var allInstances = [];
createCanvas(600,600);
var radius = random(10,100);
this.x = random(0, 600);
this.y = random(0, 600);
this.width = radius;
this.height = radius;
var x = random(0,300);
var y = random(0,300);
var z = random(0,300);
this.velocityX = random(-5, +5);
this.velocityY= random(-5, +5);
this.display = function() {
stroke(10);
fill(x,y,z);
ellipse(this.x, this.y, this.width, this.height);
}
// the below block of code is the one I am having trouble with. the bubbles do not bounce off of the vertical edges of the screen.
if(this.x > 600 || this.x < 0) {
this.velocityX = this.velocityX * -1;
// the above block of code is the one I am having trouble with
}
this.move = function() {
this.x = this.x + this.velocityX;
this.y = this.y + this.velocityY;
}
}
}
Edit:
The program runs and multiple bubbles appear in the way the program is shown above, but I cannot get them to bounce off of the sides of the canvas. Can you help me?
Answer to:
[...] but I cannot get them to bounce off of the sides of the canvas. [...]
You have to evaluate if the bubbles hit side of the canvas and to change the direction of the bubbles in Bubble.move:
class Bubble {
// [...]
constructor() {
// [...]
this.move = function() {
this.x = this.x + this.velocityX;
this.y = this.y + this.velocityY;
if (this.x > 600-this.radius || this.x < this.radius) {
this.velocityX *= -1;
}
if (this.y > 600-this.radius || this.y < this.radius) {
this.velocityY *= -1;
}
}
}
}
I created flappy bird game following The Coding Train's tutorial on Youtube.
(https://www.youtube.com/watch?v=cXgA1d_E-jY)
The original instruction created pipes and ball as objects, but I modified mine to be created as classes instead.
I have two problems.
1)The pipes indices I created in pipes array did not show on screen,
2)ball.goup();, which would be triggered by keyPressed() does nothing on screen, but console.log shows it is working.
How should I revise my code? Thanks.
let ball;
let pipes = [];
function setup() {
createCanvas(700, 600);
ball = new Ball();
pipes.push(new Pipe());
}
function draw() {
background(0);
ball.show();
ball.falldown();
if (frameCount % 60 == 0) {
pipes.push(new Pipe());
}
//since have splice, count from back to avoid uncounted indices
for (let i = pipes.length - 1; i >= 0; i--) {
pipes[i].show();
pipes[i].move();
if (pipes[i].hits(ball)) {
console.log("hit");
}
if (pipes[i].offscreen()) {
pipes.splice(i, 1);
}
}
}
function keyPressed() {
if (key == ' ') {
ball.goup;
console.log('up');
}
}
class Ball {
constructor(x = 50, y = height / 2, g = 0.6, v = 0, l = -20) {
this.x = x;
this.y = y;
this.gravity = g;
this.velocity = v;
this.lift = l;
}
goup() {
this.velocity += this.lift;
}
falldown() {
this.velocity += this.gravity;
this.velocity *= 0.9;
this.y += this.velocity;
if (this.y > height) {
this.y = height;
this.velocity = 0;
}
if (this.y < 0) {
this.y = 0;
this.velocity = 0;
}
}
show() {
noStroke();
fill(255);
ellipse(this.x, this.y, 25, 25);
}
}
class Pipe {
constructor(x =width, y=0, w=100, t=random(2/height), b=random(2/height), s=2, c=false) {
this.x = x;
this.y = y;
this.w = w;
this.top = t;
this.bottom = b;
this.speed = s;
this.colorchange = c;
}
hits(ball) {
if (ball.y < this.top || ball.y > height - this.bottom) {
if(ball.x > this.x && ball.x < this.x + this.w){
this.colorchange = true;
return true;
}
}
this.colorchange = false;
return false
}
move() {
this.x -= this.speed;
}
show() {
fill(255);
if (this.colorchange) {
fill(255, 0, 0);
}
rect(this.x, this.y, this.w, this.top);
rect(this.x, height - this.bottom, this.w, this.bottom);
}
//delete pipe indices from the array when pipes are off screen
offscreen() {
if (this.x < -this.w) {
return true;
} else {
return false;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
The logic is sound, but there are a couple of typos. First, the ball isn't going up because by using this.goup you're not executing the method: the parenthesis are missing. Change that line (inside the keyPressed() function) for: this.goup() and the ball will start responding to the keyboard input.
As for the pipes, they are drawing, but the default top and bottom are being defined as random(2 / height), and, being that height is equal to 600, it will result in a final value between 0 and 0.003333. To fix that, just rewrite the value assignment as t=random(height/2), b=random(height/2).
let ball;
let pipes = [];
function setup() {
createCanvas(700, 600);
ball = new Ball();
pipes.push(new Pipe());
}
function draw() {
background(0);
ball.show();
ball.falldown();
if (frameCount % 60 == 0) {
pipes.push(new Pipe());
}
//since have splice, count from back to avoid uncounted indices
for (let i = pipes.length - 1; i >= 0; i--) {
pipes[i].show();
pipes[i].move();
if (pipes[i].hits(ball)) {
//console.log("hit");
}
if (pipes[i].offscreen()) {
pipes.splice(i, 1);
}
}
}
function keyPressed() {
if (key == ' ') {
ball.goup();
//console.log('up');
}
}
class Ball {
constructor(x = 50, y = height / 2, g = 0.6, v = 0, l = -20) {
this.x = x;
this.y = y;
this.gravity = g;
this.velocity = v;
this.lift = l;
}
goup() {
this.velocity += this.lift;
}
falldown() {
this.velocity += this.gravity;
this.velocity *= 0.9;
this.y += this.velocity;
if (this.y > height) {
this.y = height;
this.velocity = 0;
}
if (this.y < 0) {
this.y = 0;
this.velocity = 0;
}
}
show() {
noStroke();
fill(255);
ellipse(this.x, this.y, 25, 25);
}
}
class Pipe {
constructor(x = width, y = 0, w = 100, t = random(height/2), b = random(height / 2), s = 2, c = false) {
this.x = x;
this.y = y;
this.w = w;
this.top = t;
this.bottom = b;
this.speed = s;
this.colorchange = c;
}
hits(ball) {
if (ball.y < this.top || ball.y > height - this.bottom) {
if (ball.x > this.x && ball.x < this.x + this.w) {
this.colorchange = true;
return true;
}
}
this.colorchange = false;
return false
}
move() {
this.x -= this.speed;
}
show() {
fill(255);
if (this.colorchange) {
fill(255, 0, 0);
}
rect(this.x, this.y, this.w, this.top)
rect(this.x, height - this.bottom, this.w, this.bottom);
}
//delete pipe indices from the array when pipes are off screen
offscreen() {
if (this.x < -this.w) {
return true;
} else {
return false;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
I am making a ball class, and in that class i want to make the ball bounce off the wall, but it remains stuck.
I have tried making the ball bounce in the draw function, but then it didnt even stopped at the wall. I tried setting the this.x and this.y away from the limit so it doesnt loop, but no succes. I am left without choises. I dont know what to do. I am just starting out and im quite enjoying coding, but this is giving me a headache.
let r;
let g;
let b;
let xpos;
let ypos;
let size;
let xlimit;
let ylimit;
let x_limit;
let y_limit;
let xspeeddir;
let yspeeddir;
function setup() {
createCanvas(800, 450);
xpos = random(20, width);
ypos = random(20, height);
ball = new Ball(xpos, ypos);
xlimit = width-15;
ylimit = height-15;
x_limit = 15;
y_limit = 15;
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
}
function draw() {
background(255, 238, 112);
ball.appear(r, g, b);
ball.move(xspeeddir, yspeeddir);
}
class Ball {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
}
appear(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
fill(this.r, this.g, this.b);
noStroke();
ellipse(this.x, this.y, this.size, this.size);
}
move(xspeed, yspeed) {
this.speedx = xspeed;
this.speedy = yspeed;
if (this.x > xlimit) {
this.speedx = -Math.abs(this.speedx);
this.x = xlimit-1;
}
if (this.x < x_limit) {
this.speedx = Math.abs(this.speedx);
this.x = x_limit + 1;
}
if (this.y > ylimit) {
this.speedy = -Math.abs(this.speedy);
this.y = ylimit - 1;
}
if (this.y < y_limit) {
this.speedy = Math.abs(this.speedy);
this.y = ylimit + 1;
}
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
No errors in the console
The speed of the ball is continuously "reset", when .move() is called. Set the speed in the constructor and use the attributes this.speedx and this.speedy in .move():
xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);
function draw() {
background(255, 238, 112);
ball.appear(r, g, b);
ball.move();
}
It is not sufficient to invert the speed, you've to limit the position of the ball to the bounds of the window, too. If the ball exceeds the limit, then clamp the position in bounds.
move() {
if(this.x >= xlimit) {
this.x = xlimit; // limit to xlimit
this.speedx = -(this.speedx)
}
if (this.x <= this.size/2) {
this.x = this.size/2; // limit to this.size/2
this.speedx = -(this.speedx)
}
if (this.y >= ylimit) {
this.y = ylimit; // limit to ylimit
this.speedy = -(this.speedy)
}
if (this.y <= this.size/2) {
this.y = this.size/2; // limit to this.size/2
this.speedy = -(this.speedy)
}
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
}
let r, g, b;
let xpos, ypos;
let size;
let xlimit, ylimit;
let x_limit, y_limit;
let xspeeddir, yspeeddir;
function setup() {
createCanvas(500, 250);
xpos = random(20, width);
ypos = random(20, height);
xlimit = width-15;
ylimit = height-15;
x_limit = 15;
y_limit = 15;
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);
}
function draw() {
background(255, 238, 112);
ball.appear(r, g, b);
ball.move();
}
class Ball {
constructor(x, y, xspeed, yspeed) {
this.x = x;
this.y = y;
this.size = 30;
this.speedx = xspeed;
this.speedy = yspeed;
}
appear(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
fill(this.r, this.g, this.b);
noStroke();
ellipse(this.x, this.y, this.size, this.size);
}
move() {
if(this.x >= xlimit) {
this.x = xlimit; // limit to xlimit
this.speedx = -(this.speedx)
}
if (this.x <= this.size/2) {
this.x = this.size/2; // limit to this.size/2
this.speedx = -(this.speedx)
}
if (this.y >= ylimit) {
this.y = ylimit; // limit to ylimit
this.speedy = -(this.speedy)
}
if (this.y <= this.size/2) {
this.y = this.size/2; // limit to this.size/2
this.speedy = -(this.speedy)
}
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>