Topview Logo
  • Create viral videos with
    GPT-4o + Ads library
    Use GPT-4o to edit video empowered by Youtube & Tiktok & Facebook ads library. Turns your links or media assets into viral videos in one click.
    Try it free
    gpt video

    11.4: Brightness Mirror - p5.js Tutorial

    blog thumbnail

    11.4: Brightness Mirror - p5.js Tutorial

    In this tutorial, we will learn how to create a brightness mirror using p5.js. We will start by capturing a live video stream and then manipulate the pixel values based on their brightness to create an abstract mirror effect. The tutorial will cover concepts such as creating a video DOM element, accessing and manipulating pixel values, and rendering the manipulated pixels onto a canvas.

    Step 1: Capturing the Video and Manipulating Pixels

    To begin, we will create a video DOM element using the createCapture() function in p5.js. We will set the size of the video to 320x240 pixels. Once the video is created, we need to load its pixels using the loadPixels() function. With the video's pixels loaded, we can access the red, green, blue, and alpha values of each pixel and manipulate them.

    In this tutorial, we will convert the video to grayscale by setting the red, green, and blue values of each pixel to their average. We will also set the alpha value to 255. This will create a grayscale representation of the video where brighter pixels will have higher values.

    Step 2: Creating the Abstract Mirror Effect

    Now that we have our grayscale video, we can create the abstract mirror effect by rendering rectangles on a canvas based on the brightness values of each pixel. We will iterate through each pixel and map its brightness value to a rectangle's size. Darker pixels will have smaller rectangles, while brighter pixels will have larger rectangles.

    To achieve this effect, we need to define a variable called Vscale that represents the scale of the video compared to the canvas. We will set it to 16, making the video 1/16th the size of the canvas. We will then iterate through each pixel of the low-resolution video and draw a rectangle on the canvas at a position scaled by the Vscale value. The size of each rectangle will be determined by the mapped brightness value.

    By using rectMode(CENTER), we can ensure that the rectangles grow from their centers, adding a symmetrical and aesthetically pleasing touch to the mirror effect.

    Step 3: Reversing the Mirror effect and Finalizing the Code

    By default, the mirror effect will appear reversed horizontally. To correct this, we need to modify the code to look up pixel values from the opposite side of the video. We can achieve this by using video.width - x + 1 to access the corresponding pixel on the other side. This will create a correctly mirrored effect.

    Summary

    In this tutorial, we learned how to create a brightness mirror using p5.js. We captured a video stream, manipulated its pixel values based on brightness, and rendered the manipulated pixels onto a canvas, creating an abstract mirror effect. The code also accounted for mirroring the effect horizontally to appear correctly on the screen.

    Keywords: p5.js, brightness mirror, video capture, pixel manipulation

    FAQ

    Q: Can I use a different video source instead of the live stream? A: Yes, you can replace the createCapture() function with a different video source. You can load videos from files or use external URLs using the appropriate p5.js functions.

    Q: Can I modify the way the pixels are rendered on the canvas? A: Absolutely! The code provided is just a starting point. You can experiment with different shapes, colors, or rendering techniques to create a unique mirror effect using the pixel values.

    Q: How can I change the resolution of the mirror effect? A: You can modify the Vscale variable to change the resolution of the mirror effect. A smaller scale value will result in a higher-resolution mirror, while a larger scale value will reduce the resolution.

    One more thing

    In addition to the incredible tools mentioned above, for those looking to elevate their video creation process even further, Topview.ai stands out as a revolutionary online AI video editor.

    TopView.ai provides two powerful tools to help you make ads video in one click.

    Materials to Video: you can upload your raw footage or pictures, TopView.ai will edit video based on media you uploaded for you.

    Link to Video: you can paste an E-Commerce product link, TopView.ai will generate a video for you.

    You may also like