Individual Review

[spooketti]

My work for our CPT Binary Project

Summary

Our project is split into 3 parts, Webcam feed in binary, Making music out of binary, and converting from ASCII and binary interchangeably.

The part I worked on was the webcam feed work.

How My Project Works Functionally

The user is first prompted to allow access to the web camera, and once it is granted the project will begin getting the camera feed and putting it into an element with the feed being completely black and white (not grayscale)

It then takes the webcam feed and checks if each pixel is black or white and makes it a literal 0 or 1 Because 0s and 1s can be compiled into text, it is then compiled into ASCII with the base of the binary (typically 2) being the radix parameter.

How My Project Works Technically

The user is prompted to click on a div which asks to call mediaDevices.getUserMedia() with the video parameter being true and audio being false Depending on if the webcam is already active / permissions are granted, the web cam will output a "stream" which will be the video feed coming out of the camera.

Once the feed loads, it will call a setInterval that runs drawImage() based on an fps variable

What the drawImage() function does is it puts the webcam feed onto a canvas HTML element, and then will run getImageData() and then each pixel in that data is iterated.

It will then get the average of the R G B values in the pixel and then set each RGB to that average. Then a logic gate of

avg = avg < 128 ? 0 : 255 

sets the average value to 0 if its less than 128 via ternary operator When every number in RGB is the same, the image becomes a shade of white / black, most evidently 0 black 255 white.

I then just set the pixel's alpha value to 255 to avoid transparency issues.

A string of 0s and 1s will append either a 0 or a 1 based on if the value is 0 or 255.

Then the binary is compiled into ASCII via String.fromCharCode() and the radix parameter changes the base.

I also contributed to adding the nav bar on everyone's projects, but nothing too special.

Key Commits

Text Feed In this commit the mapping (in base 2, the radix parameter was added later in development) for String.fromCharCode and the binary text were added.

The key code added was

 let webFeed = ctx.getImageData(0,0,canvas.width,canvas.height)
    let webFeedDat = webFeed.data
    //BWString = webFeedDat.toString()
    for(let i=0;i<webFeedDat.length;i+=4)
    {
        let avg = (webFeedDat[i] + webFeedDat[i+1] + webFeedDat[i+2])/3
        avg = avg < 128 ? 0 : 255
        let azTXT = avg < 128 ? 0 : 1
        webFeedDat[i] = avg
        webFeedDat[i+1] = avg
        webFeedDat[i+2] = avg
        webFeedDat[i+3] = 255
        BWString += azTXT

        //console.log(azTXT)
    }
    //BWString
    //console.log(webFeed)
    //ctx.drawImage(webFeed,0,0, canvas.width, canvas.height)
    ctx.putImageData(webFeed, 0, 0);
    bwEl.innerText = BWString
    let binString = BWString.match(/.{1,8}/g);
    binString = binString.join(" ")
    binString = String.fromCharCode(
        ...binString.split(' ').map(bin => parseInt(bin, 2))
      )
    //console.log(binString)
    binText.innerText = binString

Navbar This was the base design for the navbar that had the animation, images, and connections to the other sites. Once again nothing too special

<div id="SideNavModal"></div>
  <nav id="SideNav">

    <div id="SideNavBar">
      <h2 id="SideNavTitle">Text To Binary</h2>
      <img id="CreatorImg" src="deva.png">
      <h3 id="SideNavName">Deva  Sasikumar</h3>
      <p id="SideNavDescription">Converts the text from Ascii to binary</p>
      <a href="index.html">Webfeed To Binary</a>
      <br>
      <a href="Binarytomusic.html">Binary To Music</a>
    </div>

  </nav>

First Video Feed This script was the first prototype I wrote to get the feed from the web cam and putting it into the canvas element. It's also the key structure of the HTML on my page.

document.addEventListener("DOMContentLoaded", () => {
    let canvas = document.getElementById("canvasElement")
    let ctx = canvas.getContext("2d")
    let but = document.getElementById("but");
    let videoElement = document.getElementById("vid");
    let mediaDevices = navigator.mediaDevices;
    vid.muted = true;
    but.addEventListener("click", () => {

        // Accessing the user camera and video.
        mediaDevices
            .getUserMedia({
                video: true,
                audio: false, //maybe add an implementation for this? user claps and the feed changes?, could be really cool
            })
            .then((stream) => {

                // Changing the source of video to current stream.
                videoElement.srcObject = stream;
                videoElement.addEventListener("loadedmetadata", () => {
                    videoElement.play();
                });
            })
            .catch(alert);
            function drawImage(dat) {
                ctx.drawImage(dat, 0, 0, canvaselement.width, canvaselement.height);
            }
            canvasInterval = window.setInterval(() => {
                drawImage(videoElement);
            }, 1000 / fps);
    });
});