I have some problems with my code, which I can't really figure it out. So I started programming the pong game but I don't know how to include the paddle, so the ball bounces off when hitting the paddle but goes through, when it isn't. I've tried if- & else statements and a constrain function for this but it didn't work somehow.
My code:
float ballxposition = 0; float ballyposition = 0; float speedx = 0;
float speedy = 0;
void setup() { size(1024, 768); speedx = 10; speedy = 10; }
void draw() { background(255); fill(128); rectMode(CENTER);
rect(mouseX, 730, 250, 20);
fill(0, 0, 255); ellipse(ballxposition, ballyposition, 30, 30);
ballxposition = ballxposition + speedx; ballyposition = ballyposition
+ speedy;
if (ballxposition>width||ballxposition<0) {
speedx = speedx * -1; }
if (ballyposition>height||ballyposition<0) {
speedy = speedy * -1; } }
Would really appreciate your help. Thanks.
You may find this youtube video worth watching
it's created by a guy called Dan Shiffman his website is The Coding Train: http://thecodingtrain.com
Coding Challenge #67: Pong!
https://www.youtube.com/watch?v=IIrC5Qcb2G4
I find his coding challenges very useful
Related
Can anyone help me?
So, I'm supposed to have a ball that is moving horizontally, such that every time I press the mouse, a ball would get shoot vertically, then slows down due to friction. The vertical ball would stay in the old position but the player would reset.
How do I go about doing that without using classes?
Here my code so far:
boolean circleupdatetostop = true;
float x = 100;
float yshot = 880;
float speedshot = random(4,10);
float speedx = 6;
void setup() {
size(1280,960);
}
void draw() {
background(255);
stroke(0);
fill(0);
circle(x,880,80);
if (x > width || x < 0 ) {
speedx = speedx * -1;
}
if (circleupdatetostop) {
x = x + speedx;
}
if (circleupdatetostop == false) {
float locationx = x;
stroke(0);
fill(255,0,255);
circle(locationx,yshot,30);
yshot = yshot - speedshot;
}
}
void mousePressed () {
circleupdatetostop = !circleupdatetostop;
}
I'm not entirely sure if this is what you meant, but you could achieve shooting multiple balls by using ArrayList as well as processing's PVector to better handle the x and y coordinate pairs. If you wanted to look at classes, see this post.
import java.util.*;
// Whether the ball is moving or not
boolean circleupdatetostop = true;
// Information about the main_ball
PVector position = new PVector(100, 880);
PVector speed = new PVector(6, 0);
float diameter = 80;
// Information about the sot balls
ArrayList<PVector> balls_loc = new ArrayList<PVector>();
ArrayList<PVector> balls_speed = new ArrayList<PVector>();
float diameter_shot = 30;
float friction = 0.994;
void setup() {
size(1280, 960);
}
void draw() {
background(255);
stroke(0);
fill(0);
circle(position.x, position.y, diameter);
// Remember to consider the radius of the ball when bouncing off the edges
if (position.x + diameter/2 > width || position.x - diameter/2 < 0 ) {
speed.mult(-1);
}
if (circleupdatetostop) {
position.add(speed);
}
// Cycle through the list updating their speed and draw each ball
for (int i = 0; i<balls_loc.size(); i++) {
balls_speed.get(i).mult(friction+random(-0.05, 0.05));
balls_loc.get(i).add(balls_speed.get(i));
stroke(0);
fill(255, 0, 255);
circle(balls_loc.get(i).x, balls_loc.get(i).y, diameter_shot);
}
}
void mousePressed(){
// Add a new ball to be drawn
if(circleupdatetostop){
balls_loc.add(new PVector(position.x, position.y));
balls_speed.add(new PVector(0, random(-4, -10)));
}
circleupdatetostop = !circleupdatetostop;
}
I've been trying to figure this out for a few hours now to no avail. It is quite simple code, a bouncing ball (particle). Initializing the velocity of the particle to (0, 0) will keep it bouncing up and down. Changing the initialized velocity of the particle to (0, 0.01) or any decimal float will cause the ball to decrease
Particle p;
void setup() {
size(500, 600);
background(0);
p = new Particle(width / 2, height / 2);
}
void draw() {
background(0, 10);
p.applyForce(new PVector(0.0, 1.0)); // gravity
p.update();
p.checkBoundaries();
p.display();
}
class Particle {
PVector pos, vel, acc;
int dia;
Particle(float x, float y) {
pos = new PVector(x, y);
vel = new PVector(0.0, 0.0);
acc = new PVector(0.0, 0.0);
dia = 30;
}
void applyForce(PVector force) {
acc.add(force);
}
void update() {
vel.add(acc);
pos.add(vel);
acc.mult(0);
}
void display() {
ellipse(pos.x, pos.y, dia, dia);
}
void checkBoundaries() {
if (pos.x > width) {
pos.x = width;
vel.x *= -1;
} else if (pos.x < 0) {
vel.x *= -1;
pos.x = 0;
}
if (pos.y > height ) {
vel.y *= -1;
pos.y = height;
}
}
}
I'm not an expert in processing vectors, but I believe I've figured out why this is occurring. If you try to recreate this issue with different values of the y part of the velocity vector, you find that it only happens when the values are not multiples of .5. Based on that, this line is probably responsible:
if (pos.y > height ) {
vel.y *= -1;
pos.y = height;
}
This line rounds the height of the ball, and reverses the velocity of it. This works fine when the ball hits 0 exactly and gets extra velocity before it comes back up, but when the ball goes slightly lower than it should, the velocity that comes from an extra iteration does not get added. As it happens, multiples of .5 hit exactly 0, but other values don't. My proof is that when you change the offending code to the following, every value causes the ball to fall to the ground eventually:
if (pos.y >= height ) {
vel.y *= -1;
pos.y = height;
}
In short, rounding and not making the ball bounce when it hits 0 causes this issue. I hope this answered your question.
i was able to make particles go around the ellipse I created which was my previous question. Now I have another one, flow of the particles are not as smooth as i want, there is this diagonal looking shape they follow and when you move the mouse (the ellipse) you can see my lines of my "force" variable. Again I want particles to move like water floating around a rock in a river.
Link for the previous question I asked about same project
int NUM_PARTICLES = 9000;
ParticleSystem p;
Rock r;
void setup()
{
smooth();
size(700,700,P2D);
p = new ParticleSystem();
r = new Rock();
}
void draw()
{
background(0);
p.update();
p.render();
r.rock();
}
float speed = 2;
float rad = 100;
class Particle
{
PVector position, velocity;
float initialPosY;
Particle()
{
position = new PVector(random(width), random(height));
initialPosY = position.y;
velocity = new PVector();
}
void update()
{
velocity.x = speed;
velocity.y = 0;
float d = dist (position.x, position.y, mouseX, mouseY);
if (d < rad) {
float force = map(d, 0, rad, speed, 0);
if (position.x < mouseX) {
if (position.y < mouseY) {
velocity.y = -force;
} else {
velocity.y = force;
}
} else {
if (position.y < mouseY) {
velocity.y = force;
} else {
velocity.y = -force;
}
}
position.add(velocity);
} else {
position = new PVector(position.x+speed, initialPosY);
}
if (position.x<0)position.x+=width;
if (position.x>width)position.x-=width;
if (position.y<0)position.y+=height;
if (position.y>height)position.y-=height;
}
void render()
{
stroke(255, 255, 255, 80);
point(position.x, position.y);
}
}
class ParticleSystem
{
Particle[] particles;
ParticleSystem()
{
particles = new Particle[NUM_PARTICLES];
for (int i = 0; i < NUM_PARTICLES; i++)
{
particles[i]= new Particle();
}
}
void update()
{
for (int i = 0; i < NUM_PARTICLES; i++)
{
particles[i].update();
}
}
void render()
{
for (int i = 0; i < NUM_PARTICLES; i++)
{
particles[i].render();
}
}
}
class Rock{
void rock()
{
noFill();
stroke(255);
strokeWeight(4);
ellipse(mouseX,mouseY,50,50);
}
}
It'll be a lot easier if you try to narrow your problem down to a smaller MCVE, like I did in the answer to your first question:
PVector position;
PVector speed;
void setup() {
size(500, 500);
position = new PVector(250, 0);
speed = new PVector(0, 1);
}
void draw() {
background(0);
if (dist(position.x, position.y, mouseX, mouseY) < 100) {
fill(255, 0, 0);
if (position.x < mouseX) {
position.x--;
} else {
position.x++;
}
} else {
fill(0, 255, 0);
}
ellipse(mouseX, mouseY, 100, 100);
fill(0, 0, 255);
ellipse(position.x, position.y, 20, 20);
position.add(speed);
if (position.y > height) {
position.y = 0;
}
if (position.x < 0) {
position.x = width;
} else if (position.x > width) {
position.x = 0;
}
}
Now that we have that, we can talk about how we might improve it.
Right now, our logic for having the particles avoid our obstacle is here:
if (dist(position.x, position.y, mouseX, mouseY) < 100) {
if (position.x < mouseX) {
position.x--;
} else {
position.x++;
}
}
Notice that we're always moving the particle by 1 pixel, which is why it looks blocky. What we need to do is smooth our transition out by moving the pixel only a little bit at first, and then moving it more as it gets closer to the obstacle.
You might user the lerp() or map() function for this, but for this simple example, we can simply use the dist() function.
Here is a super simple approach you might take:
float distance = dist(position.x, position.y, mouseX, mouseY);
if (position.x < mouseX) {
position.x -= 1000/(distance*distance);
} else {
position.x += 1000/(distance*distance);
}
Notice that by squaring the distance, I'm setting up a polynomical interpolation. In other words, the particle moves faster the closer it gets to the center of the boundary.
Again, you're going to have to play with this to get the exact effect you're looking for, but the basic idea is there: what you're looking for is an interpolation (how fast the particle moves) that scales with the distance from the boundary. You can use squaring to exaggerate the effect.
You could also use basic trig to make the particle follow a circular path.
I am trying to create an array of circles which all move at different speeds and have different colours using classes which i have done however about 5 seconds into running it for some reason the ellipses all go to the edges of the window and the code doesn't work properly. Below I have provided my code including the class and setup:
circle circles = new circle(1, 8);
void setup() {
size(800, 600);
}
void draw() {
background(255);
circles.display();
circles.bounce();
}
class circle {
int[] posX = new int [10];
int[] posY = new int [10];
float[] speedX = new float[10];
float[] speedY = new float[10];
int[] red = new int [10];
int[] green = new int [10];
int[] blue = new int [10];
circle(float start, float end) {
for (int i = 0; i < 10; i++) {
speedX[i] = random(start, end);
speedY[i] = random(start, end);
posX[i] = int(random(500, 800));
posY[i] = int(random(500, 600));
red[i] = int(random(0, 255));
green[i] = int(random(0, 255));
blue[i] = int(random(0, 255));
}
}
void display() {
for (int i = 0; i < 10; i++) {
fill(red[i], green[i], blue[i]);
ellipse(posX[i], posY[i], 50, 50);
}
}
void bounce() {
for (int i = 0; i < 10; i++) {
posX[i] += speedX[i];
posY[i] += speedY[i];
if (posX[i] - 50 < 0 || posX[i] + 50 > width) {
speedX[i] = -speedX[i];
}
if (posY[i] - 50 < 0 || posY[i] + 50 > height) {
speedY[i] = -speedY[i];
}
}
}
}
The main problem is that you were not setting the balls to be inside the screen again! This is a very common problem, and Dan Shiffman used it to show the new Processing 3 Debugger.
But since i've found many stuff about your code i will also comment other stuff that might help you with programming.
But first let me show you the working code:
int n_of_circles = 10;
Circle[] circles = new Circle[n_of_circles];
void setup() {
size(800, 600);
for (int i = 0; i < n_of_circles; i++) {
circles[i] = new Circle(1, 8);
}
}
void draw() {
background(255);
for (int i = 0; i < n_of_circles; i++) {
circles[i].display();
circles[i].move();
}
}
class Circle {
float posX = random(0, width); //no need to set these value in constructor
float posY = random(0, height); //we can set it here
float speedX = 666; //we will change these on constructor
float speedY = 666; //666 is just a personal convention that i use to indicate that :p
//Similarly, no need to set the color variable in the constructor
//also, lets use a color variable instead of 3 separate variables
color circ_color = color(
(int) random(0, 255),
(int) random(0, 255),
(int) random(0, 255)
);
//defining circle diameter instead of using a literal ("50", in our case)
int diameter = 50;
int radius = diameter/2;
Circle(float min_speed, float max_speed) {
// The purpose of "min_speed" and "max_speed" are clearer than "start" and "end"
speedX = random(min_speed, max_speed);
speedY = random(min_speed, max_speed);
}
void display() {
//this push an pop commands ensure that this fill command won't
//interfere with any other stuff, if you ever reuse this code
pushStyle();
fill( circ_color );
ellipse(posX, posY, diameter, diameter);
popStyle();
}
//notice how i separated the move declartions form the bounce. It's good programming practice
//to keep stuff simpler. Functions should always have one single responsibility.
//In this case it won't help´much, but we're yoru move function more complex, it would!
void move(){
posX += speedX;
posY += speedY;
bounce();
}
void bounce() {
//note that you were using the diameter, but you should really use the radius!
//if it's touching left or side edges
if (posX - radius < 0 || posX + radius > width) {
speedX *= -1; //inverts the sign
//Here's the actual missing bits!
if (posX - radius < 0 ){ posX = radius; }
if (posX + radius > width ){ posX = width-radius; }
}
//if it's touching top or bottom edges
if (posY - radius < 0 || posY + radius > height) {
speedY *= -1; //inverts the sign
//Here's the actual missing bits!
if (posY - radius < 0 ){ posY = radius; }
if (posY + radius > height ){ posY = height-radius; }
}
}
} //end of class Circle
Just i few suggestions:
The convention is that Class names are upper case. This you you have Circle circles = new Circle(1,5); This is clearer.
Avoid using literals! (writing hard-coded numbers) For example, you we're using "ellipse(posX[i], posY[i], 50, 50);". By using a variable for diameter your code becomes more modular. Should you change the circles diameter, you just alter one line of code!
Use arrays of objects instead of classes that contains other stuff. That's good programming practice as it makes your code easier to understand. Now if you need to group lots of circles you use an array, or you can create another class "Group_of_circles" for ex.
I know i've presented some new concepts/syntaxes and changed a lot to your code, but i tried to comment everything to make it clear and instructive
Since i've already changed much thing i didn't use any Vectors, but when dealing with positions , you really should use PVectors! This free book have a great chapter on them!
Try to find good tutorials about software development. They will teach about godo programming practices like keeping your code as modular as possible and etc. But don't worry, it will come to you natrually over time!
Try learncpp.com, tutorialss 1-10a and 1-4b. Those 2 are part of a c++ tutorial, but are a good starting point and refer to programming in general.
I need to create a loop which will space circles equally around a circle in Processing.
I know I can somehow implement a FOR loop.
I need to be able to increase or decrease the number of circles around this circle (with button presses) but keep them equally spaced.
I know the formula's I need to include in the FOR loop to get the X and Y axis. The formulas:
being
X = R*cos(angle-90)+Y0
Y = R*sin(angle-90)+X0
I understand the three parameters of the FOR loop; when does it start, when does it finish, what changes when it runs.
What I can't see is how to implement the formulas into the FOR loop.
Many thanks
Here is the code I do have
void setup () {
size (600, 600);
background (255, 255, 255);
smooth ();
ellipse (width/2, height/2, 200, 200); // the guide circle. Not needed in final code.
}
void draw() {
for (int i = 0; i < 20; i ++) {
for (int j = 0; j < 20; j ++) {
ellipse (i *20, j * 20, 20, 20);
}
}
}
This code should do the trick:
float incrementalAngle = 0.0;
void setup(){
size(600, 600);
smooth();
background(0);
ellipse(width/2, height/2, 200, 200);
drawCircles(20, 200);
}
void draw(){
}
void drawCircles(int circlesNumber, int bigCircleNumber){
float angle = incrementalAngle;
for(int i = 0; i < circlesNumber; i++){
ellipse(bigCircleNumber * cos(incrementalAngle) + height/2,
bigCircleNumber * sin(incrementalAngle) + width/2,
circlesNumber, circlesNumber);
incrementalAngle += TWO_PI / circlesNumber;
}
}
So the second loop wasn't needed, and the formula you were trying to introduce would go in the X and Y position of your ellipse, there by playing whit the angle and the cos and sin you can get the result you were looking for.
What's left now is for you to get the number of circles you want by the clicking inside a mousePressed() method and drawing that amount.
Hope this comes useful and call me if you need more help
Regards
Jose.
Thank you to everyone who helped.
I managed to do it (slightly differently to you #Jose Gonzalez
int nbr_circles = 2;
void setup() {
size(600, 600);
smooth();
background(255);
}
void draw() {
background(255);
float cx = width/2.0;
float cy = height/2.0;
fill(0);
//float x, y; //
for (int i = 0; i < nbr_circles; i++)
{
float angle = i * TWO_PI / nbr_circles;
float x = cx + 110.0 * cos(angle);
float y = cy + 110.0 * sin(angle);
ellipse(x, y, 20, 20);
}
}
void mousePressed() {
if (mouseButton == LEFT) {
if (nbr_circles < 20)
nbr_circles = nbr_circles + 1;
} else if (mouseButton == RIGHT) {
if (nbr_circles > 2)
nbr_circles = nbr_circles - 1;
}
}