jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Jay
2026-03-21 15:05:08 +00:00
parent 2100334f1f
commit 13c8b0a28e
26 changed files with 3176 additions and 2631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
projects/fourier_series.html
View File

@@ -1,122 +1,120 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<head>
<meta charset="UTF-8" />
<title>Fourier Series — Epicycles (p5.js)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background: #fafafa;
margin: 20px;
text-align: center;
}
body {
font-family: Arial, sans-serif;
background: #fafafa;
margin: 20px;
text-align: center;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#container {
max-width: 900px;
margin: 0 auto;
}
h1,
h2,
p {
margin: 10px 0;
}
h1,
h2,
p {
margin: 10px 0;
}
input[type="range"] {
display: block;
margin: 10px auto 0;
width: 260px;
}
input[type="range"] {
display: block;
margin: 10px auto 0;
width: 260px;
}
</style>
</head>
</head>
<body>
<body>
<div id="container">
<h1>Fourier Series</h1>
<p>
This interactive sketch visualizes a Fourier series using epicycles. Each circle represents
an odd harmonic; as you add more epicycles with the slider, the path on the right converges toward a
square wave. The rotating vectors sum to a point whose vertical position is traced over time.
</p>
<h1>Fourier Series</h1>
<p>
This interactive sketch visualizes a Fourier series using epicycles.
Each circle represents an odd harmonic; as you add more epicycles with
the slider, the path on the right converges toward a square wave. The
rotating vectors sum to a point whose vertical position is traced over
time.
</p>
<div class="canvas-holder">
</div>
<div class="canvas-holder"></div>
</div>
<script>
class dot {
constructor(x, y) {
this.x = x;
this.y = y;
}
class dot {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class circle {
constructor(cx, cy, r, a) {
this.cx = cx;
this.cy = cy;
this.r = r;
this.a = a;
}
class circle {
constructor(cx, cy, r, a) {
this.cx = cx;
this.cy = cy;
this.r = r;
this.a = a;
}
}
let time = 0;
let wave = [];
let time = 0;
let wave = [];
let slider;
let slider;
function setup() {
createCanvas(900, 800);
slider = createSlider(1, 50, 5);
function setup() {
createCanvas(900, 800);
slider = createSlider(1, 50, 5);
}
function draw() {
background(41);
translate(250, height / 2);
let x = 0;
let y = 0;
for (let i = 0; i < slider.value(); i++) {
let prevx = x;
let prevy = y;
let n = i * 2 + 1;
let radius = 100 * (4 / (n * PI));
x += radius * cos(n * time);
y += radius * sin(n * time);
stroke(255, 100);
noFill();
ellipse(prevx, prevy, radius * 2);
//fill(255);
stroke(255);
line(prevx, prevy, x, y);
//ellipse(x, y, 8);
}
wave.unshift(y);
function draw() {
background(41);
translate(250, height / 2);
let x = 0;
let y = 0;
for (let i = 0; i < slider.value(); i++) {
let prevx = x;
let prevy = y;
let n = i * 2 + 1;
let radius = 100 * (4 / (n * PI));
x += radius * cos(n * time);
y += radius * sin(n * time);
stroke(255, 100);
noFill();
ellipse(prevx, prevy, radius * 2);
//fill(255);
stroke(255);
line(prevx, prevy, x, y);
//ellipse(x, y, 8);
}
wave.unshift(y);
translate(200, 0);
line(x - 200, y, 0, wave[0]);
beginShape();
noFill();
for (let i = 0; i < wave.length; i++) {
vertex(i, wave[i]);
}
endShape();
time += 0.02;
if (wave.length > 450) {
wave.pop();
}
translate(200, 0);
line(x - 200, y, 0, wave[0]);
beginShape();
noFill();
for (let i = 0; i < wave.length; i++) {
vertex(i, wave[i]);
}
endShape();
time += 0.02;
if (wave.length > 450) {
wave.pop();
}
}
</script>
</body>
</body>
</html>