processing / processing/p5.js

Texture of Box in WEBGL works in Windows but crashes on Mac

Open
#8,831 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Core Area:WebGL Bug
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:
  1. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.