 Okay, hello My name is George Galli. I'm a media artist and but I use code sometimes But I don't know how to code. So what I thought it do is I'll do a live coding and I'll show you how I work And I have a certain kind of system that I that I use I do many like motion reactive and sound reactive and generative art But for me Code is just like Photoshop So, yeah, anyway It was working one second ago, sorry any cold glitch There we go Kevin now a huge again. Okay. I don't know. I don't know like If you guys Where I'm where I'm pitching this talk so if I'm going too fast, I've only got 20 minutes and I'm gonna try to do Yeah, oh you want to mirror it, yeah, okay, let's go Okay, cool So, yeah, I'm not a coder But I've played in codes Since I was a kid pretty much I consider myself a designer, but I've played in director and then to flash and then to process it And then to open frameworks and arrive the JavaScript, which I think is is the way to go for Media artists these days Yeah interested in geolocation physical computing blah blah blah Quickly show you some projects before I get going I I just don't judge the project for a band which Is Kind of generative sound reactive piece where we project onto the onto the band can only show you a lot Because it's under under reps But the idea was not to not to make a projection and to make like this a motor piece for the band This is another project I've been tinkering with recently which is like I saw a project in Japan where they had like these ends eating World flags and I thought it would be nice if we could like play with Google Maps in the same So I Mean that if we have internet Yeah, so the interesting the interesting thing about this was that Because of the whole cross-domain thing I have to like save save all the photo be as simple as like taking a screenshot of the canvas and And then like manipulating it But basically you have to like save all the like individual tiles like onto your own server I think I've got another version of that Anyway, you get the idea cool This is a product I did called digital zoo which are using using LED lights and like SMS kind of based on Tamagotchi and kind of taking the piss of The commodification of like animals the big fire in Africa It's a product. I've been working on for a while now, which is called the selfie project and it's basically Maybe I've got a few here, which is Pretty much manipulating images of myself In various kind of ways. Yeah Or using the same kind of code that I'm going to show you which is like this motion reactive stuff And this is a project that I did last year called internet x where we tracked tracked a whole lot of Delegates in a conference using Wi-Fi system triangulating them and Let's see if I can show you something and then Using their personal data in order to like kind of make connections With people so this is this is speed speed and movements of people and What what I did then was I used that data for the next year's invitation And you would get like a they get like a poster of your movement and that's pretty much two thousand delegates moving around And it turns out that Wi-Fi is amazing to track people you can you can you can get like 30 centimeter accuracy where you can't get that with Bluetooth and Apparently Apple's taking away the because I use like MAC addresses But apparently Apple's taking it away or they say they have but they haven't really so the MAC address is still visible and with that MAC address you can identify someone pretty well, so what I did is I I got people to like scan scan their phones and when they when they registered and I had all their personal details had they linked in I had their Facebook and I could like link up to all sorts of things and like Make connections with people So, yeah, that's pretty much some stuff. I do I work with EL wire sometimes And this is a product. I did which is most tweet which is just a most code Twitter Okay, so why JavaScript? because everyone's back and using it and and like what really like frustrated me with like the old like kind of processing or C++ stuff was that it was all I had like piles and piles and piles of live I'm stuff sitting on my hard drive and I couldn't I couldn't actually show anyone unless of the installation and The kind of like goes counter-intuitive to what's happening today Yeah, also like now you can like JavaScript snack talks to Arduino. It's pretty fast and of course There's two like really killer libraries called 3js and D3js, which are both Super amazing written by geniuses so Pretty much works media media queries pretty much work everywhere except in fucking Safari It's it's it is in the code in Safari. There's haven't turned it on so you can so I mean you can get you can get like motion and Sound record stuff in the browser pretty much in every browser except Safari go figure Apple So let's try Like I said, I'm not a coder. So I'm a little bit nervous. Let's see. So the way I set up my files is This is can you read that? Okay, I have like this generic index file that has a whole lot of libraries I've got like this main main JS file which pretty much Sets up a canvas and sets up the context in a canvas and I've got like a secret canvas that I hide on the side Which I can show you Probably the interesting stuff in this code is this thing over here Which just makes me be able to like not repeat stuff. So basically all I'm doing is like Show you here Like let's close that So what I'm able to do is just create a hash of the of the JavaScript file I want to call So let's call that and that and that will call in the JavaScript file So it means that I just have one index file and I'm just when I'm when I'm coding I'm going straight into JavaScript And everything's pretty much set up. I've got like a video file which does the generic I'm happy to share all the stuff with you, but it's yeah I'm so this just this is just the the basic media query kind of stuff And so what I what I what it means is like I don't have to think about all the shit And like straight away I can just like start coding. I also got this other file here which I kind of nicked from someone else and Made it to my own made of my own I mean, I guess that's the point of what I'm trying to say it's just like buying something it works for you and Use it so it's I've kind of taken I've kind of taken the way canvas works and I've kind of made it a little bit processing and Just made like things that are things that are difficult Like a little bit easier so I can go fast Because like said I'm not really interested in the code part. I'm interested in the stuff that I get out so Firstly what I'm going to try and do is so I've got this I've got this function draw, which is basically It's basically get animation frame with a whole lot of fancy stuff on it So what that what that means is I can I can yeah, I can go so let's First I'm going to try and make a particle system Create the particle and I'm going to pass it an X and a Y position And I'll create a particle system It has an array Sorry Can you read that? Okay So very initiating a particle we can give it a speed and we can give it a Speed X I normally like to do this kind of stuff Like I said, I'm probably in stuff wrong but he knows okay We got a top Particles Okay, and when I create a particle, I'm just gonna like push it push it into the array Because I'll do that Cool Speed why yeah, thank you. Like I said Then let's go right and then you can add them here Like I said, yeah Happy for the help. Okay So Let's just try sending here You can go Particle dirt Why I've got like a little function that causes City X Okay, city X. I mean, I don't know like city X is like context. I'm just like calling the drawing function and Full style equals red And What's it called so I called Full elapses Alright Okay, I'll get there. Thanks Particles Did right For I've got lots of areas We're gonna Okay Okay, I've got one more area Ah Okay Hopefully we'll have a particle system There we go Yes, okay, what's going on here Okay That all looks good Create Okay, so we need to like move up on the call You know X equals That's equals P dot Speed X to storm the still area somewhere. Come on guys Do you need to pie? It should have a fun But it looks I've got a function here Very lips I Finally after that's getting crazy No The speed x and speed Okay, this is good Yes So I've got like a little random function here, which kind of acts like processing or And if you want to clear the canvas ctx and I've got a Whip and a height that I that I set up before This is this is my own little library that's kind of like a mix of processing and whatever But like they're pretty much all work the same So I was to go to I was to go to a little function in my creative thing, which is called Which is called fade Call the context and I put in like a percentage and I will should give me So yay particle system in three minutes four minutes Okay, that was very stressful Okay, like so if you want to if you want to do like if you want to do like Most like like motion testing stuff Basically, you got to go through all the pixels and compare the different colors to each other of the video But you can't really do it in every pixel because Because it's gonna kill the processor So what you do is you break you break up the screen into like a number of blocks and then just and then just sample sample that block So the way we do it is we just Live through all the pixels, let's give it a Pixel size of 40 that's X That's equal Pixel size now we flying and we live through the Y also the height Ah Let's go so that should show you the grid that we're working with Yeah, hopefully Okay so there we've got there we've got a grid of like let's call it a rectangle for and Yeah, so we've got a grid Let's So we've got a grid again Now the next thing I want to do So the next thing I want to do is like get the video in there and talk to it. So I can I've got a hidden hidden hidden context, which is like sitting I can show you and You call draw image video And give it a width and a height Yeah, so there you can kind of see the video which has been drawn in so now what I'm gonna do is I'm gonna sample it So I make a sample and I go In six dots get image Data, so that gets all that gets like an array back of Of your video give it a width and give it a height and Almost there Hopefully So the way that the way that Get image data works. There's a few ways of doing it But honestly like I've tested I've tested all the different ways and they pretty much the same Like you can use like bitwise operators blah blah blah, but they pretty much that's pretty much the same speed So and this was kind of more logical or semi because I'll show you it's pretty weird So the way that some the way that Get image data works. It just brings out this like massive array and It goes like RGB a RGB a RGB a so every so it's going like in sets of four kind of thing in this massive long string I mean array so if you go like that Oh, wait, so we need to define the position Which is x plus y times width And that will just give you the the position on the screen and Because we're looking at every four. You can just multiply by four and hopefully that will give me a position and If I go Hopefully that will give us There's just no light Anyway Let's uh, I'll decrease the sample size. Maybe you can see me more So there you can kind of see that I'm there So we can do the same thing for for green and blue and Like I said, it goes it goes in an array. So you can just so it's just you just look at the next pixel and The next pixel so if you do that There we are So if I give this particle system a color See So now we just create a particle Wait, I'm missing something so motion reactive. Yeah, that's why we're here. So The way that's The simplest way to do motion reactive is just like it's just like compare like you can compare like all the colors But there's no point like red works fine. So you just compare like red Reds between the one frame and the frame before so I create like a I can create an old array here and I just equals to R and And then I just test I just test the the red value Absolute red minus all position It's greater than sensitivity. So if it's If The sensitivity if the red values are different by by more than 20 out of 255 whatever that is 10% then in theory In theory it should work in theory I would just need to give it a color here great particle See RGP Yes, no Kind of working something's going wrong Also in a particle system like if you're creating too many particles you got to like delete them after a while So I just check if the particle is less than naught What's Y value is less than naught or It's X value is greater than width. It's Y value is greater than heights and then I can just go particles dot splice, which will remove it from the Array Well, and hopefully that should kind of work. There's some I wait There's the problem but girls care bump We have a motion reactive system Let's just turn this down here. Maybe get into the light And you can see so there's a particle being created every time every time it finds a Movement and that's changed the sensitivity BAM That's it motion reactive system in 12 minutes I guess the point what I'm trying to make is like it's just like set up the system that you want don't listen to you like anyone else like Find but like fun find coded works drop it into a file That's full of functions That's the way that you normally move and then like forget about it and rather move on and do and do the cool stuff Yeah, thank you