Graphing Trigonometric Functions

Why This Matters

When you graph y = sin(x), you get a smooth wave that repeats every 2 pi radians. But real-world waves — sound, light, radio signals, ocean tides — are rarely that simple. They have different heights, speeds, and starting points. The general form A * sin(B * x + C) + D lets you control every aspect of the wave: amplitude (A) sets the height, period (2 pi / B) sets how quickly it repeats, and phase shift (-C / B) slides it left or right. D shifts the entire wave up or down.

Understanding these parameters is essential for anyone working with signals, audio, animations, or data that oscillates. In audio synthesis, amplitude controls volume and period controls pitch. In CSS animations, sine-based easing functions create natural-looking motion. In data science, fitting sine curves to seasonal data reveals cyclical patterns. Once you understand A, B, C, and D, you can generate, analyze, and manipulate any sine-based wave in code.

Define Terms

Visual Model

Code Example

// Base sine wave: generate y values
function generateSineWave(A, B, C, D, start, end, steps) {
  const result = [];
  const stepSize = (end - start) / steps;
  for (let i = 0; i <= steps; i++) {
    const x = start + i * stepSize;
    const y = A * Math.sin(B * x + C) + D;
    result.push({ x: x.toFixed(3), y: y.toFixed(4) });
  }
  return result;
}

// Basic sin(x) from 0 to 2*pi
const basic = generateSineWave(1, 1, 0, 0, 0, 2 * Math.PI, 8);
console.log("Basic sin(x):");
basic.forEach(p => console.log(`  x=${p.x} y=${p.y}`));

// Amplitude: 3*sin(x)
console.log("\nAmplitude = 3:");
const amp3 = generateSineWave(3, 1, 0, 0, 0, 2 * Math.PI, 4);
amp3.forEach(p => console.log(`  x=${p.x} y=${p.y}`));

// Period change: sin(2x) -> period = pi
console.log("\nFrequency B=2 (period = pi):");
const freq2 = generateSineWave(1, 2, 0, 0, 0, 2 * Math.PI, 8);
freq2.forEach(p => console.log(`  x=${p.x} y=${p.y}`));

// Compute wave properties
function waveProperties(A, B, C, D) {
  console.log(`y = ${A}*sin(${B}x + ${C}) + ${D}`);
  console.log(`  Amplitude: ${Math.abs(A)}`);
  console.log(`  Period: ${(2 * Math.PI / Math.abs(B)).toFixed(4)}`);
  console.log(`  Phase shift: ${(-C / B).toFixed(4)}`);
  console.log(`  Vertical shift: ${D}`);
  console.log(`  Range: [${D - Math.abs(A)}, ${D + Math.abs(A)}]`);
}

console.log("\nWave properties:");
waveProperties(2, 3, Math.PI, -1);

// Combining two waves (additive synthesis)
function combinedWave(x) {
  return Math.sin(x) + 0.5 * Math.sin(2 * x) + 0.25 * Math.sin(3 * x);
}
console.log("\nCombined wave at x=1:", combinedWave(1).toFixed(4));

Interactive Experiment

Try these exercises:

• Generate y values for sin(x), 2sin(x), and 0.5sin(x) at x = 0, pi/4, pi/2, pi. How does the amplitude change the output?
• Compare sin(x) and sin(2x) over one full period. How many complete cycles does sin(2x) make in the interval 0 to 2*pi?
• Generate sin(x) and sin(x + pi/2). Does shifting by pi/2 turn sine into cosine? Verify numerically.
• Create the wave y = 3sin(2x + pi/4) - 1. What are its amplitude, period, phase shift, and vertical offset? Verify by computing y at key points.
• Add together sin(x), sin(2x), and sin(3x). The result is a more complex wave. This is the idea behind Fourier series.

Quick Quiz

Coding Challenge

Real-World Usage

Graphing and generating trig waves is fundamental to many domains:

• Audio engineering: Every musical note is a sine wave at a specific frequency. Amplitude maps to volume, frequency to pitch, and phase to timing. Synthesizers combine waves with different A, B, C, D values to create instruments.
• Animation and motion design: Sine-based easing functions create natural bounce, sway, and oscillation effects. CSS animations, game characters, and UI transitions often use parameterized sine waves.
• Signal processing: AM radio modulates amplitude (A), FM radio modulates frequency (B), and phase modulation changes C. Understanding these parameters is essential for telecommunications.
• Data science: Seasonal patterns in time series data (temperature, sales, web traffic) are modeled by fitting sine curves. The fitted A, B, C, D values reveal the strength, period, and timing of the seasonal effect.
• Electrical engineering: AC power is a sine wave. The amplitude is the voltage, the period is determined by the grid frequency (50 or 60 Hz), and phase shifts matter when combining multiple power sources.

Connections