SF Scala: Dave Briccetti, How Processing Can Be Used With Scala for Graphics
Recording: SF Scala: Dave Briccetti, How Processing Can Be Used With Scala for Graphics
[Music] this should be interesting and should be quick and I expect to be done in about 20 minutes and if at any point you feel like you've had enough of this and you want to slip away there'll be no offense taken the size of the text okay so before this evening started Alexi interviewed me on camera and so you should go and watch that rather than me talking about this but I will say that Karl Quinn and Dick wall of the Java posse turned me on to Scala about ten years ago okay so this talk is about 3d graphics with processing and processing is in their words I'll let you read that they're kind of combining programming with visual arts and you can download it from processing org and it works with Java and Python and there's a JavaScript spin-off called p5.js but if you install the product and then you go and get the jars and attach those jars to your Scala project in your IntelliJ IDEA or whatever you like then you can do what I'll be showing you I have some resources another reason that I'm going to keep it short tonight is if you're really interested in this I have a whole bunch of YouTube videos where I walk through Scala code that does this 2d and 3d graphics and animation and things so and also the code is on github so if you're really into it go get it otherwise tonight can be just an introduction and expose you to it a little bit I have a bunch of quick demos and then I want to do a group coding exercise I thought we would try to make a 3d read spiral inspired by the scholar logo and then have it rotate at the and so you know and I printed out my little cheat sheet for that and then I forgot to bring it so would truly be recreating it live I did I did do it I'm no dummy did it beforehand okay so what do I have for you let's start with a very simple program that I call draw and let's see what should i do should I put this along the left put this on the right now we're going to need that more full screen okay so here's draw very small program I'll write it and then we can briefly look at the code and it should run full screen okay and please ignore this strange beginning of it but this just takes the mouse's current position and the mouse's previous position and draws a line between the two while all the while cycling through the Hughes this uses it I don't know if you've know color models you know about RGB probably fewer people know about hue saturation and brightness the hues just go around the colors of the rainbow so what do I want to show you here here's the basic obviously this is Scala this class extends P applet which comes from the processing core package and this bit of code here turns it into a full-screen mode and this oh that's interesting because this is not really a 3d program but I by mistake I made it operate in the 3d mode here's where we turn on hue saturation brightness mode and then you notice the line set a certain thickness therefore pixels stick and then stroke here this sets the hue saturation and brightness and the hue is a function of the frame count modulo 360 which is all the way around the hues so just cycles through the hues and 256 256 those are the maximum default values for the saturation and the brightness just like you're probably used to with RGB then as I mentioned it draws a line from the previous mouse position to the current Mouse position and then we need this companion object to get processing to launch our program which is up here all right so that's one here's another one that shows a little bit more about the HSB so that's called HSB blocks and with this one I even put a little helpful message up there so the the if I press space it stops cycling through the hues and you can see if I go all the way left it gets less and less bright so the x-axis is the brightness and the y-axis is the saturation so just kind of a look at the HSB color model and this program was a little bit longer and I think I'm not gonna go through this one okay so next is brute force sphere so it randomly generates points in a in a space a cube volume and then it uses the Pythagorean theorem to find out which points fall on the surface of the sphere so I call it brute force for those obvious reasons so I started out with a circle and then I went to 3d so here's brute force sphere I hope it shows up nice here if you can see it at all is anybody seeing any stars starting to form I'm not really stars these things so you see the ones the coloring works I don't I don't remember if this is green and then blue or if it's green kind of making a gradient into blue I'm not sure if you can tell but it generates these points it's up to 700 ninety thousand points that it's generated and it calculates that about seventy one thousand of those are on the surface we're surfaces defined as some thickness and the frames per second is going to slow its down to seventeen and it's it's read surae singh and regenerating this picture for you know fourteen times a second now i think they're all drawn but the coloring actually no yeah we didn't see anything outside the sphere did we so if it's in if it's inside the spirits drawn and then the color of it is whether it's close to the surface of the sphere and somewhere in here there's ad batch of points ad batch of points points to add each frame so it adds for every frame and i think thirty frames per second is what we're looking for for every frame it has thousand more points so that's happening pretty fast it's getting pretty big pretty thick dense i guess is the word dice histogram i like this for my students who are learning about probability i teach kids in grades 3 through 12 so dice histogram and i think you many of you will see immediately what this is recognize it why do you roll a lot of sevens because there are is it six ways to make a seven how many subdivisions are in here now who can figure out what the red and the green means and why sometimes it doesn't fill the lines why sometimes it goes out above the lines this is anybody can tell yet it's so we have a simulations for using the pseudo-random number generator we also have what's expected by probability so the green is where you're getting more than would be expected by probability it's like I tell kids write a little program that simulates throwing a six-sided die and they do that then I say write a program that simulates producing the sum of throwing two six-sided dice and then you because you can imagine they generate random numbers between 2 to 12 with a uniform distribution across that which is obviously not this so then I bring this out and then it becomes clear okay particles towards center that's here let's let's come back if there's time I want to just go through these quickly I just want to see if this is the one I yeah this I read originally wrote for p5.js in JavaScript and I just converted it to Scala today for this ok so this again you'll recognize I often cycle through those hues the the way this works is a function of the mouse positions so there's the density of the particles and then there's the speed at which they travel towards the center I don't know whether you've noticed but every particle here is moving directly toward the center there's no anything else you see is an optical illusion so let me just move around a little bit here so what happens up in this corner ok the density increased the speed at which they move to the center increases what about down here and I'm pushing the spacebar to clear the screen so now to me it looks more like they're not directly moving towards the center but they're kind of you know swirling around or something so that's kind of fun and image Bush this is nice all right how many of you are colorblind and would wish to share it with the group here anybody colorblind I have a little program that would help the colorblind so what did I call it here image push image push okay if you were at the meeting a couple of months ago you saw a version of this running with a different file so never seen this okay so what if we could kind of push the green things closer to us in 3d and then rotate around so watch this there the green stuff so I took the image apart pixel by pixel and then looked at it pulled out the RG and B separately and then looked at those RG and B's to choose the Z value for positioning this in space okay I'm doing pretty well on time cube of cubes this one is surprisingly easy to do I mean you see a gradient in there and some color stuff you see rotation you notice that the individual cubes that make up the giant cube are themselves rotating the whole business is rotating on three axes I think but this is one of the shortest programs here you see look at this that's just 35 lines and the drawing all happens in here so you recognize this construct from Scala something to something by something that gives you a range so here's the range and then a for comprehension with three generators one for each of x and y and z and then translate rotate set the fill color and draw a box well actually there's some other okay there's some other code here sorry all right so it's I forgot about this part a chess board and I'm a little embarrassed to admit it took me a while to figure out just this part of it how do you know if it's a black or a white square and I was doing this with a student so it was really embarrassing because this you think this is a sort of thing you can easily find a way to choose sort of white or sort of black depending on something with the X and the y anyway that works anybody have a better and a refinement of that so that produces this so you can move it as you can rotate it a little bit with the mouse X and a lot with mass Y and so here's the rotation on X that uses the mouse Y and the range of that is from PI over 2 which is 1/4 of the way right and then it's all right PI over 2 2 pi gets you all the way around pi gets you half way around PI over 2 get you a quarter of the way around this works with radians the p5.js the JavaScript reimagining of processing has a degrees mode that some times more convenient ok so we're working our way up towards our little coding project here yeah so here we are so I want to make a red spiral inspired by the Scala logo so let's see EP FL stairs there's some pictures of the stairs there's also the Scala logo so I want to do just some sort of spiral thing and maybe we can make it out of rectangular solids that are the steps make them red and then have them kind of wind their way around a circle and then go up as we increase okay now I mentioned that I've printed out my little notes so I but I'd then and I wasn't going to commit the code to get up because I didn't want to have a spoiler for anybody who followed my links but let's see we can do it it's and we'll start off simply if we run out of time that's fine I'll run that you know like the old cooking shows I'll bringing the thing out of the oven at the end so you get to see it but I will stop how about if I stop at 8:55 so about five minutes to see if we can do okay so I want to make a new project but I want to start I don't want to have to write all this stuff here so let me start maybe with this template then I'll make a new thing here let's just call it stairs for the moment and I'm gonna throw it away when we're done and I'll just do place that with stairs everywhere okay so this should run that's what you get if you don't set the size or anything but I want some I want to go into 3d mode and I want it to be full screen so let me grab that from one of the other programs let's see this one here we go okay I'll put this here now it should be fullscreen and 3d although you won't know about the 3d yet okay they were full screen and we need to draw a stair let's start with a single step okay so to do that we need to use box if I say box say 50 here's where we'll get there's a box up in the top top left corner so what I usually do is I'll do a I'll do a transformation so there's a bunch of these I'll do a translation transformations a bunch of transformations you can do so I'll translate over to the center so there's a there's a variable called width and then I'm going to start drawing and why why is inverted so Y increases as you go down so I'm going to just say give myself some margin here and then I'm not changing anything on Z so this should put the first step centered centered horizontally up toward the top okay so maybe a little more margin and now we need to make it look more like a step so I'm gonna cheat here and see what I came up with 50 10 and 30 so this makes more than cubes it makes a I think these are called rectangular prisms right okay let's make it red so we want to do a fill well but first I'm going to turn on the HSB color mode so I need a override the setup method and in here I'm gonna use color mode HSB and I'll need to import that I don't know why IntelliJ isn't helping me with the import for that but that's in P applet no peak constants dot HSB okay now we're in HSB color mode and then I can do a fill and red if you look at a HSB I don't know if you ever see those color HSB triangle things where you start with the hue so that red is the is zero and then I'm also going to add one minute left I'm going to add this is a maximum so so the hue is zero saturation is maximum brightness is maximum so this should be red now okay so there's one step now we need to do really far more that we have time for so I'm going to jump to the oven where I have the finished work I think and so that is here spiral stairs so how long is it it is 44 lines of code what was left out well I'm I noticed that the EPFL staircase has four revolutions so that's why the four I didn't bother to say you know how big is a stair and how much turn do you have each time so here's the final result and then we'll stop with about five seconds to spare there it is now when it for a spacebar here's the fun part a nice little rotation okay so that's Scala and processing see you guys next time [Applause] [Music]