Texture of Box in WEBGL works in Windows but crashes on Mac
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 24k
- Forks
- 3.8k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 25
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- p5.strands
- WebGL
- DevOps, Build process, Unit testing
- Internationalization (i18n)
- Friendly Errors
- Other (specify if possible)
p5.js version
1.11.13
Web browser and version
Chrome - 148.0.7778.179 (Official Build) (arm64), Safari - 18.5 (20621.2.5.11.8)
Operating system
Windows/MacOSX
Steps to reproduce this
Steps:
- Run my code snippet below
Snippet:
Code Expected Behavior: Camera image is broken up into cubes and each cube rises and falls based on the amplitude of the mp3 being played.
Behavior on Windows using EDGE: Works with minor delay but performance is good
Behavior on Windows using Chrome: Works with NO delay and performance is top notch
Behavior on MacBook using Safari: Cubes do not rise and fall at all
Behavior on MacBook using Chrome: Code works for a few seconds before crashing
// Paste your code here :)
let boxSize = 80;
let factor = 0.08;
let speed = 0.05;
let camImg;
let slicedImg;
let song;
let amp;
function preload() {
//Load audio file
song = loadSound("
[jupiter.mp3](https://github.com/user-attachments/files/28291692/jupiter.mp3)
");
}
function setup() {
createCanvas(800, 800, WEBGL);
//enable camera
camera(0, 200, height / 2 / tan(PI / 6), 0, 0, 0, 0, 1, 0);
camImg = createCapture(VIDEO);
camImg.size(width, height);
camImg.hide();
//Prep amp of song
song.play();
amp = new p5.Amplitude();
}
function draw() {
background(220);
ambientLight(100);
directionalLight(255, 0, 0, 0.25, 0.25, 0);
pointLight(0, 0, 255, -width / 2 + 100, -height / 2 + 100, 200);
for (let x = -width / 2; x < width / 2; x += boxSize) {
for (let y = -height / 2; y < height / 2; y += boxSize) {
push();
translate(x, y, 0);
depth = constrain(
noise(
x * factor + frameCount * speed,
y * factor + frameCount * speed
) * 300,
0,
1000
);
let vol = amp.getLevel();
depth *= vol * 20;
slicedImg = camImg.get(
floor(x + width / 2),
floor(y + height / 2),
boxSize,
boxSize
);
texture(slicedImg);
box(boxSize, boxSize, depth);
pop();
}
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided JavaScript sketch and the p5.js WebGL texture and box-rendering path, then reproduce it in Safari and Chrome on macOS while recording the crash details. Done means the camera-textured boxes render and animate without failing on macOS, matching the reported Windows behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100