10.4: Brightness Mirror – p5.js Tutorial

[ad_1]
This video looks at how to create an abstract mirror in a p5.js canvas based on the brightness values of the pixels from a live video feed.

p5.js code:

Contact:

Next video:

Learn JavaScript basics:

Learn HTML / CSS basics:

Working with Data / APIs:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

28 responses to “10.4: Brightness Mirror – p5.js Tutorial”

  1. Ankit Prasad Avatar

    Hi I am getting a very lagging video output in this code and the video canvas size is mysteriously zooming at a small portion of my video feed

  2. Alex Waese-Perlman Avatar

    Use http://gpu.rocks/ with the video.pixels array as an input. I use it all the time with drawing perlin noise arrays that I generated with c++ in node.js and electron. It can generate 1000×1000 in about 100 ms

  3. Damilola Olagundoye Avatar

    pixelDensity not working for me

  4. RedsBoneStuff Avatar

    0:00 It's interesting how the video quality goes really low when that thing is on screen, even if you watch in HD. The thing is, it's not possible to compress random information so it takes up most of the bandwidth and there's not much left to encode other things.

  5. Tom Marx Avatar

    Best coding channel i have ever seen on YT !

  6. Shrek T Avatar

    jokes on you, i have annotations always turned off

  7. Opel Chowdhury Avatar

    I had an around 14 minutes great time. Thanks

  8. Lamina Vectir Avatar

    How to set volume of video
    Plzz help!

  9. Jan-Stefan Janetzky Avatar

    throw it into a webgl context and throw some glsl love at it and you have high performance pixel work at fullscreen resolution

  10. Matthew Seymour Avatar

    Love these videos. Also noticed the low quality at the start guessing its a perfect example of this phenomena https://www.youtube.com/watch?v=r6Rp-uo6HmI

  11. JoshyRobot Avatar

    If all you wanted was the basic brightness mirror, a better way to do this would be to make the canvas the same drawing size as the video but scale the canvas up visually. So each position points to the same place in both images, but the canvas gets displayed much larger.

  12. Patrick Abraham Avatar

    Hey Daniel

    It's an older video I know, but could you explain why the capture is lagging and not the output in the first part of the video.
    I could easily accept that the output would lag, since it's behind a double for loop, but that the actual capture is lagging, while the output runs smooth, is somewhat I didn't expect to happen.

  13. TheIBDH Avatar

    i was waiting for the kiss 😀

  14. CoffeeCatRailway Avatar

    it gets the pixels from the video. but when it puts them on the canvas it stuffs up what can i do?

  15. Edu Canedo Avatar

    I am getting major performance issue. The console states that the main thread is busy. I don't know if it's my machine or something else that I missed. I am getting the following message: "Handling of 'wheel' input event was delayed for 8459 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive"

  16. ertyxtras Avatar

    It's like half toning.

  17. Acidic Avatar

    0:24 It asks to use my camera, I click ok and my light is on, but there is no box showing what my camera sees for some reason, there is only the canvas.

  18. Nahuel José Avatar

    I can't stop watching your videos! you make it seem so simple… I followed your tutorials and made my own modified versions. really interesting stuff! thank you!

  19. TheUnrealMegashark Avatar

    Hey, just wanted to say thanks for all the videos and content! You are really enthusiastic and have such a great attitude and style, keep it up man!

  20. gnamp Avatar

    This is my current favourite channel.

  21. oolong32 Avatar

    It looks like the formula to flip the image around 13:15 should be
    ( video.width – ( x + 1 ) + y * video.width ) * 4
    or
    ( video.width – x – 1 + y * video.width ) * 4
    otherwise the rightmost video-pixel gets displayed at the left side of the canvas.

  22. Patt Vira Avatar

    Hi Dan, the video did not show up when I ran it in the browser (localhost), but it worked fine on the p5.js editor. I have the p5.dom.js library running, and I didn't see any error messages. Do you know what could be the issue?

    Also, thank you so much for your videos! The topics are interesting and easy to follow, and your energy is amazing. Really enjoy them so far!

  23. David Leonard Avatar

    Dan another amazing series. off topic what software do you use to caption the videos?

  24. Nicole Karolczyk Avatar

    the video is super laggy when I run it. Any ideas why? 🙁

  25. Robert Brooks Avatar

    Have been trying to logon to https://p5js.org/ and just get a connecting notice but never comes up. I was trying to use the Reference section. No problem with https://processing.org/, comes up fast. What is going on?

  26. Minhaj Khan Avatar

    I love the energy you have! You're always so excited and cheerful and that makes me all excited too!! 😀 so thanks a lot for these

Leave a Reply

Your email address will not be published. Required fields are marked *