Skip to content
This repository has been archived by the owner on Jul 5, 2022. It is now read-only.

p5.js Tutorial 10.4: Brightness Mirror - Bug? #24

Closed
SetupandDraw opened this issue Apr 2, 2016 · 4 comments
Closed

p5.js Tutorial 10.4: Brightness Mirror - Bug? #24

SetupandDraw opened this issue Apr 2, 2016 · 4 comments

Comments

@SetupandDraw
Copy link
Contributor

when copying pixels from the video to my canvas, it looks like I am copying pixels from the video at the original size, not scaled down at 320x240. Maybe a Bug? Me running latest p5.js complete - March 4 2016 release on Mac OSX 10.11.3
But not just the scale is wrong, please see the image attached.

screen shot 2016-04-02 at 21 24 57

Now, since I remeber I sow something similar in processing, I found Daniel's code of the learning processing exercises ported in p5js, give them a try and they worked perfectly, so I decided to go line by line and see what was wrong with my code.
After 1 hour of complete frustration, I decided to change the only thing left: the libraries folder itself.
And It worked! As soon as I overwrite the DOM library with the older libraries, from the learning processing exercise, all problems are fixed.

Now, this is driving me crazy. What's going on? Is there a bug on the latest libraries of p5js?

following my code that replicates the one of the tutorial.

var video;

function setup() {
  createCanvas(320, 240);
  // if you work on Hi-density display you need to add the following line
  pixelDensity(1);
  video = createCapture(VIDEO);
  video.size(320, 240);
}

function draw() {
  background(51);

  video.loadPixels();
  loadPixels();

for (var y = 0; y < height; y++){
  for (var x = 0; x < width; x++){
   var indexLoc = (x + y * width) * 4; 
   var r = video.pixels[indexLoc + 0]; // r value from the video
   var g = video.pixels[indexLoc + 1]; // g value from the video
   var b = video.pixels[indexLoc + 2]; // b value from the video
   pixels[indexLoc + 0] = r; 
   pixels[indexLoc + 1] = g;
   pixels[indexLoc + 2] = b; 
   pixels[indexLoc + 3] = 255; // alpha value 
  }
}
  updatePixels();
}
@pflannery
Copy link

I have the same issue.
After applying this fix I found in processing/p5.js#1311 its now working

@shiffman
Copy link
Member

shiffman commented Apr 3, 2016

I added the examples to the repo. Note that I am using a modified version of p5.dom.js. This is the relevant issue that needs to be fixed:

processing/p5.js#1079

I'm intrigued @pflannery that processing/p5.js#1311 may also be related.

Here's the modified p5.dom.js.

(Will leave this issue open until #1079 is resolved.)

@pflannery
Copy link

turns out I was using p5.js v0.4.19 November 11, 2015 when I used that fix. Thanks for posting the tutorial, which does work.

@shiffman
Copy link
Member

hopefully this is all resolved now in current p5.js versions!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants