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
out0
out0_(1)
out0_(12)
out0_(14)
out0_(19)
out0_(2)
out0_(20)
out0_(21)
out0_(22)
out0_(29)
out0_(5)
out0_(7)
out1_(1)
out1_(11)
out1_(13)
out1_(14)
out1_(15)
out1_(16)
out1_(18)
out1_(19)
out1_(21)
out1_(3)
out1_(5)
out1_(7)
out2_(2)
out2_(4)
out2_(6)
out3
out4_(1)