# Zig Zag or Wavy or Spiral or Dotted lines π

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);

Hello,

I encourage you to look at the resources available here:

Beginner

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

`:)`

4 Likes

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
Summary
``````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);
}
}
``````
3 Likes

Version two with wavy lines

(the bottom most wavy lines moves with tiime)

Code
``````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.

2 Likes

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

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

Do you mean priority of calculation? It is the same as normal math.
So 1st is: β(β
2nd: exponents: x^4 (xxx+x)
3rd: multiplication & division
`:)`