beginner exercise

Programming Questions

cgko.18

in Programming Questions • 1 year ago

Hi,
As a total beginner with Processing, I created an exercise for myself. The idea is that a line will be drawn from (100, 50) to (mouseX, mouseY), starting with a blue background, and everytime the mouse is clicked the background changes color. So I got it to change from blue to green, but I can't figure out how to change to a third background color on the next mouse click. Can anyone help me with this?

Also, I don't understand why the drawing starts with a line from the upper left corner to the point of the first line at 100, 50. Can someone explain where the code is for this?

Here's what I have so far:

void setup() {
size(400, 400);
stroke(175, 200, 0, 150);
strokeWeight(8);
smooth();
background(0, 0, 200);
}

void draw() {
smooth();
line(100, 50, mouseX, mouseY);
saveFrame("output.png");

}
void mousePressed() {
background(0, 175,40);
smooth();
}

THANKS, in advance, for your help!

Replies(4)

Ale_

Re: beginner exercise

1 year ago

Hi cgko.18!

For the color issue you have to create a way of storing all the colors you want to use. For instance, you might create a Color array this way:

color[] colors={color(255,0,0),color(0,255,0),color(0,0,255)};

Then you have to create a variable to store current color:

currentColor= 0;

So mousePressed() will be:

background(colors[currentColor]);

Now you have to think how do you move through the array and how you sort out the array index exceptions, for instance:

void mousePressed(){

currentColor++;

if (currentColor==colors.length) {

currentColor=0;

}

background(colors[currentColor]);

}

The other problem with the line is regarding mouseX and mouseY. Mouse coordinates are equal to 0 when the applet starts. There are ways of solving this, for instance using a pair of variables mX and mY.

int mX=100; int mY=50; //before setup()

So the line call would be:

line (100,50,mX,mY);

And add a mouseMoved() method to update mX and mY with mouse coordinates:

void mouseMoved(){

mX= mouseX;

mY= mouseY;

}

Btw, I´d suggest to forget so many calls to smooth() method. Do it just once, on setup().

Ale · http://60rpm.tv/i

cgko.18

Re: beginner exercise

1 year ago

Wow Ale,
Thank you so much for this. Fortunately, or unfortunately, depending on how you look it at, your solution to my problem is a bit over my head... but I am looking forward to figuring out, step by step, what you have suggested!

In the meanwhile, I still don't understand why the code I have written creates a line starting in the upper left corner of the box, before any press of the mouse. Can you possibly explain that? Also, I was definitely a bit confused about "smooth()". I thought entering smooth() the second time, after void mousePressed, kept the lines smooth after pressing the mouse. Does smooth() on setup ensure that everything that follows in the code will be smooth?

Thanks again.

cgko.18

Re: beginner exercise

1 year ago

Ale,
I realize the line is determined by:

line(100, 50, mouseX, mouseY);

To be honest, I used "mouseX, mouseY" without really understanding what it meant exactly.
Thanks.

tfguy44

Re: beginner exercise

1 year ago

line( x1, y1, x2, y2 ); draws a line between the point (x1,y1) and the point (x2,y2).
mouseX and mouseY are variables that always have the X and Y positions of the mouse pointer.
When your program starts, the mouse hasn't been in the sketch window yet, so mouseX and mouseY are both set to the default value of 0.
This means that your call of line(100, 50, mouseX, mouseY); ends up drawing a line between (100,50) and (0,0), which produces the diagonal line you're seeing.

The call to smooth() turns smooth shading on.
It will remain on from when it is called, even between separate calls to draw().
To turn of the smooth shading, you'd call noSmooth().