Processing - Plotting Two Curves on the same Plot

[jedishrfu]

Here is a Java Processing sketch that plots both the sine and cosine functions in the interval [0, 2\pi].

Processing makes it easy to create graphical representations of mathematical functions.

Processing Code:​

float scaleX;     // Scaling factor for x-axis
float scaleY;     // Scaling factor for y-axis
float padding = 50;

void setup() {
  size(800, 400);
  scaleX = (width - 2 * padding) / (2 * PI); // Scale x to fit from 0 to 2π
  scaleY = (height - 2 * padding) / 2;       // Scale y from -1 to 1
  background(255);
  drawAxes();
  drawSine();
  drawCosine();
}

void drawAxes() {
  stroke(0);
  line(padding, height / 2, width - padding, height / 2); // X-axis
  line(padding, padding, padding, height - padding);      // Y-axis
 
  // Labels
  fill(0);
  textSize(14);
  text("0", padding - 10, height / 2 + 15);
  text("π", padding + scaleX * PI - 5, height / 2 + 15);
  text("2π", padding + scaleX * 2 * PI - 10, height / 2 + 15);
  text("1", padding - 20, height / 2 - scaleY);
  text("-1", padding - 25, height / 2 + scaleY);
}

void drawSine() {
  stroke(255, 0, 0); // Red for sine
  noFill();
  beginShape();
  for (float x = 0; x <= 2 * PI; x += 0.01) {
    float screenX = padding + x * scaleX;
    float screenY = height / 2 - sin(x) * scaleY;
    vertex(screenX, screenY);
  }
  endShape();
}

void drawCosine() {
  stroke(0, 0, 255); // Blue for cosine
  noFill();
  beginShape();
  for (float x = 0; x <= 2 * PI; x += 0.01) {
    float screenX = padding + x * scaleX;
    float screenY = height / 2 - cos(x) * scaleY;
    vertex(screenX, screenY);
  }
  endShape();
}

Explanation:​

1. Window Setup (setup()):
   • The window size is set to 800x400 pixels via the size() function call in setup(). Size() initializes the width and height global variables.
   • Scaling factors for both x and y axes are calculated based on the window size.
   • Calls functions to draw axes, sine, and cosine curves.
2. Drawing Axes (drawAxes()):
   • The x-axis and y-axis are drawn with labels for 0, π, and 2π.
   • The y-axis is labeled at 1 and -1.
3. Plotting the Sine Function (drawSine()):
   • Uses a red stroke.
   • Iterates over x-values from 0 to 2π, mapping function values to screen coordinates.
   • Uses beginShape() and vertex() to draw the continuous sine curve.
4. Plotting the Cosine Function (drawCosine()):
   • Uses a blue stroke.
   • Similar approach to the sine function but with cos(x) instead of sin(x).

Notes:​

ChatGPT originally generated the java processing sketch incorrectly. It erroniously initialized two global integer variables width and height and used them as arguments for the size(width,height).

Its a known gotcha in processing coding. I removed the global definitions and replaced size(width, height) with size(800,400). Size() can only be called once at the start of a processing sketch.

https://processing.org/reference/size_.html

Output:​

• A red sine wave and a blue cosine wave smoothly plotted over the interval [0, 2\pi].
• Properly labeled x-axis and y-axis.
• Graph is dynamically scaled to fit within the window.

Solution Credits​

Proposed by: @hagopbul
Coded by: @ChatGPT
Reviewed by: @jedishrfu

 

[Greg Bernhardt]

Nice @jedishrfu! Just bumping so this gets indexed.