How to rotate a wave in Processing?

Question

How to rotate a wave in Processing?

Navigation

#1 by (1 votes)

1

I am new in Processing and I need to turn all this wave PI / 8 with respect to its horizontal axis, I have tried with rotate () and translate () but I can not do it because everything is dismantled. Somebody help me please? I leave the code here:

int xspacing;   
int w;          

float theta ;
float amplitude = 75.0; 
float period = 300;
float dx; 
float[] yvalues;  

void setup() {
 size(600, 400);
 xspacing = width/30;
 period = width/2; 
 w = width+20;  
 dx = (TWO_PI / period) * xspacing;
 yvalues = new float[w/xspacing];
}

void draw() {
  background(255, 255, 255);
  calcWave();
  renderWave();
}

void calcWave() {
 theta += 1/(60/PI);
 float x = theta;
   for (int i = 0; i < yvalues.length; i++) {
      yvalues[i] = sin(x)*amplitude;
      x+=dx;
   }
}

void renderWave() {
 noStroke();
 fill(0, 0, 0);
   for (int x = 0; x < yvalues.length; x++) {
     ellipse(x*xspacing, height/2+yvalues[x], 10, 10);
   }
}

java

asked by LolaBonet 11.11.2018 в 21:36

source

1 answer

GET "UID" IN JSON (PHP) How to show a checkbox if a variable has text, jquery?

score 1 · Accepted Answer

The rotate() statement affects the rest of the drawing instructions that come later, so just add it to the beginning of your renderWave() function, for example:

void renderWave() {
 angle=PI/8;
 rotate(-angle);
 noStroke();
 fill(0, 0, 0);
   for (int x = 0; x < yvalues.length; x++) {
     ellipse(x*xspacing, height/2+yvalues[x], 10, 10);
   }
}

With that you already get the inclined wave, but also displaced because the rotation is made with respect to the origin of coordinates, which in your case is the upper left corner of the screen.

If you want to "re-center" it, you will have to move the result of the turn an amount that should be calculated carefully. I'm not sure but I think the following should work:

void renderWave() {
 angle=PI/8;

 rotate(-angle);
 translate(-height/2*cos(angle), height/2*sin(angle));
 noStroke();
 fill(0, 0, 0);
   for (int x = 0; x < yvalues.length; x++) {
     ellipse(x*xspacing, height/2+yvalues[x], 10, 10);
   }
}