Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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;
}
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!