[ad_1]
This video continues the discussion of conditional statements and looks at a classic scenario — a circle that bounces off the edges of the canvas.
Next video:
Support this channel on Patreon:
Contact:
Send me your questions and coding challenges!:
Link to code on Github:
p5.js:
For More p5.js Videos:
by
Tags:
Your jokes aren't funny and your way of demonstration waste a lot of time. So, it would be better if you concentrate more on the content and not make it fancy.
If (x > width || x < 0) {
Speed *= -1
}
does anyone know how to make the ball bounce back again and again? The code could only make the ball bounce one time@@
Hey how can I include acceleration to code ? Means like gravity…I need to know fps and include it in code…Help pls. 🙂 thnx
Thanks for the great video! I tried to solve it on my own before looking at your solution and i got a way involving a 2nd variable. This is my code:
var x = 10;
var a = 0;
function setup() {
createCanvas(600, 400);
}
function draw() {
background(255);
rect(0, 0, 599, 399);
x -= 3;
if (a === 0) {
x += 6;
}
if (x > width – 10) {
a += 1;
}
if (x < 10) {
a -= 1;
}
ellipse(x, 200, 20, 20);
}
function mousePressed() {
x = 10;
}
Hi, i have tried to improve the code, but i have a problem when the ball hits the edges. In the bounce function i tried to use else {} or else if (ball.x == && ball.y == 0 || ball.x == width && ball.y == 0 etc.), but it does not work either any suggestions? Also here the code does not recognize || Code: else if (ball.x == && ball.y == 0 || ball.x == width && ball.y == 0 etc.
Code:
function setup() {
createCanvas(800, 800);
}
function draw() {
background(51);
move();
bounce();
display();
}
var ball = {
x: 400,
y: 400,
xSpeed: 10,
ySpeed: 10
};
function move() {
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;
}
// There is the problem part
function bounce() {
if (ball.x == width || ball.x == 0)
ball.xSpeed = -ball.xSpeed;
else if (ball.y == height || ball.y == 0)
ball.ySpeed = -ball.ySpeed;
// This does not work
else {
ball.xSpeed == -ball.xSpeed;
ball.ySpeed == -ball.ySpeed;
}
}
function display() {
fill(255);
ellipse(ball.x, ball.y, 25, 25);
}
Try to run it, you will see better what is happening.
Thanks for any answer 🙂
A little info:
An If statement doesn't strictly require a boolean expression.
You can give any variable inside the condition brackets, and as long as it's value is not zero, false, or undefined, the loop will execute.
if it gets false, 0 or undefined, the statements inside the loop will not run.
an interesting idea is to declare a variable but not assign a value to it. the default value is undefined.
assign a value to it in another if statement, and have another if statement as:
if (variable name){whatever}
what this will do is, as soon as the variable is assigned a value (well, other than zero), the loop will start running.
the variable width doesnt work 🙁
Idk if this is the video I should ask this but how can I make it so that it bounces of a rectangle and edges of window? I have something like:
var ball = {
x: 300,
y: 200,
dx: 10,
dy: -10
}
function draw() {
createCanvas(windowWidth, windowHeight);
background(0);
fill(0,0,255);
ellipse(ball.x, ball.y, 24, 24);
stroke(0,0,255);
noFill();
rect(100,100,200,200);
ball.x += ball.dx;
ball.y += ball.dy;
//bouncing with wall
if (ball.x < 0 || ball.x > width) { //if outside screen
ball.dx *= -1;
}
if (ball.y < 0 || ball.y > height) {
ball.dy *= -1;
}
//bouncing with box
if (ball.y > 100 && ball.y < 300) { //if ball is inside left or right of box
…
}
}
how do you make a brickbreaker gam
Hi, Daniel!
I wonder if you could do as coding chalenge a simple 2D Inverse Kinematic solver.
Thanks.
Marcelo
i making game for my school project like hoppy beaver game from khan academy using p5.js script but i am confused …how to import the code and make a canvas
For anyone using the newest p5.js – println() doesn't seem to work. I checked the reference and print() is the right function!
I'm trying to make that game where it bounces of a moving platform
Hey Daniel… I really love your vids… But what I'm currenly working on I want to make a ellipse splash like a ellipse starts and grows on mouseclick I can do that directly in draw… but that wont work… when I try a for loop the problem is there is no way to add a delay between every round of the for loop… so there's no animation at all…. so How can I fix that pls….
You are great. I am very much glad for this video. It is work for me. I already use it setInterval and requestAnimationFram. May be it will also work in settimeout…..Thank you
i get the following error: Uncaught ReferenceError: println is not defined
Am I missing a library? The print command works.
At 6:13 when you explain adding{ speed = -3}, it is actually {speed = speed – 3}, otherwise it wont work.
I love your tutorials! They have really got me committed to learning p5 javascript. I'm still having beginner problems though. I was doing this tutorial and at the end I decided to add a review exercise for the last few videos using map and random functions. So first I set a fill for the ellipse using r and b variables mapped to x to create a color gradient in the circle as it moved. Next I wanted to make a g variable that updated to a random value every cycle. When the g was a static number value the mapped r and b gradients worked just fine. When I set g=random(0,255); it updated every frame, which was no good. So I made an if(x==0) {g=random(0,255);} and something bizarre happened. It updated g every cycle like I wanted, but it stopped mapping my r and b variables. When I set if(x==width) {g=random(0,255);} the fill just defaulted to white until it updated at the end of the cycle. I just want my mapped color gradient with a random g variable that updates every cycle. How can I do that? Is this explained with something in a later tutorial?
This is the whole code segment for my ellipse; everything else was the same as in the video:
stroke(255);
strokeWeight(4);
var r=map(x,0,600,255);
if(x==0){g=random(0,255);}
var b=map(x,0,600,255,0);
fill(r,g,b);
ellipse(x,200,100,100);
Thanks for making these videos! It's the most fun I've ever had learning to code 🙂
how would you make the box keep bouncing back and forth?
I don't have colored words ;(
Hey daniel, I really like your tutorials. i've watched alot of the already but i've been stuck on something since the beginning. that is Easing in animation. I've seen some examples on the website. But for some reason I can't seem to understand how these cos() sin() stuff works. i tried making my own easing function. Which turned out to work pretty well 😛 but it's alot of code. what is the easiest way to make an object ease from one place to another?
awesome! loves these videos
Thanks. Really useful tutorial.
Leave a Reply