Processing-tutorial: Image-Rasterizer (level: beginner & intermediate)

[Music] what's up folks this is Tim and today I want to show you how to rasterize an image with processing this is the sketch we are going to build this is an image this one this is the source image and the algorithm just rasterizes this image so this is pretty much fun I think and it's a really nice way to explain why processing is interesting and how it works cool so maybe let's just start out with the explanation of what processing is and why it is interesting well processing maybe you heard of it it's in programming environment it's a software you can download on the internet it's free this is how it looks it's a code editor and it is also a dedicated well it's a programming environment with a dedicated code editor and you can write pretty amazing interactive things with it these things are called sketches instead of the processing world so everybody is if when I say sketch I mean processing application so and this is pretty amazing why is processing so amazing because it is made for artists and designers so the people behind processing in you know they just wanted to make a very accessible tool that makes it easy to create interactive visuals and interactive applications you can literally use it for any use case so if you are an architect if you are an artist or graphic designer or web developer or whatever for all of these professions processing women bring a lot of well learnings to you that are very valuable I started to work with processing because I was hooked by the versatility and the you know the convenience of writing code and processing really makes it dressing and playful and and creative to to work with program cool every single sketch in processing consists of two very fundamental functions and these functions are called set up and draw right set up and draw the setup function this is how we just use it in processing is the place where you put all the informations about the document it's like you know when you have worked with InDesign before it is like the new document dialog where it asks you for a size and you know what kind of document it should be for the web or of a print or whatever so this is the place where we put all these informations later on we will add more informations to the setup function but for now it's just important to you that we can define the size of the sketch here let's say 500 times 500 pixels all right cool so the second part of each processing application is void draw draw is the place in every single processing sketch which defines what shall happen over time so this defines what kind of animation should be drawn on this sketchy window so let's start out by drawing a white background the 255 represents white why well the range between zero which defines which represents black and 255 is you know the range of gray shades we have in processing to draw something in grayscale so now I write a function called Phil Phil says everything that follows shall be shall have a specific color in this case I would say black so Phil everything black that follows up so and then I say something like no stroke which says that I don't want to have a stroke I use the ellipse function to draw an ellipse onto the screen and this is some position I define mouse X and mouse Y that means draw the ellipse at tip Mouse position so cool now let's say the ellipse should be 60 times sixty pixels that should be the size of your lips and let's run the sketch by the way and just using the this this button here to run sketch it appears only wrong display that's aware I have to put it over here so now I have a sketch where a circle follows the mouse alright that's fantastic there's another function I want to show you here it's called random and random generates a random number so let's say random number inside of a specific range so if you say random zero comma with and here 0 comma height which are both predefined variables in processing that's maybe just scare the window a bit to see everything then we will have an ellipse at random positions on our sketch window right so if I run the sketch now again it will appear here on the wrong screen let's say maybe I can adjust this in the in the settings I'm pretty sure that's possible today yes I think that's possible all right again let's start a sketch there we go cool that's the wrong sketch this is the right sketch there we go so now we've got a ellipse that appears on the sketch window and the thing is that the draw function as I told you this is the place which the where we define what shall happen over time so the draw function is executed 30 times per second right this is like an you know it has a frame rate so we can define the frame rate in in the setup to tell it which speed it should have so the frame rate one for example would execute only once per per second so now every second an ellipse is generated I could also say that it should be 10 so now you know every second 10 times a new circle would be generated on the screen yeah so that's how random works random is a powerful function to you know create a narrative visuals by the way okay so let's move on here and go to the next thing let's go to images let's talk about images so first of all we should talk about variables what is a variable well the processing sketch has something like in memory it can memorize things if we tell it that for example if we tell a sketch that Tim that's me is 34 years old then we can define that in a variable right so we could say int which says integer is a you know it's a full number without a comma without a floating-point value in age is equal to 34 so now processing would know that my age of 34 which we could use my age now here for example to define the size of the ellipse would which doesn't make any sense but you know that's how variables work right so the sketch knows that H is equal to 34 we also could say something like string which says which represents a text let's call it text string text 2 equals 2 hey Internet so now processing knows that there is a text called text right that said that is hey Internet we could use the sex now but we won't because this is not about text and typography which is a huge topic a very interesting topic but for now we will skip that and go over to a more complex variable that called P image which is say stands for processing image because we are going to rasterize an image as I already told you right so we could say something like image equal to load image parenthesis so here we could define the name of an image file well processing sketches can have data can have font files and image files that they just you know that they have access to and all you have to do to do this to make these files accessible to the processing application is choosing an image dragging it over the editor and dropping it so now it is inside of the processing sketch well you did you have no visual feedback here and you don't see that something happened but something happened let me show you what so if you go to sketch and then you go to show sketch directory you will see that there is this is the sketch um followed by the way I just saved this to my desktop otherwise probably I will just you know mess this up let's call it truth cool okay so again let's go to show sketch directory and here we've got the sketch directly right and there's a taught bunt taught dock PDE which is a processing sketch file and there is a data folder and the data folder is where processing stores the image file which we now can use throughout this sketch we have now access to these files inside of the inside of the data folder right okay cool so the name of the image is Venus dot JPEG and now through the image function right we load the image into our sketch we you know we now have access to this image we can certain now say image parenthesis and image is a function to draw an image to the sketch window and could say something like well which image should it draw well the image is defined through the variable IMG right so this is the variable where the image is stored in so we can to say that the image function should draw the image called IMG and let's say we want to move it with the mouse alright let's run a sketch and see what happens so it's pretty large right the image is super large at the moment so that's because processing just loads the image in its whole resolution what we can do now is we can say image dot resize in this setup function something like well let's say 50 and 50 so now we have a very tiny image here as you can see right so we can yeah well now this image is placed with the mouse position well you know that's not a Internet well that could be interesting by the way here's something cool just you know just a fun fact if you just uncomment the background function then you can draw with the image can you see that that's an interesting effect why is that happening well because processing is not clearing what has been drawn onto this onto the sketch window before so if you don't tell it to clear the window by saying paint the background white again every time it goes through the draw loop every frame right then it won't do that and we will have this effect but that's just a side note here you can play with this later on if you like alright cool so we don't we don't want to draw an image because we don't want to draw this image we want to analyze the image get the pixel data out of it and then draw ellipses on a grid that represent the the brightness values right so the brighter value is in the image the smaller the black ellipse gets that's what we want to do okay these are quite a few steps but let's try to get through it through them cool why don't we get well I think it makes sense to get back to the ellipse example from a few minutes ago so let's say ellipse random with so that means draw an ellipse so that we tell person to draw an ellipse at this position so random with and random height so at any x position at any Y position of the sketch and the size of the ellipse should be let's say 30 all right again sketch is running you know it's drawing 10 times the frame 10 times the second it's drawing an ellipse on the screen by the way the standard frame rate is 30 so if I just delete that it will draw 30 times a second right cool what if we want to say do this 10 times 100 times thousand times ten thousand times and this is where the magic of generative design comes into the play because here we can create the systems that don't you know we just have to write instructions but we can tell processing to execute something very very often as often as we want as often as our computer can manage it because some some at some amount it will just lose performance but well how can we how can we do that by saying for int I equals 0 don't get overwhelmed relax relax it's I'm not going to write something that you won't understand it will be overwhelming a bit at first but believe me this is going to be very very convenient later on ok so you don't have to worry about that well now just follow me so umm is smaller than let's say 10 I plus plus this what I wrote here says that the ellipse here should be drawn 10 times every single frame every time the draw loop is executed so the frame rate is think about that 30 it's the standard frame rate of processing 30 so the ellipse will be drawn 10 times every frame 30 times a second let's see how that actually looks in real bam confetti rain cool so let's change that to 100 and see what happens now as you can see it's getting more dense right it's getting more density so they had more ellipses drawn onto the more circles drawn to this sketch window so 1000 will probably well fill the whole area and we don't just have these little spots that are white so in ten thousand we'll probably yeah it would be only black that's how for loops work a for loop is a way to say that something should be executed more than once so everything you have to all you have to care about here is not really that's not really interesting I think I will go through it and explain you what it means because it defines basically how the for loop should behave but all you have to care about at the moment is this number because this number defines which amount of how often we want to go through the loop all right what if we would like to draw ellipses in a row okay so next to each other that's no problem we can do that easily let's say the Y position and by the way let me quickly just show you this so this is x and y you know these are the two positions the first parameter defines the x position of the ellipse the second parameter defines the Y position of the ellipse that's how the ellipse function works so what if we want where for we don't want to draw these ellipses in a row well that's not super hot let's say the Y position should be height divided by two which means that it will be positioned at the middle of the sketch makes sense right height divided by two is the middle of the sketch and the x position now it's got it it gets interesting is i and if we do that just draw 100 ellipses instead because that will would show us what what what's going on here so you know there's these are ellipses one other ellipses on top of each other why well because you know the I this is the most interesting part if you want to work with Forrester I is very good that goes that goes from 0 to 100 the first iteration of the for loop it is 0 the second iteration of the for loop the second time you know every iteration this code will be executed the second one it will be 1 the third one it will be 2 the fourth one it would be 4 3 the fifth one over before it is difficult because it's always minus 1 but you know the variable I just adds up every iteration so until it reaches 100 and then the follow-up is done right so this will execute until I is larger than 100 or equal to 100 we also could say something like I plus equal to that will say would say that we would add 2 to I every iteration of the for loop that means we would iterate through this for loop 50 times right so okay this is pretty difficult and a bit mathy I don't want to overwhelm you with that stuff so I just want to have fun I want you to enjoy what you do here is because this is really enjoyable trust me yeah so how do you get rid of that problem that these ellipses are just on top of each other well we could say something like I times 10 for example so this step from one ellipse to the other would be 10 or we could say something like I times let's say 50 right so now you can see that the ellipses are next to each other right one ellipse next ellipse next ellipse so that's a follow right we tell processing to do something 100 times you couldn't can see all these ellipses because because they are just out of the order of the sketch window but basically it is drawing 100 ellipses in a row cool so to make this a little bit more understandable maybe I have to explain why did I call this variable I because that's a convention you know that's just how people call variables in loops I would rename it to X because we are with this variable we are only manipulating the x axis so if I just changed the name of the variable X's will still work well what if we would like to say that we don't want to have ellipses only on the x axis but also on the y axis of the sketch window so then we would have a grid of ellipses right how to draw a grid well maybe you already guess it but to draw a grid in processing we need to nest the loop that means we need to add one more loop into the other this won't work because we cannot define the variable X twice so I would propose to call this variable Y hmm makes sense right now we have a for loop that draws 10000 ellipses maybe we should reduce this to ten because that makes more sense so now it draws 100 lips is ten times ten because every time this four loop is running we do the other four loop the nested for loop ten times so we are drawing 100 ellipses right so how would that look like well we cannot see anything why because the ellipses are just stacked on top of each other that means here are now 10 lips is on top of each other and we cannot see them and they are not moving they are not you know they are not they have no offset or something so what we could do we could say the ellipse Y position should be Y times 50 for example let's see how that looks Sarah can you see that we've got a proper grid here and by the way this is a coincidence that it just fits because 50 no and let's think about that well the size of the sketch is 500 and we are going through it we are just offsetting the ellipses by 50 so that it sums up to 500 so it just fits into the grid or into the size of this sketch window that's a nice coincidence cool we've got a great here so anyway that's what we wanted right we wanted to scan an image and go through it well draw a grid of octave on top of the image and scan the pixels to learn which color value these pixels have and convert them into brightness values that control the size of the ellipses that's one step too far first I would like to set the loop no set set up the grid and make it more dynamic whatever if I wanted to say that I would like to change the number of grid tiles so cells or tiles or however I would call these things for tiles from now everything everything of item in the grid is a tile right what if we would like to define that they should be dynamic well we could do so by saying something like this float tiles equal to Mouse X for example right but Mouse X you know is a value between 0 and 500 and 500 would be pretty much and this would slow down our sketch and probably maybe it would just break let's say multics divided by 10 so now of course so yes you know I just Schiffman always says something like here's the thing so I I wanted to say here this thing but I don't want to copy shipment because I read respect him and his video so much and I don't want to say here's here's the thing I should try to avoid that but here's the thing we've got now a variable called tiles and it defines how many tiles should be on the grid and the thing is that I can replace the number 10 with the tiles variable which is no dynamic which defines how many tiles should be drawn so now if I move the mouse on the screen I can you can see I'm just you know changing the amount of tiles drawn onto the sketch window great alrighty if I would like to have the tiles distributed on the sketch window how to do that well that's super easy float tile size that's how I just simply called the variable is equal to tiles divided by no sorry with divided by tiles and now we can say that the that we want to multiply x and y each iteration by tile size and look at this what happens now tada can you see that we've got a proper grid well it's a bit annoying that the grid is not starting at right position because you know as you can see it is just like offset it a bit to the left that's because we could fix that quickly by using the translate function parenthesis parenthesis parenthesis and then tile size divided by 2 tile size divided by 2 we're just shifting the whole grid a little bit to the right so now it will be appropriate into the inside of the sketch window nice can you see that great isn't it cool umm fantastic so that was from my perspective that was the most difficult part because it's really it's a lot of math and it's a lot of thinking and logic but if you understand a loop and if you understand the good ones this is going to repeat over and over and over and over again and every single processing sketch though these are essential you know this is essential now how you can use in any programming language loops are everywhere every programming language has loops in there all right so now we should start to to work with the image - yeah - scan the image the brightness values of the image so now we are going to pick the color of the image so we what just want to have want to know which Brian as well.you or how dark this gray is in this position so that we can decide how large the ellipse should be in the end and by the way let me quickly show you this again so as you can see the ellipses generated through the brightness and darkness values of the image so that's how this effect comes to life cool so what we have to do we have to pick out the color out of the image at the appropriate position right and convert it into a brightness value which we later on convert it into a size we are very close now we are very very close to the end of tutorial and I'm just you know we are just three steps away from that so the next thing we have to do again we have to pick out the color that's what we do by using the color variable type I call it C and I will use the IMG parable which is the image but again right here is the place where we just said that IMG should be the Venus dot JPEG image and we use the get function to get a specific pixel out of the or a specific color out of the image and now I put an X and then Y in here and now it gets the pixel from x and y this won't work because now we are going you know we are not really going through the image at the moment we are going through the grid which has a specific amount of tiles so to get the right pixel and not just one from the top-left corner we have to multiply x times tile size and this is a bit confusing but this is going to return a floating point value but when we want to get a pixel from an array I know this sounds like magic for you this is very overwhelming but you know you will see what happens when I'm just finished putting that code together here so I just have to use the ended function to convert a floating point value back to a to an integer x tile sighs okay so have no fear no worries this is going to be very simple in the end and so this line of code here picks the right pixel from the image right it picks the color from the image at a specific position now the thing is the color is always an RGB value but we want to have a 1 grayscale value that we can that we can convert into the size of the circles so what we have to do now is creating a floating point value let's call it B no let's call it size equal to brightness which is a function that converts a color into a brightness value and there we go that should be it there's still one back in there and we won't see anything now because everything would be black there's something not really working ah okay well it was the fact that the size was too big too large well the thing is the brand's function returns a value between 0 and 255 we have to do now we have to map the range between 0 and 255 to a new range with is between 0 which says the size of the ellipse should be 0 when the color is white to let's say 20 and we can do so by using the map function surprise so map brightness see this is the value which one we want to convert and it starts this is the Souris value range it is from 0 to 255 we want to map it to a range from 0 to 20 right here we go now we can use the variable size to there's something wrong man there's something wrong let me think about that he is still a buck in the in the code as you can remember in the beginning of the tutorial I was playing around with the image and it was infinity times 50 pixels right can you remember when I just scaled it down to show how to scale an image the values were still set to 5 50 and 50 but I need the image to be 500 times 500 to wrap over the whole sketch window so if I run the sketch now come on what's wrong sinter there maybe I'm missing a semicolon okay I needed a bit to find out what's wrong here but it is like you know it's just yelling at me and telling me that you know this is by the way this is the D power you will spend a lot of time fixing these errors that's what programming is about and it's it's telling me that there's a syntax error that means there's something that is wrong with my syntax and syntax is the way how you write your code it says maybe a missing semicolon but it can't I can see a new anyplace where just this is the semicolon where I just forget forgot that so what I always do then is to put the size function on top of setup that is important to know that the size function is mostly it should be the first function that is run from set up otherwise it can drop some ugly errors and now tada you can see I am just getting the rasterizer effect here great right cool so what's wrong here the image is inverted can you see that it's inverted it's not really how I just wanted to have it I wanted to have it well now the bride well values gear are black and dark values are dark no that's it's just inverted so what I can do here is just saying 20 just reversing these values here instead of the map function to the the last two values rate so I just reverse D values and now if only function I get what I expected here is the visual I wanted to have right so isn't it nice what I can now do some fine-tuning putting the tile size variable in here and now I get a proper scaling of these circles they will never overlap because the maximum size of each tile is the tile size right the defined variable so they will never overlap so basically that's it that's the end of this tutorial but I just want to point out here that processing is able to save any file form and you can imagine so you can export gif animations you can export movies in any resolution in any size you can export images you know SVG graphics PDF files obj data you know 3d objects anything so that's what makes processing so super powerful thank you so much for watching and all the best for you enjoy have a nice day and bye bye

Channel: tim rodenbröker creative coding

Views: 48,958

Rating: 4.9934855 out of 5

Keywords: creativecoding, processing, generative, generativedesign, creativeappsnet, programming, java, rasterization

Id: XO8u0Y75FRk

Length: 34min 38sec (2078 seconds)

Published: Thu Dec 05 2019