# Zig Zag or Wavy or Spiral or Dotted lines 👀

**URL:** <https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547>\
**Category:** Beginners\
**Created:** [August 2, 2021, 11:21am UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547 "2021-08-02T11:21:01Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Peace](https://avatars.discourse-cdn.com/v4/letter/p/c68b51/32.png) [@Peace](https://discourse.processing.org/u/Peace)\
**Post date:** [August 2, 2021, 11:21am UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/1 "2021-08-02T11:21:02Z")

</div>

Hi guys, I am a newbie to Processing ( by the way, I really liked this name, Processing 👌 ) and I have just learnt to draw vertical, horizons line, rect mode. Just wondering what will be the code for drawing Zig Zag or Wavy 〰 or Spiral​:shell: or Dotted lines in a let’s say size (300, 300 ) ;? 🤔

Any input in this regard will be greatly appreciated 💞

After hours of trying , following is the code my code for a zig zag line though not a smooth one !😂  
size (300, 300 );  
line ( 10, 10, 20, 60);  
line ( 20, 60, 30, 10);  
line (30,10, 60, 60);  
line (60, 60,70, 10) ;  
line (70,10, 90, 70);

---

<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:** [August 2, 2021, 11:51am UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/2 "2021-08-02T11:51:55Z")

</div>

Hello,

I encourage you to look at the resources available here:

**Beginner**

- The Processing website has _references_, _examples_, _tutorials_, etc.  
[https://processing.org/](https://processing.org/)

- The Processing PDE (IDE) has lots to offer!  
An exploration of the menu items will reveal what is available!  
You will find _libraries_, _tools_, _examples_ and more!  
For example:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d1f59b878cb30a4047dbfd8407702c77bc49bca6.png)

- The Coding Train  
[https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
[https://thecodingtrain.com/](https://thecodingtrain.com/)

- Happy Coding  
[https://happycoding.io/tutorials/processing/](https://happycoding.io/tutorials/processing/)

**Advanced**

- The source code can give insight if you are adventurous:  
[https://github.com/processing/processing](https://github.com/processing/processing)  
Many of the Processing functions are here:  
[https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)

- And the Internet.

When you are ready explore _for()_ loops :  
[https://processing.org/reference/for.html](https://processing.org/reference/for.html)

`:)`

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [August 2, 2021, 1:25pm UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/3 "2021-08-02T13:25:08Z")

</div>

Here is an example for a Zig-Zag pattern. It’s a quick program I wrote, but it doesn’t support rotation for now. If you want to turn it, look into functions:

- translate
- rotate
- push/pop matrix  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/36ad21efbc12761dfc2fde11774025b805d8597a.png)

> **Summary**
>
> ```auto
> void setup() {
> size(600,600);
> }
> void draw() {
> background(0);
> drawZZ(30,30,30,30,15,true);
> drawZZ(30,60,30,30,5,true); //shorter
> drawZZ(30,90,30,70,15,true);
> drawZZ(30,180,50,20,8,true);
> drawZZ(30,210,30,30,15,false); //without boxes
> }
> void drawZZ(float x, float y, float w, float h, int n, boolean showBoxes) {
> noFill();
> stroke(255);
> for(int i = 0; i < n; i++) {
> if(showBoxes) rect(x+i*w,y,w,h);
> if(i%2==0) line(x+i*w,y,x+(i+1)*w,y+h);
> else line(x+i*w,y+h,x+(i+1)*w,y);
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [August 2, 2021, 1:39pm UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/4 "2021-08-02T13:39:27Z")

</div>

Version two with wavy lines

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/adff297c0488606c16bfb735d207af63f526c8e5.png)  
(the bottom most wavy lines moves with tiime)

> **Code**
>
> ```auto
> void setup() {
> size(600,600);
> }
> void draw() {
> background(0);
> drawZZ(30,30,30,30,15,true);
> drawZZ(30,60,30,30,5,true); //shorter
> drawZZ(30,90,30,70,15,true);
> drawZZ(30,180,50,20,8,true);
> drawZZ(30,210,30,30,15,false); //without boxes
>   
> drawWavy(30,300,30,45,10,0,false); //dotted
> drawWavy(30,360,30,45,10,0, true); //connected
>   
> drawWavy(30,430,30,15,10,PI, true); //offset start
> drawWavy(30,490,15,50,10,(frameCount*0.1)%TWO_PI, true); //moving
> }
> void drawZZ(float x, float y, float w, float h, int n, boolean showBoxes) {
> noFill();
> stroke(255);
> for(int i = 0; i < n; i++) {
> if(showBoxes) rect(x+i*w,y,w,h);
> if(i%2==0) line(x+i*w,y,x+(i+1)*w,y+h);
> else line(x+i*w,y+h,x+(i+1)*w,y);
> }
> }
> void drawWavy(float x, float y, float amplitude, float waveLength, float waves, float offSet, boolean connect) {
> for(int i = 0; i < waves; i++) { //looping through waves
> for(int j = 0; j < waveLength; j++) { //drawing waves
> point(x+i*waveLength+j,y+amplitude*sin( TWO_PI/waveLength*j+offSet));
> if(connect) line(x+i*waveLength+j,y+amplitude*sin( TWO_PI/waveLength*j+offSet),
> x+i*waveLength+(j+1),y+amplitude*sin( TWO_PI/waveLength*(j+1) +offSet));
> }
> }
> }
> 
> ```

It can only use sin-waves (or cosine if you just offset it a bit since cos = co-sinus). If you want some randomness, you could use perlin noise and set a seed for generating pseudo random nubmers.

---

<div class="post-metadata">

**Author:** ![Peace](https://avatars.discourse-cdn.com/v4/letter/p/c68b51/32.png) [@Peace](https://discourse.processing.org/u/Peace)\
**Post date:** [August 3, 2021, 12:46pm UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/5 "2021-08-03T12:46:56Z")

</div>

Can you please help me finding the Arithmetic Order of Operation and Calculation in the processing ? Thanks

---

<div class="post-metadata">

**Author:** ![Peace](https://avatars.discourse-cdn.com/v4/letter/p/c68b51/32.png) [@Peace](https://discourse.processing.org/u/Peace)\
**Post date:** [August 3, 2021, 12:49pm UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/6 "2021-08-03T12:49:38Z")

</div>

Can you please help me finding the Arithmetic Order of Operation and Calculation in the processing ? Thanks

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [August 3, 2021, 1:31pm UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/7 "2021-08-03T13:31:16Z")

</div>

Do you mean priority of calculation? It is the same as normal math.  
So 1st is: “(”  
2nd: exponents: x^4 (x_x_x+x)  
3rd: multiplication & division  
4th: addition and subtraction

if they are on the same level, use the left one has priority.

---

<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:** [August 3, 2021, 1:38pm UTC](https://discourse.processing.org/t/zig-zag-or-wavy-or-spiral-or-dotted-lines/31547/8 "2021-08-03T13:38:30Z")

</div>

Hello,

> [@Peace](#):
>
> Can you please help me finding the Arithmetic Order of Operation and Calculation in the processing ?

[Processing is Java](https://happycoding.io/tutorials/java/processing-in-java)

Processing example:  
[https://processing.org/examples/operatorprecedence.html](https://processing.org/examples/operatorprecedence.html)

Java:  
[https://docs.oracle.com/javase/tutorial/java/nutsandbolts/operators.html](https://docs.oracle.com/javase/tutorial/java/nutsandbolts/operators.html)

`:)`