How to stop a random line

stephanieavans

Hi,

How can I stop a random line? I would like to use it as a background when my canvas is filled with colors. After that I would like to draw a ellipse with mouseClicked.

int value = 0;
boolean isEllipse = true;

void setup() {
size(800,600);
noFill();
}

void draw() {
strokeWeight(8);
stroke(59,145,234);
float distance_top = random(800);
line(0,distance_top, 800,distance_top);

if(isEllipse) {
ellipse(650, 650, 20, 20);
}

else{
rect(800, 600, 0, 0);
}
};

void mouseClicked(){
stroke(0);
ellipse(100, 100, 50, 50);
if (value == 0 ) {
value = 255;
}
else {
value = 0;
}
}

TfGuy44

I'm going to try to help you, and the first thing I am going to suggest is to not rely on what was drawn in the previous frame as a background for your next frame.

In short, start your draw() function with a call to background():

void setup(){
  size(800,600);
}

void draw(){
  background(0);
}

Next, learn how to format your post so code shows up properly. Edit your post. Select the code. Then hit Ctrl+o.

TfGuy44

You want to draw some lines across your sketch. Since we aren't relying on what was drawn previously, we will need to remember where the lines we already drew were. We can keep track of their y positions in an array.

float [] positions = new float[300];

We might also want to know what the next position to store in this array is going to be:

int nextposition = 0;

And we also want to draw all the lines at those positions and add a new one each frame:

float [] positions = new float[300];
int nextPosition = 0;

void setup() {
  size(800, 600);
}

void draw() {
  background(0);
  strokeWeight(8); 
  stroke(59, 145, 234); 
  for ( int i = 0; i < nextPosition; i++) {
    line(0, positions[i], 800, positions[i]);
  }
  positions[nextPosition++] = random(height);
}

If you run this, you may notice it crashes after a short while. This is because we've run out of space in our array for more positions. It only holds 300 of them.

TfGuy44

Here we have added some logic to detect when that situation occurs, and to stop adding more random lines at that point.

float [] positions = new float[300];
int nextPosition = 0;
boolean stop_adding_lines = false;

void setup() {
  size(800, 600);
}

void draw() {
  background(0);
  strokeWeight(8); 
  stroke(59, 145, 234); 
  for ( int i = 0; i < min(nextPosition, positions.length); i++) {
    line(0, positions[i], 800, positions[i]);
  }
  nextPosition++;
  if( nextPosition == positions.length ){
    stop_adding_lines = true;
  }
  if( !stop_adding_lines ){
    positions[nextPosition] = random(height);
  }
}

TfGuy44

Now we need to add the ellipse. The ellipse only appears once the lines have stopped being drawn, so nothing happens inside mousePressed() until that situation occurs. Once adding the lines has stopped, however, clicking the mouse will set the values for ellipseX and ellipseY, which is where we're drawing an ellipse. Notice that these values start at -1000, so you don't see the ellipse at first because it is drawn off the screen.

float [] positions = new float[300];
int nextPosition = 0;
boolean stop_adding_lines = false;
float ellipseX = -1000;
float ellipseY = -1000;

void setup() {
  size(800, 600);
  strokeWeight(8);
}

void draw() {
  background(0);
  stroke(59, 145, 234); 
  for ( int i = 0; i < min(nextPosition, positions.length); i++) {
    line(0, positions[i], 800, positions[i]);
  }
  nextPosition++;
  if( nextPosition == positions.length ){
    stop_adding_lines = true;
  }
  if( !stop_adding_lines ){
    positions[nextPosition] = random(height);
  }
  ellipseMode(CENTER);
  stroke(0);
  noFill();
  ellipse(ellipseX, ellipseY, 50, 50);
}

void mousePressed(){
  if( stop_adding_lines ){
    ellipseX = mouseX;
    ellipseY = mouseY;
  }
}

TfGuy44

The important thing here is the use of the stop_adding_lines variable. It acts as a sort of indicator of what state the sketch is in. If it is false, we are still adding lines. If it is true, we have stopped adding lines and we are ready for a click to determine where the ellipse should go.

There is no reason you need to limit yourself to two states; your state-based variable need not be a boolean. You could have used an integer instead, with 0 being the state in which lines are added, and 1 being the state where we're ready to add the ellipse. You might try this yourself, and then add a state 2, which is a state in which no more lines are drawn, and the ellipse doesn't move to the new location of a click. Or maybe something else happens!

stephanieavans

Thank you for your help, this is great! I have to make an animation for school, can I ask you some other questions about processing?

kfrajer

Please edit your post, select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code.

Is the question is related to this post, you should continue under this post. If you have another question from another topic, you should start a new post. It is encourage to present a small sample code showing your approach.

Kf