Some friendly advice: your tone comes off sounding a bit demanding, and your description is very vague. You'll have much better luck if you try to make it easy for other people to help you.
- Tell us exactly what errors you're getting.
- Post an MCVE with enough code so we can run it, but not any code that isn't directly related to your problem.
- Try breaking your problem down into small steps, and only ask one specific question at a time.
- Check out the question checklist and make sure you've done everything on the list.
Why the hell theres nowhere a tutorial for that ?
Keep in mind that the people answering questions on Stack Overflow are doing so for free, in their spare time. The people developing Processing are doing so for free, in their spare time. Even so, there are a ton of tutorials on your problems. Have you tried searching on google?
Here is a tutorial that does exactly what you're looking for. These examples come with the Processing editor (go to File -> Examples). The reference is another great resource that you should check out.
All of that being said, I'll walk you through solving this problem, and hopefully how to solve other problems in the future.
Step 0: Break your problem down into smaller steps. This is the golden rule of programming. Whenever you're stuck, go back to this step. This step fuels the rest of the steps, and it should be the first, second, and third thing you do whenever you're stuck.
Step 1: Can you draw a single object? Don't worry about interaction or multiple objects or anything else, just draw a single object. Get that code working first.
Here's code that draws a single circle:
void setup(){
size(500, 500);
ellipseMode(CENTER);
}
void draw(){
background(0);
ellipse(100, 200, 50, 50);
}
Step 2: Can you encapsulate the information needed to draw the object in a class? Again, only worry about the next small step- don't worry about multiple shapes yet. Just get a class working for a single object. Here is how we might encapsulate the data for our circle:
Circle circle;
void setup() {
size(500, 500);
ellipseMode(CENTER);
circle = new Circle(100, 200, 50);
}
void draw() {
background(0);
circle.draw();
}
class Circle {
float x;
float y;
float r;
public Circle(float x, float y, float r) {
this.x = x;
this.y = y;
this.r = r;
}
void draw() {
ellipse(x, y, r, r);
}
}
If you have trouble on this step, then you can post something like this small example with a more specific question, and it'll be much easier to help you than if you post a section of your entire sketch without any specific errors.
Step 3: Can you add some simple user interaction logic to your circle class? Don't worry about clicking yet, just try to change the color of the circle when you move your mouse over it.
Circle circle;
void setup() {
size(500, 500);
ellipseMode(RADIUS);
circle = new Circle(100, 200, 50);
}
void draw() {
background(0);
circle.draw();
}
class Circle {
float x;
float y;
float r;
public Circle(float x, float y, float r) {
this.x = x;
this.y = y;
this.r = r;
}
void draw() {
if(dist(mouseX, mouseY, x, y) < r){
//mouse is inside circle
fill(0, 255, 0);
}
else{
//mouse is outside circle
fill(0, 0, 255);
}
ellipse(x, y, r, r);
}
}
By breaking your bigger problem down into these smaller steps, it becomes much easier to debug your code than if you try to write your entire sketch at one time.
Step 4: Can you improve your interaction code to detect a click? Can you move the circle when a drag is detected?
You should probably break those steps down even further, but for the sake keeping this post short(er), I've combined them into one:
Circle circle;
void setup() {
size(500, 500);
ellipseMode(RADIUS);
circle = new Circle(100, 200, 50);
}
void draw() {
background(0);
circle.draw();
}
class Circle {
float x;
float y;
float r;
public Circle(float x, float y, float r) {
this.x = x;
this.y = y;
this.r = r;
}
void draw() {
if(dist(mouseX, mouseY, x, y) < r){
//mouse is inside circle
if(mousePressed){
//mouse is being dragged
fill(255, 0, 0);
//move the circle to the mouse position
x = mouseX;
y = mouseY;
}
else{
//mouse is not clicked
fill(0, 255, 0);
}
}
else{
//mouse is outside circle
fill(0, 0, 255);
}
ellipse(x, y, r, r);
}
}
Step 5: Can you make it work for multiple objects? If you've done a good job of breaking your problem down into small steps and encapsulating your logic into a class, then this step becomes pretty easy.
ArrayList<Circle> circles = new ArrayList<Circle>();
void setup() {
size(500, 500);
ellipseMode(RADIUS);
for (int i = 0; i < 10; i++) {
circles.add(new Circle(random(width), random(height), random(10, 50)));
}
}
void draw() {
background(0);
for (Circle circle : circles) {
circle.draw();
}
}
class Circle {
float x;
float y;
float r;
public Circle(float x, float y, float r) {
this.x = x;
this.y = y;
this.r = r;
}
void draw() {
if (dist(mouseX, mouseY, x, y) < r) {
//mouse is inside circle
if (mousePressed) {
//mouse is being dragged
fill(255, 0, 0);
//move the circle to the mouse position
x = mouseX;
y = mouseY;
} else {
//mouse is not clicked
fill(0, 255, 0);
}
} else {
//mouse is outside circle
fill(0, 0, 255);
}
ellipse(x, y, r, r);
}
}
To summarize, you need to break your problem down into smaller steps and take on those steps one at a time. If you get stuck on a specific step (or if you don't understand one of the steps in my answer) then you can post a small example MCVE like my examples above, and ask a specific question.
Happy coding!
