Redraw function with color change/mouse interaction

Processing Coding Questions
1

Hi, I’m in a class where we adapt code to fulfill the assignments. I’m working on mouse interaction with the redraw() function in Processing. What I’m trying to do is have the leaf colours change everytime the mouse is pressed. How do I get the leaf colour to change and where do I write this in? Eventually I would like the leaves to fall but I’m stuck. Any tips are appreciated. The class lesson involves functions and we haven’t gotten to classes yet…

/*
Task: Develop a program that incorporates more than one function. Once this has
been completed, try to vary or disrupt the pattern dynamically using mouse interaction.
*/


//VARIABLES
color c = color(189, 240, 201); //leaf color
color d = color(171, 211, 158);//leaf color after mouse pressed?

//SETUP
void setup()
{
  size(400,600);
  background(16, 106, 37);
  smooth();
  noStroke();
  noLoop();
}


//DRAW
void draw()
{
  fill(c);
  vine(40, 9, 16);
  vine(80, 9, 16);
  vine(120, 9, 16);
  vine(160, 9, 16);
  vine(200, 9, 16);
  vine(240, 9, 16);
  vine(280, 9, 16);
  vine(320, 9, 16);
  vine(360, 9, 16);
}


//New vine function
void vine(int x, int numLeaves, int leafSize)
{
  stroke(134, 100, 95);
  line(x, 0, x, height);
  noStroke();
  int gap = height / numLeaves;
  int direction = 1;
  for (int i = 0; i < numLeaves; i++)
  {
    int r = int(random(gap));
    leaf(x, gap*i + r, leafSize, direction);
    direction = -direction;
  }
}


//Previous leaf function 
void leaf(int x, int y, int size, int dir)
{
  pushMatrix();
  translate(x,y);
  scale(size);
  beginShape();
  vertex(1.0*dir, -0.7);
  bezierVertex(1.0*dir, -0.7, 0.4*dir, -1.0, 0.0, 0.0);
  bezierVertex(0.0, 0.0, 1.0*dir, 0.4, 1.0*dir, -0.7);
  endShape();
  popMatrix();
}
  void mousePressed()
  {
    redraw(); // Run the code in draw one time
    fill (d);//Leaf colour changes each time mouse is pressed?
}
type or paste code here
2

Hi @lemoney,

There are many ways to achieve the goal to get the color changed by mouse pressed, but it is important that you try to understand the process flow of your code.

First hint would be …
check your draw function which is called on redraw.

No matter what you are doing beside, it is always set the fill color to c, even if you set it to d on other code places.
If you want to change the color each time the mouse is pressed, you need to implement a kind of a switch for it.
Maybe you can introduce a counter for the mouse pressed action and switch the color depending of its value. For odd counter values fill(d) and for even values fill(c). If you only use two colors it could also be a boolean switch.

Give it a try and come back if you stuck…

Regarding…

Let’s go step by step. First try the color thing…

Cheers
— mnse

1 Like
3

Hello and thanks so much for the tips. I’ve managed to add colours using mouse interactions (left vs right click). What would be the best way to have the leaves fall after, say, the fifth mouse click (doesn’t matter if it’s a left or right)?? Here’s what I have so far…

//VARIABLES
color c = color(189, 240, 201); //leaf colour
color d = color(69, 131, 116);
color e = color(198, 103, 30);

//SETUP
void setup()
{
  size(400,600);
  background(16, 106, 37);
  smooth();
  noStroke();
  noLoop();
}


//DRAW
void draw()
{
  if (mousePressed && (mouseButton == LEFT))
  {
    fill (d);
    vine(40, 9, 16);
    vine(80, 9, 16);
    vine(120, 9, 16);
    vine(160, 9, 16);
    vine(200, 9, 16);
    vine(240, 9, 16);
    vine(280, 9, 16);
    vine(320, 9, 16);
    vine(360, 9, 16);
  }
  else if (mousePressed && (mouseButton == RIGHT))
  {
    fill (e);
    vine(40, 9, 16);
    vine(80, 9, 16);
    vine(120, 9, 16);
    vine(160, 9, 16);
    vine(200, 9, 16);
    vine(240, 9, 16);
    vine(280, 9, 16);
    vine(320, 9, 16);
    vine(360, 9, 16);
}
  else
  {
    fill (c);
    vine(40, 9, 16);
    vine(80, 9, 16);
    vine(120, 9, 16);
    vine(160, 9, 16);
    vine(200, 9, 16);
    vine(240, 9, 16);
    vine(280, 9, 16);
    vine(320, 9, 16);
    vine(360, 9, 16);

}
}

//New vine function
void vine(int x, int numLeaves, int leafSize)
{
  stroke(134, 100, 95);
  line(x, 0, x, height);
  noStroke();
  int gap = height / numLeaves;
  int direction = 1;
  for (int i = 0; i < numLeaves; i++)
  {
    int r = int(random(gap));
    leaf(x, gap*i + r, leafSize, direction);
    direction = -direction;
  }
}


//Previous leaf function 
void leaf(int x, int y, int size, int dir)
{
  pushMatrix();
  translate(x,y);
  scale(size);
  beginShape();
  vertex(1.0*dir, -0.7);
  bezierVertex(1.0*dir, -0.7, 0.4*dir, -1.0, 0.0, 0.0);
  bezierVertex(0.0, 0.0, 1.0*dir, 0.4, 1.0*dir, -0.7);
  endShape();
  popMatrix();
}
    void mousePressed()
  {
    redraw(); // Run the code in draw if mouse pressed
}
4

Hi @lemoney,

you can write it ie. as

void setup()
{
  size(400,600);
  background(16, 106, 37);
  smooth();
  noStroke();
  
  fill(c); // default for the first loop.

  noLoop();
}

void mousePressed()
{
  if (mouseButton == LEFT)       
    fill(d);
  else if (mouseButton == RIGHT) 
    fill(e);  
  else // middle mouse button
    fill(c);    
  redraw(); // Run the code in draw if mouse pressed
}

//DRAW
void draw()
{
  vine(40, 9, 16);
  vine(80, 9, 16);
  vine(120, 9, 16);
  vine(160, 9, 16);
  vine(200, 9, 16);
  vine(240, 9, 16);
  vine(280, 9, 16);
  vine(320, 9, 16);
  vine(360, 9, 16);
}

This is imo out of scope based on the current concept of your program. You must imagine that ie. a falling leave is a kind of animation where you need to store and manipulation the leaves positions on each step. For this you need a different approach. For example something like …

  • on setup
    • generate initial leaves [best way would be imo an array with leave objects]
  • on each draw loop
    • clear screen
    • add new leaves [optional]
    • update the position of the leaves
    • draw/re-draw the leaves with new positions

Cheers
— mnse

1 Like
5

Thank you sooo much. Yes, we’re moving onto arrays next week. Thanks again!