Zig Zag or Wavy or Spiral or Dotted lines ๐Ÿ‘€

Processing Beginners
1

Hi guys, I am a newbie to Processing ( by the way, I really liked this name, Processing :ok_hand: ) 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 :wavy_dash: or Spiralโ€‹:shell: or Dotted lines in a letโ€™s say size (300, 300 ) ;? :thinking:

Any input in this regard will be greatly appreciated :revolving_hearts:

After hours of trying , following is the code my code for a zig zag line though not a smooth one !:joy:
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);

2

Hello,

I encourage you to look at the resources available here:

Beginner

Advanced

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

:)

4 Likes
3

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
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
4

Version two with wavy lines

image
image602ร—604 5.07 KB

(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
5

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

6

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

7

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
4th: addition and subtraction

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

8

Hello,

Processing is Java

Processing example:
https://processing.org/examples/operatorprecedence.html

Java:
https://docs.oracle.com/javase/tutorial/java/nutsandbolts/operators.html

:)