Glitch Portait.

04 Oct 2020 - Jake Sherwood

Glitch Portrait

Glitch Portrait

Diving in to Kinectron was fun… even if I did have to do it in Windows.

Also, update from my previous Kinectron post, skeletal tracking and keying do work. I was just too close to the Kinect. #smallspacesproblems

For this week we were tasked to utilize a Kinect and the Kinectron.js lib.

Since I put in so much work to get it going last week I was happy to use the new tools I had enabled.

Building off the keying example we went through in class.

I thought it would be cool to create a similar effect but have the previous image / keys be added to an array. This would allow me to be able to manipulate them after the fact.

It creates almost a collage of images and somewhat of a glitchy effect.

With a little help from Lisa I was able to get it running without too much hair pulling.

I did have a few weird bugs that I was able to sort.

Bugs
1) My display method was tinting the images I put in the array. But I was expecting to have a non-tinted keyed image on top. Lisa helped me remember tint is a global setting so I just needed to set it back to full / normal when I was drawing the original key.

 tint(255, 255);

This did however, lead me to enjoying the tinted collage better without the non-tinted key so I later added a key press to turn that on and off

2) I was also adding another manipulation method that would draw a vertical black line every 5 pixels. This added to the glitchy effect but was only going 2/3rds down the page for some reason. Messing with the height in my for loop fixed the problem but I’m not really sure why???

 // not sure why height of 560 makes lines span canvas height.  Setting to height they stop 2/3 down - ask Lisa
     // for (let y = 0; y < height; y++) {
      for (let y = 0; y < 560; y++) {

Modes / Key Presses
As mentioned above if you press ‘k’ it will turn on and off showing the non-tinted key. A key press of ‘f’ will turn on a Threshold filter. And if you like what you see you can press ‘s’ to save a png of the canvas.

All and all I like the effect created here. Nice and simple but enjoyable to play with.

Project code here.

Here are some of my favorite screen grabs.

Screengrabs