# Draw a dotted line with the mouse using if statements

**URL:** <https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888>\
**Category:** Beginners\
**Created:** [March 22, 2022, 6:16am UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888 "2022-03-22T06:16:37Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![onyx88](https://avatars.discourse-cdn.com/v4/letter/o/977dab/32.png) [@onyx88](https://discourse.processing.org/u/onyx88)\
**Post date:** [March 22, 2022, 6:16am UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/1 "2022-03-22T06:16:37Z")

</div>

![Screen Shot 2022-03-21 at 2.06.34 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e28b60292bff3cd3340d91013c00c4c794a7cd21.png)

Hi everyone im a beginner and im not sure how to approach this question. The _hint_ part of the question is confusing me and everything ive tried hasn’t given me a dotted line. Does it want us to draw two different lines or change the color of the same line upon keyPressed? It seems like something simple that I’m overcomplicating tbh but I can’t tell what.

Either way how would you go about solving this question? You can only use if statements and booleans to solve it, not loops.

thank you :’)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2022, 8:16am UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/2 "2022-03-22T08:16:26Z")

</div>

> [@onyx88](#):
>
> Does it want us to draw two different lines or change the color of the same line upon keyPressed?

It is stated that the dashing is made by alternating between black and white when drawing.

How do you draw a solid line?  
Did you look at `pmouseX,pmouseY`? It stand for previous mouse position.

Just alternate by toggling a boolean variable `dashingFlag` and evaluate it with `if`:

```auto
if(dashingFlag) 
  stroke(255); 
   else 
  stroke(0);

```

Right before drawing a line

---

<div class="post-metadata">

**Author:** ![onyx88](https://avatars.discourse-cdn.com/v4/letter/o/977dab/32.png) [@onyx88](https://discourse.processing.org/u/onyx88)\
**Post date:** [March 22, 2022, 9:00am UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/3 "2022-03-22T09:00:30Z")

</div>

But that would just change the stroke color to black and draw a black line instead of a line with alternating color.

with the if statement set up that way^ and the line command like

```auto
line(mouseX, mouseY, pmouseX, pmouseY); 

```

a solid line is drawn that changes colour and becomes dotted on keyPressed, it doesn’t draw small sectional lines of black and white like the question wants.

im sorry if I didn’t apply your input correctly but that’s what I got from it.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2022, 9:03am UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/4 "2022-03-22T09:03:28Z")

</div>

> [@onyx88](#):
>
> would just change the stroke color to black and draw a black line instead of a line with alternating color.

I think the task presumes that your background color is white.

When you then draw a line that alternates between white and black, it’s a dashed line.

That is also stated clearly in the assignment.

Anyway, post your entire, runable code and let’s work from there.

> [@onyx88](#):
>
> But that would just change the stroke color to black and draw a black line instead of a line with alternating color.

it alternates between white and black every frame which is rather fast. Did you try it? The idea is that during drawing the color changes so fast, that the lines becomes dashed.

> [@onyx88](#):
>
> it doesn’t draw small sectional lines of black and white like the question wants.

Did you test it?

---

<div class="post-metadata">

**Author:** ![onyx88](https://avatars.discourse-cdn.com/v4/letter/o/977dab/32.png) [@onyx88](https://discourse.processing.org/u/onyx88)\
**Post date:** [March 22, 2022, 12:47pm UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/5 "2022-03-22T12:47:02Z")

</div>

this doesnt work as intended, what needs to be changed?

```auto
boolean dash = true;

void setup(){
  background(100);
  size(500,500); 
}  
 
void draw(){
  if(dash){
    stroke(255);
}
    else{
      stroke(0);
      line(mouseX, mouseY, pmouseX, pmouseY);
    } 

}

```

I didn’t add the keyPressed command into the code here cz im not sure if I should use the boolean variable keyPressed or the function keyPressed, neither works with this attempt tho lol :’)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2022, 1:03pm UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/6 "2022-03-22T13:03:19Z")

</div>

> [@onyx88](#):
>
> ```auto
> else{
> stroke(0);
> line(mouseX, mouseY, pmouseX, pmouseY);
> } 
> 
> ```

The bracket } needs to be after the stroke command.

Now the line command is inside the else part of the if-clause. Bad.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2022, 1:06pm UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/7 "2022-03-22T13:06:58Z")

</div>

You can use **ctrl-t** in processing.

Then you get auto-format and you can spot such mistakes by the indent of the lines.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2022, 1:35pm UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/8 "2022-03-22T13:35:28Z")

</div>

> [@onyx88](#):
>
> if I should use the boolean variable keyPressed or the function keyPressed

Use the former please

Surround your current if else clause by

- an if clause with keyPressed and
- set the new else block (so insert a new else block please, for `keyPressed==false`) so that it sets the color to black (solid line)

**Pseudo-Code**

```auto
if(keyPressed) {
    // dashed line 
    if(dash){
       stroke(255);
       dash=false; 
    }
    else{
      stroke(0);
      dash=true; 
    }
} // ------------------
else {
   // solid line
   stroke(0); // standard color for solid line
} //else 

line(mouseX, mouseY, pmouseX, pmouseY);

```

_not tested._

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 22, 2022, 8:42pm UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/9 "2022-03-22T20:42:40Z")

</div>

Hello @onyx88,

I worked on this from the inside out.

This will alternate the background:

```auto
// ALternate Colors
// v1.0.0
// GLV 2022-03-22

boolean toggle = false;

void setup() 
  {
  size(100, 100);
  frameRate(5); //Slowed things down. Do NOT use in final code.
  }

void draw() 
  {
  toggle = !toggle; // ! is the NOT operator
  println(toggle);
  
  if(toggle)
    {
    background(0);
    }
  else 
    {
    background(255, 255, 0);   
    }    
  }	

```

You can use the same concept to set the _stroke()_ color of your line to alternate every frame.

References:

- [https://processing.org/reference/draw\_.html](https://processing.org/reference/draw_.html)

- [https://processing.org/reference/frameRate\_.html](https://processing.org/reference/frameRate_.html)

- [https://processing.org/reference/else.html](https://processing.org/reference/else.html)

- [https://processing.org/reference/boolean.html](https://processing.org/reference/boolean.html)

- [https://processing.org/reference/logicalNOT.html](https://processing.org/reference/logicalNOT.html)

- [Continuous Lines / Examples / Processing.org](https://processing.org/examples/continuouslines.html)[https://processing.org/examples/continuouslines.html](https://processing.org/examples/continuouslines.html)

I then wrapped this around above code:

```auto
 if(mousePressed)
    {
    if (keyPressed)
      {
     // Code here...
      }
    else
     {
     // Code here...
     }
   }

```

And voila!

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/995b8c05f406947a534e37367732d6880db55ef7.png)

`:)`

---

<div class="post-metadata">

**Author:** ![onyx88](https://avatars.discourse-cdn.com/v4/letter/o/977dab/32.png) [@onyx88](https://discourse.processing.org/u/onyx88)\
**Post date:** [March 23, 2022, 12:34am UTC](https://discourse.processing.org/t/draw-a-dotted-line-with-the-mouse-using-if-statements/35888/10 "2022-03-23T00:34:13Z")

</div>

![Screen Shot 2022-03-22 at 7.34.39 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b361d6da7aeba8a405f95079b174410929c23c6b.png)

AWESOME! Thank you!!