Skip to content

Commit c794555

Browse files
QC20QC20
committed
updated files with comments
1 parent 581d9f9 commit c794555

File tree

3 files changed

+145
-95
lines changed

3 files changed

+145
-95
lines changed

‎index.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
6-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script>
7-
<script src="mySketch.js"></script>
8-
<link rel="stylesheet" type="text/css" href="style.css">
4+
<meta charset="utf-8" />
5+
<!-- Import p5.js library and its sound addon -->
6+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
7+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script>
8+
<!-- Import our sketch file (corrected from mySketch.js to sketch.js) -->
9+
<script src="sketch.js"></script>
10+
<!-- Import CSS styles -->
11+
<link rel="stylesheet" type="text/css" href="style.css">
912
</head>
10-
11-
<body>
12-
13+
<body>
14+
<!-- Body is intentionally empty as p5.js will create and append the canvas element -->
1315
</body>
16+
</html>
1417

15-
</html>

‎sketch.js‎

Lines changed: 122 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,137 @@
1-
let cam;
2-
ns = 60;
3-
nss = 150;
4-
ni = 8;
5-
1+
// Declare global variables
2+
let cam; // Webcam capture
3+
let canvasElement; // Canvas element
4+
let w, h; // Width and height of the camera feed
5+
let bg; // Graphics buffer for drawing
6+
7+
// Noise parameters
8+
const ns = 60; // Noise scale for spatial variation
9+
const nss = 150; // Noise scale for temporal variation
10+
const ni = 8; // Noise intensity multiplier
11+
12+
/**
13+
* Setup function runs once when the program starts
14+
* Initializes the webcam and canvas
15+
*/
616
function setup() {
17+
// Create and hide the webcam capture
18+
cam = createCapture(VIDEO);
19+
cam.hide();
720

8-
cam = createCapture(VIDEO);
9-
cam.hide();
10-
11-
canvasElement = createCanvas(windowWidth, windowHeight);
12-
13-
background(0);
21+
// Create a canvas that fills the window
22+
canvasElement = createCanvas(windowWidth, windowHeight);
1423

24+
// Set initial background to black
25+
background(0);
1526
}
1627

28+
// Variables for pixel color values
1729
let i, r, g, b;
1830

31+
/**
32+
* Draw function runs continuously in a loop
33+
* Processes the webcam feed with visual effects
34+
*/
1935
function draw() {
20-
21-
background(0, 25);
22-
23-
if (cam.width > 0) {
24-
w = cam.width;
25-
h = cam.height;
26-
}
27-
28-
if (w > h) {
29-
sz = 5;
30-
space = 1;
31-
walk = 30;
32-
spd = 35;
33-
} else {
34-
sz = 5;
35-
space = 5;
36-
walk = 15;
37-
spd = 5;
38-
}
39-
40-
bg = createGraphics(w - (walk * 2), h - (walk * 2));
41-
42-
bg.noStroke();
43-
44-
if (width / height >= w / h) {
45-
46-
nW = width;
47-
nH = width / (w / h);
48-
oX = 0;
49-
oY = (height - nH) / 2;
50-
51-
} else {
52-
53-
nW = height * (w / h);
54-
nH = height;
55-
oX = (width - nW) / 2;
56-
oY = 0;
57-
58-
}
59-
60-
cam.loadPixels();
61-
62-
for (let x = 0; x < w; x += sz + space) {
63-
for (let y = 0; y < h; y += sz + space) {
64-
i = ((y * w) + x) * 4;
65-
r = cam.pixels[i];
66-
g = cam.pixels[i + 1];
67-
b = cam.pixels[i + 2];
68-
bg.fill(r, g, b);
69-
orbitX = sin(frameCount / spd) * walk;
70-
orbitY = cos(frameCount / spd) * walk;
71-
nx = noise(x / ns, y / ns) * noise(frameCount / nss) * ni;
72-
ny = noise(y / ns, x / ns) * noise(frameCount / nss) * ni;
73-
bg.ellipse((x - walk) + (orbitX * nx), (y - walk) + (orbitY * ny), sz, sz);
74-
}
75-
}
76-
77-
push();
78-
translate(width, 0);
79-
scale(-1, 1);
80-
image(bg, oX, oY, nW, nH);
81-
pop();
82-
36+
// Create a semi-transparent black background for trail effect
37+
background(0, 25);
38+
39+
// Wait until camera is loaded
40+
if (cam.width > 0) {
41+
w = cam.width;
42+
h = cam.height;
43+
}
44+
45+
// Set parameters based on camera orientation
46+
let sz, space, walk, spd;
47+
if (w > h) {
48+
// Landscape orientation
49+
sz = 5; // Size of particles
50+
space = 1; // Space between particles
51+
walk = 30; // Orbital distance
52+
spd = 35; // Animation speed
53+
} else {
54+
// Portrait orientation
55+
sz = 5;
56+
space = 5;
57+
walk = 15;
58+
spd = 5;
59+
}
60+
61+
// Create graphics buffer for off-screen rendering
62+
bg = createGraphics(w - (walk * 2), h - (walk * 2));
63+
bg.noStroke();
64+
65+
// Calculate dimensions for maintaining aspect ratio
66+
let nW, nH, oX, oY;
67+
if (width / height >= w / h) {
68+
// Window is wider than camera aspect ratio
69+
nW = width;
70+
nH = width / (w / h);
71+
oX = 0;
72+
oY = (height - nH) / 2;
73+
} else {
74+
// Window is taller than camera aspect ratio
75+
nW = height * (w / h);
76+
nH = height;
77+
oX = (width - nW) / 2;
78+
oY = 0;
79+
}
80+
81+
// Load pixel data from webcam
82+
cam.loadPixels();
83+
84+
// Loop through pixels at intervals to create particles
85+
for (let x = 0; x < w; x += sz + space) {
86+
for (let y = 0; y < h; y += sz + space) {
87+
// Calculate pixel index and get RGB values
88+
i = ((y * w) + x) * 4;
89+
r = cam.pixels[i];
90+
g = cam.pixels[i + 1];
91+
b = cam.pixels[i + 2];
92+
93+
// Set fill color based on pixel color
94+
bg.fill(r, g, b);
95+
96+
// Calculate orbital movement
97+
let orbitX = sin(frameCount / spd) * walk;
98+
let orbitY = cos(frameCount / spd) * walk;
99+
100+
// Add noise-based displacement
101+
let nx = noise(x / ns, y / ns) * noise(frameCount / nss) * ni;
102+
let ny = noise(y / ns, x / ns) * noise(frameCount / nss) * ni;
103+
104+
// Draw the particle (ellipse)
105+
bg.ellipse((x - walk) + (orbitX * nx), (y - walk) + (orbitY * ny), sz, sz);
106+
}
107+
}
108+
109+
// Draw the processed image to the canvas
110+
// Use push/pop to apply transformations only to this image
111+
push();
112+
// Flip horizontally to create mirror effect
113+
translate(width, 0);
114+
scale(-1, 1);
115+
// Draw the graphics buffer to screen
116+
image(bg, oX, oY, nW, nH);
117+
pop();
83118
}
84119

120+
/**
121+
* Handle window resizing
122+
* Resizes the canvas to match the new window dimensions
123+
*/
85124
function windowResized() {
86-
87-
canvasElement = createCanvas(windowWidth, windowHeight);
88-
125+
canvasElement = createCanvas(windowWidth, windowHeight);
89126
}
90127

128+
/**
129+
* Handle mouse clicks
130+
* Toggles fullscreen mode when the user clicks
131+
*/
91132
function mousePressed() {
92-
if (mouseX > 0 && mouseX < windowWidth && mouseY > 0 && mouseY < windowHeight) {
93-
let fs = fullscreen();
94-
fullscreen(!fs);
95-
}
133+
if (mouseX > 0 && mouseX < windowWidth && mouseY > 0 && mouseY < windowHeight) {
134+
let fs = fullscreen();
135+
fullscreen(!fs);
136+
}
96137
}

‎style.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
html,
2-
body {
3-
margin: 0;
4-
padding: 0;
5-
}
1+
/*
2+
* Remove default margin and padding from HTML and body elements
3+
* This ensures the canvas fills the entire window without scrollbars
4+
*/
5+
html,
6+
body {
7+
margin: 0;
8+
padding: 0;
9+
overflow: hidden; /* Prevent scrollbars */
10+
}
11+
12+

0 commit comments

Comments
 (0)