Additive Wave
Create a more complex wave by adding two waves together. Original by Daniel Shiffman
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
let xspacing = 8; // Distance between each horizontal location
let w; // Width of entire wave
let maxwaves = 4; // total # of waves to add together
let theta = 0.0;
let amplitude = new Array(maxwaves); // Height of wave
// Value for incrementing X, to be calculated
// as a function of period and xspacing
let dx = new Array(maxwaves);
// Using an array to store height values
// for the wave (not entirely necessary)
let yvalues;
function setup() {
createCanvas(710, 400);
frameRate(30);
colorMode(RGB, 255, 255, 255, 100);
w = width + 16;
for (let i = 0; i < maxwaves; i++) {
amplitude[i] = random(10, 30);
let period = random(100, 300); // Num pixels before wave repeats
dx[i] = (TWO_PI / period) * xspacing;
}
yvalues = new Array(floor(w / xspacing));
}
function draw() {
background(0);
calcWave();
renderWave();
}
function calcWave() {
// Increment theta (try different values
// for 'angular velocity' here
theta += 0.02;
// Set all height values to zero
for (let i = 0; i < yvalues.length; i++) {
yvalues[i] = 0;
}
// Accumulate wave height values
for (let j = 0; j < maxwaves; j++) {
let x = theta;
for (let i = 0; i < yvalues.length; i++) {
// Every other wave is cosine instead of sine
if (j % 2 == 0) yvalues[i] += sin(x) * amplitude[j];
else yvalues[i] += cos(x) * amplitude[j];
x += dx[j];
}
}
}
function renderWave() {
// A simple way to draw the wave with an ellipse at each location
noStroke();
fill(255, 50);
ellipseMode(CENTER);
for (let x = 0; x < yvalues.length; x++) {
ellipse(x * xspacing, width / 2 + yvalues[x], 16, 16);
}
}
