Processing (Java): How to make a plotted sine function look continuous instead of separate dots when the amplitude of the function increases

Question

I have plotted a sine wave in Processing by putting x amount of pixels in the function. It looks like a continuous line at a first glance:

Sine wave looks continuous

But when I increase the amplitude of the wave, I notice that the plotted dots spread out and it doesn't look continuous anymore:

Sine wave with increased amplitude where the points are spread

I thought that plotting more points or interpolation between the points might solve the problem. I was wondering what would be the most efficient way to make the function look continuous for any increment of the amplitude or frequency.

If it helps in any way, here's the code in Processing:

// sine variables
float x, y, y2, offset,r = 0;
float ex = 0, ey = 0; 
 
void setup() {
  size(800, 800);
  frameRate(60);
}
 
void draw() {
  // sine
  checkMouse();
  amp = amp+ex;
  background(0);
  y2 = y;
  stroke(255);
  for (int i = 5; i < 6;i++) {
  updateWave(i);
  }
}

void updateWave(float i) {
  for (int x = 1; x < width; x+=1) {
  y = sin(radians(-x*abs(ex)+r))*ey*i;
  circle(x, y+height/2,2);
  }
  r = millis()/8;
}

void checkMouse() {
  if (mousePressed){
    ex = (mouseX - height/2)*0.01;
    ey = pow((mouseY- height/2), 2)/1000;
  } else {
    if (ey < 1) {
    ey = 0;
  } else {
    ey -= 1;
  }
  }
}

Thanks!!

You could draw a line between previous point and current point. — Alice Oualouest, Nov 20 '20 at 11:43

Rabbid76 · Accepted Answer · 2020-11-23T18:18:44.293

Draw a line (line()) between 2 consecutive points rather than single dots (circle()). The thickness of a line can be set by strokeWeight():

void updateWave(float i) {
    strokeWeight(2);
    float prevY = 0.0;
    for (int x = 0; x < width; x ++) {
        float newY = sin(radians(-x*abs(ex)+r))*ey*i + height/2;
        if (x > 0)
            line(x-1, prevY, x, newY);
        prevY = newY;
    }
    r = millis()/8;
}

score 1 · Answer 2 · answered Nov 20 '20 at 12:36

Instead of creating a line and having to remember the previous point you could use the createShape() function provided by processing. To doc has some good examples.

The idea is to start your shape with s = createShape() before you start the loop which calls updateWave() in draw(). Then in updateWave() instead of creating a circle() you will create a new s.vertex() in the shape.

When you are out of the loop you can call s.endShape() and you can then call shape(s) to draw the shape created by these points.

Processing (Java): How to make a plotted sine function look continuous instead of separate dots when the amplitude of the function increases

2 Answers2