I am trying to draw at one place by dragging a mouse (for example, a circle in left upper quadrant) and have the figure appear at 4 places around center of canvas (including one right under the mouse cursor). I have tried following code:
int x=0;
int y=0;
void setup(){
size(400, 400);
background(255);
translate(width/2, height/2);
}
void draw() {
}
void mouseDragged(){
translate(width/2, height/2);
for(int i=0; i<4; i++){
rotate(PI/2);
x= mouseX ; y=mouseY;
line(x, y, mouseX, mouseY);
}
}
However, the figure does not get drawn under the mouse cursor. If I am very close to upper left corner, the lines get drawn at center of canvas.
Secondly, a total of 5 figures get drawn instead of 4 as I am trying. If I draw near left upper corner, the unwanted figure appears at right lower corner of canvas. This unwanted figure is fainter than other figures.
Where are the errors and how can both these problems be corrected? I want to achieve this with rotate commands (rotating around center of canvas), though I saw that I can also use translate command to draw at 4 places on canvas.
Thanks for your help.
None of your points are under the mouse because you're translating the canvas (to width/2, height/2) before drawing your points, but you're using mouseX, mouseY to draw them. Think of mouseX, mouseY as the X and Y distance from the upper-left corner. If you want a point to be under the mouse, you have to use the distance from the point you translated to!
In other words, instead of this:
x = mouseX;
y = mouseY;
You want this:
x = width/2 - mouseX;
y = height/2 - mouseY;
As for the extra point being drawn, that seems to be a side-effect of using the mouseDragged() function. Something strange is going on there, but you can get around this problem by just using the draw() function and the mousePressed variable instead of the mouseDragged() function.
Edit: I switched the order they should be in. Check out my answer to your next question for a better explanation.
Related
Wondering if someone could help me, I am new to processing and programming in general.
I have created a random walker that walks a point around a 3D space. Please see code below.
Now I would like to be able to rotate the view of this walker as it is drawn, so I can view it from different angles. I have tried using PeasyCam to achieve this, but when I use the mouse to rotate the camera, it only affects the location of the new points, and not the previously plotted ones.
If anyone could let me know what I'm doing wrong that would be really helpful! Thanks, here is my code:
import peasy.*;
PeasyCam camera;
void setup() {
size(500,500,P3D);
background(0);
camera = new PeasyCam(this, 0, 0, 0, 50);
}
void draw() {
walker();
}
float x = 0;
float y = 0;
float z = 0;
void walker() {
pushMatrix();
stroke(255);
strokeWeight(5);
point(x,y,z);
x = x + random(-2.5,2.5);
y = y + random(-2.5,2.5);
z = z + random(-2.5,2.5);
popMatrix();
}
If you want your previous points to be affected by the rotation, then you need to redraw them.
You could do this by storing all of the points in a data structure like an array or ArrayList. Then you'd iterate over the points and redraw them every frame.
So, I am trying to make these two circles kiss, the unfilled circle is the one being drawn at the mouse cursor and the filled one is fixed at the centre of the canvas. Currently, the circles do not kiss and I'm not quite sure how to approach fixing this. Here is the code, quite simple:
void setup() {
size(500, 500);
}
void draw() {
background(255);
float r = 50; //radius of circle at the centre
fill(0);
ellipse(width/2, height/2, r, r); //Target Circle
//what I am assuming should calculate the radius needed to form the
//kissing circle from my mouse cursor:
float d = dist(width/2, height/2, mouseX, mouseY) - r;
noFill();
ellipse(mouseX, mouseY, d, d); //Drawing of circle, desired to kiss the central one.
}
Current Result When Mouse Cursor Is Close To The Centre
Current Result When Mouse Cursor Is Farther From The Centre
Note: In these images, I am looking for the two circles to be touching only by changing the radius of the one with no fill, based off of the distance between them.
In the end, I want to be able to have an array of circle objects and get the distance to the closest point in the space. But that is less related to my issue at the current time.
The ellipse function expects the width and height of the ellipse (diameters, not radii).
Just change:
ellipse(width/2, height/2, r, r);
to
ellipse(width/2, height/2, 2 * r, 2 * r);
and
ellipse(mouseX, mouseY, d, d)
to
ellipse(mouseX, mouseY, 2*d, 2*d)
So I managed to make most of the exercise but can't think of a way to make the trail of the moving image. Also, in the video ball moves in the direction of mouse position.
However, when I tried to do that, mouse position is changing every time and the ball is following the mouse while moving. The velocity had to be calculated using the mouse position. Any help would be appreciated.
This is how it should look: https://streamable.com/9jdc3
My code:
PImage ball, bFire;
int xPosB, yPosB, bW, bH, bFW, bFH, velocityX, velocityY;
boolean bMoving;
void setup() {
size(1024, 512);
//loading images
ball = loadImage("ball.png");
bFire = loadImage("ballFire.png");
//resizing images
ball.resize(ball.width/4, ball.height/4);
bFire.resize(bFire.width/4, bFire.height/4);
//starting values
//ball
xPosB = width/2;
yPosB = height/2;
}
void draw() {
background(0);
//draw ball
imageMode(CENTER);
image(ball, xPosB, yPosB);
//draw fire ball
if (bMoving) {
image(bFire, xPosB, yPosB);
xPosB+=velocityX;
yPosB+=velocityY;
}
//colision detection
if (xPosB-bFire.width/2 <= 0 || xPosB+bFire.width/2 >= width) {
velocityX*=-1;
} else if (yPosB-bFire.height/2 <= 0 || yPosB+bFire.height/2 >= height) {
velocityY*=-1;
}
}
void mousePressed() {
if (mouseButton == LEFT) {
bMoving=!bMoving;
velocityX = mouseX/100;
velocityY = mouseY/100;
}
}
I can't repoduce the problem you describe - of the ball following the mouse.
I can tell you that the mousepressed() you use is incorrect.
You assign the velocity, but because mouseX and mouseY will always be positive the ball will always move to the right and down.
Try the code below, it sets the velocity to the difference between the mouse and the current position of the ball. The ball will now always move towards the mouse.
void mousePressed() {
if (mouseButton == LEFT) {
bMoving=!bMoving;
velocityX = (mouseX - xPosB) / 50;
velocityY = (mouseY - yPosB) / 50;
}
Second point: I don't know how your ballFire.png looks, but right now it is drawn at the exact same X/Y location of the ball. This cannot give you a trailing effect, for that you'll have to draw the fireball a little behind the ball.
Try the code below:
//draw fire ball
if (bMoving) {
image(bFire, xPosB-velocityX, yPosB-velocityY);
xPosB+=velocityX;
yPosB+=velocityY;
}
//draw ball
imageMode(CENTER);
image(ball, xPosB, yPosB);
It draws the fireBall behind the ball based on the velocity. So faster means more distance. You can tweak this distance of course. If you want multiple firballs as trailing effect, draw the fireball multiple times with different offsets.
Final note: you'll want to draw the ball last, else the fireball will be drawn half over the normal ball.
My overall goal is to create a 3 way 'pong' game. A triangle border will be used with 3 paddles moving along each of the 3 sides. A ball will be bouncing within this triangle and the paddles will be used to try and stop the ball hitting each side of the triangle. To start off, I am trying to get a ball bouncing within the boundaries of a triangle. I currently just have a bouncing ball. Can anyone suggest how to go forward with this?
float x = 100;
float y = 100;
float xspeed = 1;
float yspeed = 3.3;
void setup() {
size(500,500);
}
void draw() {
background(255);
fill(255,10);
rect(0,0,width,height);
x = x + xspeed;
y = y + yspeed;
if ((x > width) || (x < 0)) {
xspeed = xspeed * -1;
}
if ((y > height) || (y < 0)) {
yspeed = yspeed * -1;
}
fill(175);
ellipse(x,y,16,16);
}
You're going to have to change your collision detection code so it detects when the circle collides with the triangle boundary instead of the edges of the screen.
Define your triangle as three line segments, then you can focus on detecting collision between the circle and each line segment. Google is your friend here, but this question has a bunch of answers.
Then you'll probably want to reflect the point around the line so that the circle bounces at an angle based on the line segment. Again, google is your friend, but here is another question with a bunch of answers.
I recommend splitting your problem up into smaller steps and focusing on one at a time. First get a program working that just checks whether a circle collides with a line segment: try hard-coded points at first, then maybe use the cursor position, then work your way up to a bouncing ball.
I am pretty new with processing and need some help. I'm trying to build a simple kickball game. Easy idea: when the ball hits the yellow bar, the ball bounces of. To keep the ball "alive" you have to make it bounce of the yellow bar. I've successfully found code for the bouncing ball (it now bounces of the bottom of the window), and I've also successfully created a bar that moves with the mouse. What I haven't been able to create so far is for the ball to actually bounce of the bar. Looking for som help here!! Thanks!!
float ballX = 100;
float ballY = 0;
float h = 50;
int x, y;
//create a variable for speed
float speedY = 2;
void setup() {
size(400,400);
smooth();
noStroke();
// change the mode we draw circles so they are
// aligned in the top left
ellipseMode(CORNER);
}
void draw() {
//clear the background and set the fill colour
background(0);
fill(255);
//draw the circle in it's current position
ellipse(ballX, ballY, h,h);
//add a little gravity to the speed
speedY = speedY + 0.5;
//add speed to the ball's
ballY = ballY + speedY;
//bar
x = mouseX;
y = mouseY;
fill(255, 255, 0);
rect(x, y, 50, 10);
if (ballY > height - h) {
// set the position to be on the floor
ballY = height - h;
// and make the y speed 90% of what it was,
// but in the opposite direction
speedY = speedY * -0.9;
//switch the direction
//speedY = speedY;
}
else if (ballY <= 0) {
// if the ball hits the top,
// make it bounce off
speedY = -speedY;
}
}
I'd warn you against just copy-pasting code you found on the internet. You have to really understand what it's doing, otherwise you're going to have a ton of headaches as your code becomes more complicated. Try to rewrite the logic yourself, that way you understand exactly how the bouncing works.
To figure out whether the ball is intersecting the paddle, I'd recommend taking out a piece of paper and a pencil and drawing some examples. Try to figure out a pattern of what the position and size of the ball and paddle are when they're intersecting.
But basically, you need to check whether the ball is "inside" the bounds of the rectangle. This is true if the ball is to the right of the left side of the paddle, to the left of the right side of the paddle, below the top of the paddle, and above the bottom of the paddle.