How can I use the code I have now with an object where I can store the number of times the ball bounces and the color (when i add random color) and speed. Any pointers or tips would be greatful. I am new to OOP and it can get confusing for me. Thanks in advance
float x;
float y;
float yspeed = 0;
float xspeed = 0;
float balldiameter = 10;
float ballradius = balldiameter/2;
void setup() {
size (400,400);
background (255);
fill (0);
ellipseMode(CENTER);
smooth();
noStroke();
x = random(400);
y = 0;
}
void draw() {
mouseChecks();
boundaryChecks();
ballFunctions();
keyFunctions();
}
void mouseChecks() {
if (mousePressed == true) {
x = mouseX;
y = mouseY;
yspeed = mouseY - pmouseY;
xspeed = mouseX - pmouseX;
}
}
void boundaryChecks() {
if (y >= height - ballradius) {
y = height - ballradius;
yspeed = -yspeed/1.15;
}
if (y <= ballradius) {
y = ballradius;
yspeed = -yspeed/1.35;
}
if (x >= width -ballradius) {
x = width -ballradius;
xspeed = -xspeed/1.10;
}
if (x <= ballradius) {
x = ballradius;
xspeed = -xspeed/1.10;
}
}
void ballFunctions() {
if (balldiameter < 2) {
balldiameter = 2;
}
if (balldiameter > 400) {
balldiameter = 400;
}
ballradius = balldiameter/2;
background(255); //should this be in here?
ellipse (x,y,balldiameter,balldiameter);
yspeed = yspeed += 1.63;
// xspeed = xspeed+=1.63;
y = y + yspeed;
x = x + xspeed;
}
void keyFunctions() {
if (keyPressed) {
if(keyCode == UP) {
balldiameter +=1;
}
if (keyCode == DOWN) {
balldiameter -=1;
}
}
}
you will probably want to do the following:
create a new file called Ball.pde
In that file write:
public class Ball {
public float x;
public float y;
public float yspeed;
public float xspeed;
public float diameter;
public float radius;
public Ball(float initial_x, float initial_y, float diam) {
this.x = initial_x;
this.y = initial_y;
this.xspeed = 0;
this.yspeed = 0;
this.diameter = diam;
this.radius = diam/2;
}
public void move() {
// movement stuff here
}
}
This will give you a very basic Ball class. You can now use this class in your main sketch file like so:
Ball my_ball = new Ball(50, 50, 10);
you can access the balls members using:
my_ball.xspeed;
my_ball.yspeed;
my_ball.anything_you_defined_in_ball;
This will allow you yo store all relevent variables for the ball within its own class. you can even create more than 1.
Ball my_ball1 = new Ball(50, 50, 10);
Ball my_ball2 = new Ball(20, 20, 5);
Just to note that in Proccesing you don't need to create a new file for that, the code can go either in the same file (very bad practice as pointed below) or in a new tab of the IDE. If you are using the Processing IDE you can choose "new tab" from the arrow menu in the right and it will create the file for you. It will have ".pde" extension.
Related
I'm currently trying to make a class in Processing that allows the user to create objects that can be dragged and dropped. It's not that hard to create individual objects, but I've had some trouble implementing them into a class so that the user can create as many as they wish. Do you have any guidance?
Here is the code I have so far.
dragndrop.pde
void setup() {
size(800, 600);
}
void draw() {
background(80);
noStroke();
DragObject d = new DragObject(width/2, height/2, 50, 245);
d.run();
}
DragObject.pde
class DragObject {
int x;
int y;
int r;
color col;
DragObject(int xx, int yy, int rr, int c) {
x = xx;
y = yy;
r = rr;
col = c;
}
void run() {
if(mouseX > (x - r/2) && mouseX < (x + r/2) && mouseY > (y - r/2) && mouseY < (y + r/2)) {
if(mousePressed) {
x = mouseX;
y = mouseY;
}
}
fill(col);
circle(x, y, r);
}
}
It lets you drag the circle, but only as long as the mouse is within the circle's radius.
Thank you!
The following code will allow you to drag the object around the screen. In order to have multiple circles you will need to create an object array, eg DragObject[] d; and then initialize it for as many as you want in setup(), eg d = new DragObject[numOfObjects];
int xOffset = 0;
int yOffset = 0;
DragObject d;
void setup() {
size(800, 600);
d = new DragObject(width/2, height/2, 50, 245);
}
void draw() {
background(80);
noStroke();
d.display();
}
void mousePressed() {
if (mouseX > (d.x - d.r) && mouseX < (d.x + d.r) && mouseY > (d.y - d.r) && mouseY < (d.y + d.r)) {
xOffset = mouseX-d.x;
yOffset = mouseY-d.y;
}
}
void mouseDragged() {
d.x = mouseX - xOffset;
d.y = mouseY - yOffset;
}
class DragObject {
int x;
int y;
int r;
color col;
DragObject(int xx, int yy, int rr, int c) {
x = xx;
y = yy;
r = rr;
col = c;
}
void display() {
fill(col);
circle(x, y, r);
}
}
Revision:
There is an issue in the code above with the method used to determine if the mouse was pressed inside the circle. The demo above will also move the circle if the mouse is clicked outside (but near) the circle. A more correct way to determine if the mouse is down inside of the circle is to use Processing's dist() function. To facilitate keeping track of when the mouse is down inside of the circle a boolean msOver (mouse over) was added to the object class. There is also a misleading variable label ('r') in the initial class declaration. I suggest that this be changed to 'diam' (diameter) to reflect the fact that the third parameter of circle() is the width/height and not the radius as the 'r' implies.
A revised (and hopefully improved) demo follows:
int xOffset = 0;
int yOffset = 0;
DragObject d;
void setup() {
size(800, 600);
d = new DragObject(width/2, height/2, 50, 245);
}
void draw() {
background(80);
noStroke();
d.display();
}
void mousePressed() {
if (dist(d.x, d.y, mouseX, mouseY) <= d.diam/2) {
d.msOver = true;
xOffset = mouseX-d.x;
yOffset = mouseY-d.y;
println("inside");
} else {
d.msOver = false;
println("outside");
}
}
void mouseDragged() {
if (d.msOver) {
d.x = mouseX - xOffset;
d.y = mouseY - yOffset;
}
}
class DragObject {
int x, y, diam;
color col;
boolean msOver;
DragObject(int xx, int yy, int rr, int c) {
x = xx;
y = yy;
diam = rr;
col = c;
}
void display() {
fill(col);
circle(x, y, diam);
}
}
I've finished a single rectangle code, but I'd like to know ways to make at least four rectangles change color while hovering the mouse over them. Any advice is much appreciated.
code is below:
int rectX, rectY;
int rectSize = 90;
color rectColor;
color baseColor;
boolean rectOver = false;
void setup() {
size(640, 360);
rectColor = color(0);
baseColor = color(102);
rectX = width/2;
rectY = height/2;
rectMode(CENTER);
}
void draw() {
update(mouseX, mouseY);
noStroke();
if (rectOver) {
rectColor = color(255);
}else
{
rectColor = color(0);
}
stroke(255);
fill(rectColor);
rect(rectX, rectY, rectSize, rectSize);
}
void update(int x, int y) {
if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;}
else{rectOver = false;}
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x-width/2 && mouseX <= x+width/2 &&
mouseY >= y-height/2 && mouseY <= y+height/2) {
return true;
}
else {
return false;
}
}
First of all, you have to fix your overRect function since width and height are built-in variables, secondly what you need to do is to declare a rectangle class that will contain the x,y, width and height of your rectangle, plus two methods: one to check if the mouse if hovering (using your old method) and one to self draw the rectangle. Lastly, you need an array to store your rectangles. Here is the final code:
int rectX, rectY;
int rectSize = 90;
color rectColor;
color baseColor;
ArrayList<rectangle> list;
boolean rectOver = false;
class rectangle {
float x,y,w,h;
rectangle (float y, float x,float w, float h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
boolean checkInside() {
return overRect(x,y,w,h);
}
void selfDraw(){
if (this.checkInside()) {
rectColor = color(255);
}else
{
rectColor = color(0);
}
stroke(255);
fill(rectColor);
rect(x, y, w, h);
}
}
void setup() {
size(640, 360);
rectMode(CENTER);
list= new ArrayList<rectangle>();
list.add(new rectangle(40,40,50,60));
list.add(new rectangle(20,200,50,20));
list.add(new rectangle(300,200,50,50));
list.add(new rectangle(200,300,80,60));
}
void draw() {
for (int i = 0; i < list.size(); i++) {
list.get(i).selfDraw();
}
}
boolean overRect(float x, float y, float w, float h) {
if (mouseX >= x-w/2 && mouseX <= x+w/2 &&
mouseY >= y-h/2 && mouseY <= y+h/2) {
return true;
}
else {
return false;
}
}
Use inheritence. As in YOUSFI's answer, your nest net would be to build a rectangle class and write it's own mouse over function in there. Then, you can make an instance of that object in your main program and call it's mouseover function.
Instead of blindly copy pasting the code YOUSFI provided, my suggestion would be to read up on Object Oriented Programming or watch this introductory video series: https://www.youtube.com/watch?v=xG2Vbnv0wvg
I am working on making a single ball bounce all over the screen but I have an issue with making the ball bounce the bounce() function is responsible for making the ball bounce but I run into an array out of bounds exception despite only going through 1 element in the array. I have provided the code below. This code utilizes 2 classes (Ball_Usage and Ball).
Ball_Usage code:
Ball ball1;
void setup(){
size(500,500);
ball1 = new Ball();
}
void draw(){
background(255);
ball1.bounce();
}
Ball:
class Ball{
float [] xPos = {};
float [] yPos = {};
float [] dia = {};
float [] xSpeed = {};
float [] ySpeed = {};
Ball(){
}
Ball(float x, float y, float argDia){
xPos = append(xPos, x);
yPos = append(yPos, y);
dia = append(dia, argDia);
}
void bounce(){
for(int i=0; i<1; i++){
ellipse(xPos[i], yPos[i], 50, 50);
xPos[i] += xSpeed[i];
yPos[i] += ySpeed[i];
if(xPos[i]<0 || xPos[i]>=width){
xSpeed[i] = -xSpeed[i];
}
if(yPos[i]<0 || yPos[i]>=height){
ySpeed[i] = -ySpeed[i];
}
}
}
}
I believe the confusion comes from the fact that your class has two constructors:
an empty constructor (that takes no arguments): Ball()
a constructor with position and argDia (guessing diameter ?) arguments: Ball(float x, float y, float argDia)
In setup() you call the empty constructor:
ball1 = new Ball();
This means the five float arrays still have a length of 0, hence the out of bounds exception.
Even if you call the position + diameter version of the constructor, the xSpeed, ySpeed arrays will still have length 0.
You could fix this by initialising the two two arrays as well as using this version of the constructor:
Ball ball1;
void setup() {
size(500, 500);
//ball1 = new Ball();
ball1 = new Ball(250, 250, 50);
}
void draw() {
background(255);
ball1.bounce();
}
class Ball {
float [] xPos = {};
float [] yPos = {};
float [] dia = {};
float [] xSpeed = {};
float [] ySpeed = {};
Ball() {
}
Ball(float x, float y, float argDia) {
xPos = append(xPos, x);
yPos = append(yPos, y);
dia = append(dia, argDia);
xSpeed = append(xSpeed, random(-1, 1));
ySpeed = append(ySpeed, random(-1, 1));
}
void bounce() {
for (int i=0; i<1; i++) {
ellipse(xPos[i], yPos[i], 50, 50);
xPos[i] += xSpeed[i];
yPos[i] += ySpeed[i];
if (xPos[i]<0 || xPos[i]>=width) {
xSpeed[i] = -xSpeed[i];
}
if (yPos[i]<0 || yPos[i]>=height) {
ySpeed[i] = -ySpeed[i];
}
}
}
}
This will work, however there is still a bit of confusion: why use the arrays at all if you're only looping once for the first element ? It makes the arrays and for loop mostly redundant.
You might choose to keep if you plan to change the diameter over time (which in your code is hardcoded to 50), maybe positions and velocities and render a changing history of a ball.
If you don't, you could simply use float properties instead of arrays:
Ball ball1;
void setup() {
size(500, 500);
ball1 = new Ball();
}
void draw() {
background(255);
ball1.bounce();
}
class Ball {
float xPos;
float yPos;
float diameter = 50;
float xSpeed;
float ySpeed;
Ball() {
xPos = width / 2;
yPos = height / 2;
xSpeed = random(-1, 1);
ySpeed = random(-1, 1);
}
void bounce() {
ellipse(xPos, yPos, diameter, diameter);
xPos += xSpeed;
yPos += ySpeed;
if (xPos < 0 || xPos >= width) {
xSpeed = -xSpeed;
}
if (yPos < 0 || yPos >= height) {
ySpeed = -ySpeed;
}
}
}
This looks more similar to the Bounce Processing Example.
You can at a later stage make an array of Ball objects.
Additionally it's worth formatting code as it saves you time reading/scrolling through it and visually it's easier to scan the structure of the program (how each part fits in) and therefore makes it easier to debug/run mentally. It takes no effort as you can simply press Ctrl+T on Windows/Linux or CMD+T on OSX. On the long run this will pay off, especially as programs get longer and more complex as you spend more time reading code than writing code. It's a good habit to pickup early while learning to code. Have fun!
I managed to create the Mandelbrot set in processing but am struggling to implement a zoom. Here is my code:
float minvalX = -1.5;
float minvalY = -1.5;
float maxvalX = 1.5;
float maxvalY = 1.5;
float angle = 0;
float di,dj;
int xPixel,yPixel;
void setup(){
size(500,500);
pixelDensity(1);
colorMode(HSB, 360);
}
void draw() {
scale(zoom);
float maxLoops = 100;
loadPixels();
float equationOneOriginal;
float equationTwoOriginal;
for (xPixel = 0; xPixel < width ; xPixel++) {
for (yPixel = 0; yPixel < height ; yPixel++) {
float a = map(xPixel+di, 0,width, minvalX, maxvalX);
float b = map(yPixel+dj, 0,height, minvalY, maxvalY);
equationOneOriginal = a;
equationTwoOriginal = b;
float n = 1;
while (n < maxLoops) {
float equationOne = a*a - b*b; //First part of the equation
float equationTwo = 2 * a * b; //Second part of the equation
a = equationOne + equationOneOriginal;
b = equationTwo + equationTwoOriginal;
if (abs(a+b) > 16) {
break;
}
n++;
}
if (n == maxLoops) {
pixels[xPixel+yPixel*width] = color(0);
}
else {
pixels[xPixel+yPixel*width] = color(n-(int)(n/360)*n, 360, (int)map(n*6, 1, maxLoops, 0, 360));
}
}
}
updatePixels();
}
void mousePressed()
{
if (mouseButton == LEFT) {
di = di + mouseX - int(width/2);
dj = dj + mouseY - int(height/2);
minvalX += 0.1;
maxvalX -= 0.1;
minvalY += 0.1;
maxvalY -= 0.1;
}
}
It zooms into where my mouse is but eventually it goes towards the middle and gets stuck there. I know it is to do with minvalX, maxvalX, minvalY and maxvalY but I don't know what to do to these values to get it to always zoom towards my mouse.
The code I have here is an animation that shows one circle that moves the way I'd like it to. I'd like to have 10 circles and I assume I use a loop or possibly an array but I'm not quite sure how to do that. At the same time, I want to make it so that at first the animation doesn't move but starts moving when I press a specific key and stops when I press the same key.
color a = color(random(255), random(255), random(255), random(125, 250));
float dia = random(60, 80);
float x;
float y;
float speedX = random(-3, 3);
float speedY = random(-3, 3);
void setup() {
background(255);
size(400, 200);
x = random(dia/2, width-dia/2);
y = random(dia/2, height-dia/2);
}
void draw() {
background(255);
noStroke();
fill(a);
ellipse(x, y, dia, dia);
x = x + speedX;
y = y + speedY;
if(speedX > 0 && x >= width - dia/2) {
speedX = speedX * -1;
}
if(speedX < 0 && x <= dia/2) {
speedX = speedX * -1;
}
if(speedY > 0 && y >= height - dia/2) {
speedY = speedY * -1;
}
if(speedY < 0 && y <= dia/2) {
speedY = speedY * -1;
}
}
You can get multiple circles by encapsulating the data you need to draw a circle into a class. It might look something like this:
Circle c;
void setup() {
size(400, 200);
c = new Circle();
}
void draw() {
background(255);
c.draw();
}
class Circle {
color a = color(random(255), random(255), random(255), random(125, 250));
float dia = random(60, 80);
float x = random(dia/2, width-dia/2);
float y = random(dia/2, height-dia/2);
float speedX = random(-3, 3);
float speedY = random(-3, 3);
void draw() {
noStroke();
fill(a);
ellipse(x, y, dia, dia);
x = x + speedX;
y = y + speedY;
if (speedX > 0 && x >= width - dia/2) {
speedX = speedX * -1;
}
if (speedX < 0 && x <= dia/2) {
speedX = speedX * -1;
}
if (speedY > 0 && y >= height - dia/2) {
speedY = speedY * -1;
}
if (speedY < 0 && y <= dia/2) {
speedY = speedY * -1;
}
}
}
Then to get multiple circles, you'd just create multiple instances of your Circle class and add them to an ArrayList:
ArrayList<Circle> circles = new ArrayList<Circle>();
void setup() {
size(400, 200);
for (int i = 0; i < 5; i++) {
circles.add(new Circle());
}
}
void draw() {
background(255);
for (Circle c : circles) {
c.draw();
}
}
For the user interaction, have a look at the event methods like mousePressed() or keyPressed(). The Processing reference should be your first stop. Good luck.