Creative Coding with Codecademy #1: Intro to p5.js

hello all right hello everyone cool i think we're uh i think we're good to to get started awesome so let me actually stop sharing um do we know how many people are in um yeah we've got a few we've got a few people watching we've got the chat open um hello uh manga in the chat well awesome um so welcome to our first series of live stream for creative coding um just maybe we'll do a little bit of a brief instructions um my name is jiwan i'm a curriculum developer at co academy and um we're going to be so i was part of the team that developed the learn p5 course that we're going to be going through today and also for the rest of the seven weeks that will follow for the live series for creative coding and um alex if you wanna cool yeah so i'm alex uh you might have seen me on some of these other live streams that we're doing uh i had no part in building the the p5 course although i love p5 we'll talk about it a little bit more but i think it's a really really awesome tool to both make really interesting creative um coding projects and also a really great tool if you're brand new to coding to kind of like learn the fundamentals so uh yeah i'm super excited to have juwon here g1 is awesome uh it's made some like really incredibly creative projects so uh yeah and we're gonna we're gonna have jihuan for um eight weeks uh going through different projects cool let me share my screen again and um we're going to start talking a little bit about what we're going to be talking about for during today's session and also for the sessions to come on our creative coding live series before we go any further i'm gonna maybe talk about what creative coding is um it might be a new concept to some of you who are more familiar with more standard programming and standard coding um basically what creative coding is is for me i mean everyone's going to give you a different definition of what it is but for me what it is is it's a different approach to programming you're going to be using your programming skills to create different kinds of things but essentially the goal here is for you to express yourselves with code and for you to not necessarily think about what it is that you're going to be building what what kind of like use do you have to have with your program we're going to leave that aside and leave our you know the practical things that we want to get done with our programs aside and really think about what can i use um how can i use programming to create a little piece of art or to create something that will really be you know advocating what i have to share with the world what kind of messages that i have that i want to embody in my works of art and to go over to maybe share with you guys some examples of what you can do with creative coding or kind of like example it works that would be classified as creative coding works here where i'm at the learn p5.js course website on codecademy and within the first module called uh welcome to e5js which by the way i should say that the course itself is free uh so it's not a pro course so anyone who comes to the platform and look for the learn p5 course should be able to access all the contents in here uh most of the content is in here and so i'm going to go ahead and open this uh welcome article and then we walk you through the journey of figuring out what creative coding is from the beginning some of the definitions of the distinctions between programming itself and what i mean by creative coding um is in here and there are also some examples of different kind of creating coding projects to help you get excited about the potentials of different works you can make so we can you can think about making generate generated visualizations all this muslin to degenerative art wikipedia page but um you can also you create them using different shapes wow all right and then you can is that made just with p5 um i believe this is um with processing.js so it's in javascript and we can talk a little bit about processing but um they are similar and this is ben fry's work on generated visualizations with text and some other things you can make you can also think about making data visualizations this particular one is a visualization this does not um created using p5 but this is a map of all the trees in new york city and is color coded and you can also filter them by different species like if you want to treat it that tree data set is such a classic one i know we use that in a couple of different places on codecademy yeah this one's great and this also uses i think it's um created using mapbox which is also like a free map api if people are interested in doing map visualizations i can also think about creating um immersive experiences for example this particular one is created by colin levin who is a pretty big name in computer vision and creating this sort of like augmented vision works so just to play it a little bit so they're like pretty subtle um alterations i would say to the feed at the live feed that you're getting and people can interact with them and this is all part of this is all done program um with programs not necessarily p5 but it is a good example of what you can do in the realm of creative programming and also you can create interactive films like this particular one enter the monument um all of these examples are linked there in the welcome article so for you to go ahead and experience them on in your own um computers and devices and so on um maybe to share a couple of my own personal work that might be a little bit more closer to the things that you could make through um with all the material that you learned from the learn p5.js course this particular one was called around us and this was a data visualization of satellite data this is a live website link in here i hope it works well cool this one is built in combination with another visualization library called 3js and also with p5.js so it uses both libraries in here and you can get through the world map which shows the number of satellites per country and also this particular one shows a timeline of how many satellites that have been launched starting from 1974 and then these ones if you go to this side you'll be able to click on the or hover over these little bowls that come up here as like the satellites and then these also cards were also generated um and created um using a data set of images and so on so yeah that's an example of the thing that you could do um maybe another one that i will show is this one this one is uh my work the kind of work that i did with um computer vision technology it actually uses a thing called processing not p5 but basically what i did was i um analyzed the patterns of pigeon movement across from i don't live here anymore but my um the apartment i used to live um had a lot of um pigeon interest i'd say and i'm personally um very afraid of birds in general especially pigeons and this kind of like intrigued my um i don't know interest in like maybe i will learn to appreciate them a little bit more if i will yeah that's the way to get over it just totally immerse yourself in in pigeons yeah and it makes them it makes their movement look pretty you know the way the different ways that i've um try to visualize their movements i think yeah one of the things that i love about um creative coding and i can talk a little bit about my background is i used to teach high school computer science to you know high school students that had never done any coding before and i really kind of exclusively used p5.js the the library that we're going to be looking at during this series to teach them coding fundamentals and i found that um you know my students were so much more motivated to make something that they were like creating themselves and interested in themselves rather than like make a you know uh tax calculator or something like that where there's kind of a set of like problems that you might see a lot in a computer science class and giving folks access to something and saying just like make something that you want to make where i had kids making pac-man and i had students making um you know generative art like you were showing and so even if you think that creative coding might not be your thing i really encourage um you to give it a shot in that i do think that it will really help your programming skills at large where you're going to be diving into like you're going to be problem solving the entire time you're trying you're trying to do these problems which is really the best thing that you can do to learn programming um so yeah i hope that the reason that i love p5 so much is because it encourages people to problem solve and so i hope that you'll if you're watching this you give this a genuine effort of like try to make something interesting and cool with um with p5 because i think it will help your not only will you make something cool but you will make uh it will help your um kind of more traditional programming skills become uh stronger yeah so um p5.js will definitely it's so okay to backtrack a little bit p5.js is an open source javascript library so it is it is the whole thing is in javascript and it is intended for it to be used within the web space web space it isn't like a if people are familiar with what's called processing basically p5.js was developed sort of within the same space um the person who first started the efforts of creating beef buyers the library laura mccarthy she really took inspiration from what's called processing which is a java based coding environment and also a java library so processing let's go here so this is a thing of its own but really if you know processing you will also be really familiar with all the concepts that we'll be using in p5.js it's really a matter of which language that you're using to create um visualizations um or to do anything visual and to also echo what alex said really p5.js is useful for anyone who is new to programming because you get that immediate feedback we'll hopefully be able to see um more of this as we go along through these live series and also today but basically all the programs that you create you're going to immediate visual feedback for what it does so it really helps you to hone in in your you know programming skills your you know um your ability to create logical algorithms and that kind of things and later on towards the end of the series i think alex will also introduce object oriented programming which in my opinion is a really difficult concept to grasp if you don't see what each of the objects look like and really p5 puts those like concepts in its shape and form and color so that you can see the visual of in visually the objects that you're creating with your code yeah i'm going to run a session on object oriented programming and then also one on machine learning um algorithm which again it's like that's kind of intense uh like this this is an algorithm that i learned you know in my college courses i didn't see it at all in high school or when i was becoming when i was a beginner but i think that p5 makes it really accessible just because you can kind of visualize what's happening you can step through and walk through what's happening um so yeah a really cool tool um juwan we have a couple of questions in the chat but i think we should get started with the project and i'll uh i'll hold these hold on to these um and maybe ask you as we get towards the end of this session yeah okay cool so going back to our learn p5.js course on our website so um if you i have some progress in here because i've been checking things on and off um but basically we've got about we've got six modules in here for you and there are six lessons and we're going to be going through um each of these lessons so introduction to creative program coding and also the animation module interaction module and media module during the course of the series um the live series and then we'll also be covering some other additional topics that go beyond the things that we talk about in this course for the second half of the series um i also before we go dive in here i do want to um put in a little bit of a plug for our week three live session yeah we're going to have a guest coming into our live series cassie tarquesian who will be talking to us about the p5.js um she's more involved in the actual development of the library as well as the open source community so we're going to talk about open source community what it means for code to be open source and for people to use in general about the community itself as well as what's called there's also a tool that p5.js has created and for you to get started working with p5.js called p5 web editor it looks like this and it gives you an environment where you can code p5.js projects and you can see it right on the right side how it renders uh on the webpage and it will be she she's also the main person that's driving this development um of b5.js p5.js web editor so we're going to have her coming in um it's like a special treat to talk about all of those things so i do want to i didn't want to promote it a little bit that's the session on the uh on march 23rd yeah cool so let's do move on and for today's live stream i do want to go through this particular project called wall drawing which is part of our first module well this is the first module really this is the second module is the one with the our act the actual content on b5.js so this project will go through the fundamental concepts of what pro p5.js is what is programming what is canvas and we're going to be basically be looking at how to to create patterns with um javascript um on what's called the canvas so i'm actually going to show you what our final output is which is going to be this we're going to draw from a clean slate of like a blank canvas so to speak um literally and actually uh we're going to start from a blank canvas and we're going to be creating these drawing these patterns into each of the quadrants of the canvas cool let me actually um revert everything go from scratch and i'm going to go through the prompt with you guys also what we're going to be doing is we're going to be creating a drawing based on the artist's solute if you're not familiar with who solute is he there's a wikipedia article linked there for you to check out but basically he is one of the main drivers who are um known for it what's called algorithmic drawing so he provides a set of instructions that uh it he leaves um open for anyone who is following the instructions to draw a copy of his drawings so basically we're kind of creating an um a digital painting that embodies his sort of um thoughts where we give a set of instructions through code to our p5.js sketch and we have that generate this um drawing for us so if we click start and then we get um we scroll down we start seeing these um set of instructions that we can uh we can read and try to follow along to create that um what's it called the uh four sets of patterns that i've shown you um before so we're gonna do here is okay let's um as we go through this i'm going to explain some of the key concepts of p5.js um so basically on the right you will see the default uh structure of a p5j sketch so p5 sketch is like any other web-based projects it has a index.html that contains the actual contents it's got style.css that you can use to style any components on the under html and there for you using css um code and it's also got what's called sketch.as which is a conventional name that we just have for a javascript file and all the sketch.js file and the css file gets linked inside of index.html file um same as how you will link any other thing any other html oh sorry any other css or javascript file within the um index.html so we've got the script tag in here that links the sketch.js file as the source um attribute inside of our body tag we've also got the style the style sheet linked as a link tag inside of the head section of html so sketch.js is really where all of the magic is going to happen this is what where we're going to be programming and the first thing that we're going to do is actually let's do this take a moment and completely empty okay so it's just asking us to check that all of those files are in there so let's go ahead and click that and so so to be uh so i guess thinking about that final product that we saw with the boxes and the the different patterns in each box really what we're looking at there is a normal web page and most web pages have a lot of html a lot of css and really what we're doing here is that the html and the css are pretty basic and basically we're just saying the only thing on our web page is going to be this p5 canvas where we can do different drawings and all of that drawing is going to happen inside the javascript file exactly so in p5.js there are two functions there that are fundamental to how the program runs and how it generates visualizations we've got a function that's called setup and i'm going to close my brackets after all the tutors in here and we've got another function called draw function draw so these functions even though we're defining them inside of rp5 instead of our sketch.js file really these functions automatically run so you don't actually have to call these functions explicitly like for example if you're familiar with javascript you know if you do setup like this associate that um how you call this actual function like that all the code that is scripted inside of that function you don't it's actually you should not be doing this it's not that you don't have to but really you should not be doing it because the p5.js library will automatically call these functions the setup function runs at the beginning at the very beginning when you when the website is first loaded the setup function runs once and so this is where we set all of these initial stylings for example creating canvas which we'll talk about in a bit but creating canvas is one of the things that you would want to do but all the initial styles that you want to do for your drawing they all go inside of the setup function the draw function runs repeatedly in an infinite group and it runs after the setup function is finished running so what that means is that first the setup function will run when the website when this web page runs the setup function runs and it sets up these initial things that you need to you want your sketch to do and and after that point the draw function everything all the code that you contain inside the draw function will run in an infinite loop over and over again so we're going to talk about endocrine animations in our next stream series but basically the draw function is where we're going to be the the basic structure of the draw function the fact that it runs an infinite loop is really convenient if you want to create animations right because animation is really um some like series of images static images that change over time and since the draw function runs in an infinite loop anyway we can do little things in there to change values gradually with time to create animations but for now we're going to do all of our drawings inside of the draw function but they're not going to be changing they're going to be static for the this particular session of the live series so how does so we have this setup function we have this draw function and like you were saying they're a bit unusual because they're automatically being called by p5 how does all we're doing is writing a website here so like how does how does our website know to use these special p5 rules of like hey automatically set up automatically call draw in this loop that's happening uh over and over again um like why what is special about our website that like activates these p5 abilities this script line is actually the um the thing that we'll know that will tell our website to know to do those things so that's actually a really good question so p5.js is a javascript library that means it's a collection of code javascript code that is um created for us by you know a number of different kinds of developers but um they they have used um vanilla what's called manila javascript or pure javascript to basically make our lives easier for us to be able to say function setup and function draw for us to be able to create these things in the web page so what it does is so let's go from the index.html file it goes from the top and it loads this javascript file which is linked inside of this script tag as the source so it's got this what's called a cdn link which you can find if you go to the p5.js website and if you go if you go to get started we'll not get started sorry um download and you can either get an actual file of the javascript library the p5.js library itself or you can click on this link called cdn and this is basically where the library is hosted in the cloud for you so you can put copy this link and put it inside as a source file in the script tag and first this library is loaded then our sketch.js file runs so by the time our code inside.sketch.js is running um the all of the relevant instructions or all you know the people our website will know oh when when we have a javascript file that has a definition of function called setup and has a definition for a function called draw then p5.js library will automatically run that instance of setup function that we're defining locally within our web page and then run the draw function i think it's always a little bit interesting can we can you go to the the url from the that's yeah the that or the um yeah i think it's always a little bit interesting to see what this actually looks like where you'll see okay cool here's all of the p5 related code that we're kind of bringing into our our own code um actually i think it would help if we see not minified yeah there we go yeah so it's it's doing a bunch of stuff it's giving us all of these abilities that we're now going to be able to use in our own code um we have a question from chat uh how heavy is p5 i'm guessing that question is like how big is it is this going to really like slow down my web page by importing this this library it really is not that heavy i'm pretty sure it'll be a couple of kilobytes especially if you use the minified version because it is still text file so it won't take too much space um on the web server or locally on your computer for it to run cool because really you know all the heavy work is being done by your browser itself not the actual code cool so let's go ahead and continue on with our project and so the first step towards creating our wall um drawing inspired project is to create um the canvas so declare the setup function which i've already done and inside the setup function i'm going to use what's called a function called createcanvas and this is camelcase so that it's create and then capital c with the canvas and inside of here i'm going to give it two two numbers 500 comma 500. so what this will do is it's going to create what's called a canvas inside of our web page and i'm going to actually just run it and and save and then show it to you nothing happens but we um i don't know how i can actually show you this maybe i can open inspector but i think i'll hold off on that for now but what it is doing is that it's creating a canvas um html element so ultimately it really is everything that we have inside of the index.html file ultimately gets rendered as html and what we're doing with this creative canvas file sorry canvas function is creating an html element called canvas let me actually add some extra code in here to show you what we've created so if i um set the background of this canvas onto black i am seeing um i need to make my window a little bit bigger so i am seeing i'm seeing this black box that is supposed to be 500 pixels wide and 500 pixels tall so this creative canvas is a function is a p5.js built-in function this um this function is built in for you from the library and when you use it with two numbers the first number is for the width of the canvas the second number is for the height of the canvas so for example if i were to change this number from 500 to 700 and run it we're going to get a canvas that is 500 pixels wide and 700 pixels tall and the background function colors the background meaning the full fill color of the whole canvas element itself to black because currently we're using rgb notation and this is actually the same thing as writing zero comma zero comma zero for our red green and blue values um but if rgbs are black sorry rgbs are zero they're they're black and if it's 255 to 55 to 55 then it is white but the reason why we didn't see anything when we didn't have the background function is because it's transparent so transparent canvas on top of white white background default white animation of page is this nothingness but it is there because when we colored it with the background function we saw what was there cool cool so let's check this off and then we'll go down and so it says below the setup function declare draw function which we did we're going to also check that off and then moving on um inside the setup function divide the canvas into four equal rectangular areas by drawing two lines one along oops one along the vertical center and one along the horizontal center of the canvas so here we're going to use our first 2d primitive shape function so p5js has a lot of primitive functions 2d primitive functions provided for us you can go to their web website and go to the reference page and you'll see all of these functions built-in p5.js functions for all of these shapes so we're going to be focusing on some of these things that you see under the 2d primitives section and the first shape that i'm going to be creating is a line so when we go to the reference in the line for the line function it tells us that we need by minimum four numbers x and y coordinates for one end point and x and y coordinates for the second endpoint so using that what we're going to do is we're going to state line and for me to draw a horizontal line from the middle of the canvas then um we will also need to talk a little bit about the coordinate system of how we can figure out where to put our shapes so um like i said before let me actually bring back our background color in again so that it's easier for me to explain um yeah mg1 i wonder if we can make the canvas a little bit smaller just so we can keep the the zoomed in a little bit because it's a little bit hard to see your text if we zoom out once more um so yeah that works or even can we do like 200 by 200 and then zoom in one ah okay i see what you're saying and then make this bigger yes there we go cool maybe it could be a little bit bigger let's see what that looks like okay cool so i am like i said before the create canvas function it takes in the width and the height of the canvas that we've created here so this is 300 pixels wide and 300 pixels tall right now and the way that coordinate systems within our canvas works is that at the top left corner our x and y coordinates are at zero comma zero and as it goes towards the right our x coordinate increases so that because our canvas is currently at 300 pixels wide it's going to be at 300 pixels at all the way to the right of the canvas and our y increases as it goes down which is a concept a little bit hard to grasp because normally people think you know if height is increasing you want it to go up but in the case of p5.js and actually for most um web-based um based i think graphic libraries um to coordinate the zero commas here or the origin coordinate will be top left corner of the canvas or the thing that you're drawing it within and then the bottom right corner will be at however um bake my width of the canvases and however um tall my canvas is so this will be at 300 comma 300. so what that means is that for our line let's actually go ahead and try it so um i'm also going to explain this in a bit but i want to make sure that we can see the line so what i'm doing here is that i'm actually changing the stroke color of my line so it's going to be drawing white lines not because by default lines and d5 dress are drawn with black color so here then if i say something like zero comma zero which i've told you that is at the top left corner of the canvas and if i go 300 comma 300 it should draw a diagonal line from the top left corner to the bottom right corner which it does so knowing this we know that if i want to draw a line through here horizontally what we're going to have to do is we're going to try to figure out where where it is at the half in terms of height of the canvas the y coordinate of the canvas and it's going to go from the left um side of my canvas to the right side of canvas so that my x coordinate is going to go from zero all the way to the width of the canvas so if i put that in so i'm going to start from here which is that x is at zero and y is going to be 150 because the total height is 300 so 300 divided by two and it's going to go all the way to the right of the canvas and it's going to stay at 150. so now we've created a horizontal line vertically in the middle of the canvas similarly if we want to draw a vertical line uh in the middle of the canvas horizontally then we're going to go from here which is where uh when y is at 0 and we're going to go all the way down where y is at 300 and the x is going to remain constant in the middle of the canvas so it will be half of the width and our width is also 300 so what's going to um do our y sorry our x value is going to be half of 300 which is going to be at 150 and it will go from zero where y is zero and then it will stay where x is going to be 150 and then go all the way down to the bottom of our canvas which is at 300 pixels cool so now we go ahead and save that and we've got a canvas with a black background and white lines that is dividing the canvas into four parts one this is an interesting uh case where i would describe this as like hard coding in these values so our width and uh height are 300 right now and so we know that we want it to be 300 divided by 2 and we've just kind of hard coded in that value of 150. is there anything that we can do to not hard code in those values to take the existing to like does p5 know that hey my canvas is 300 by 300. so we there is a variable conveniently the p5.js who revises built-in variable and it's called there the variables are called width and height so you can use these variables to say um i know for now for here we've hard-coded it in because we can see that i've given my canvas to be width of 300 and height of 300 but no matter what this is if you want your canvas if you want your p5.js sketch to know basically whatever my width and height of my canvas is take that value then you can use the built-in variables called width and height so if i were to replace those using those built-in variables my code here would be something like width divided by 2 and then this could be width and this could be also wait a minute so this is for height value so actually even though my this would work because my width and height is the same i want to use the height variable in here so then it's going to go from zero and where height is half of the height for my y value value for the first endpoint of the line and then i want to go all the way to how much ever my width of the canvas is and remain at where height is half of my height of the canvas and then i'll do the same thing for the other line which i'm going to replace this um part of the 150 the hard-coded number to the half of my width so width divided by 2 and then i'll go from 0 and i will remain and width divided by 2 for my x position of the second endpoint of the line and i'll go to how how much ever my height of my canvas is nice yes so now if we even change those values so it's not even a square this should work where um yeah exactly exactly awesome cool yeah so again uh this is the kind of stuff that i like to point out where even if you're brand new to programming this is kind of an interesting application of variables right off the bat where you can now kind of see okay these variables are storing some value and we're going to be using that value somewhere so exactly um it is kind of interesting also at the same time though because these are not like you know user defined variables we're using where we're using led for example and then you know defining and initializing our own variables but basically you know um these immediately when you create a canvas these variables that are built in are going to be set to these values that we give to the creative canvas function yeah and i think i think one thing is that uh both g1 and i have experience with like thinking about the canvas and knowing like okay x y x is going over y is going down it definitely takes some time to get used to this so i think you know the line the line function takes four values but there's nothing wrong with having to sit there and think like okay i want my first point to start on the very to always start on the very left which is going to be zero and always be in the middle vertically which is height divided by two um like feel free to one think it out take take the time to think about where these points are gonna be and then also don't be afraid to um to run your code and see what happens and it might be wrong and you might have to um figure out where it's um where you went wrong yeah your code is not going to well it might break but there's not it's not going to have like a devastating effect if you type something wrong in your code or anything like that and my advice actually when you're doing programming with p5.js or when you're new to programming in general is to change one value at a time so for example in this line function and you're seeing this as like an example code or somewhere and you're thinking okay i'm not entirely sure what my you know the arguments inside of my line function does then i'd say okay change the first number in here to 100. that changed you know where my line started from zero to where like it and it what moves up to somewhere a little bit more towards the right and so i'm assuming that okay the first number changes the x-coordinate of my first point of my line so that's kind of like you can do a little bit of like a logical deduction work um to basically figure out um what each of these arguments inside of the function does um and that's also like a really good way of studying you know a finished code that you see somewhere on the internet i think it's i i know that we're going to like a million tangents and we want to get into the project but i also think that it's a cool opportunity to show like exploring edge cases um g1 online nine could you change that height divided by two to width divided by two um yeah that one's fine so if we do this and we run the code right now everything looks like it's working but if we make the canvas rectangular all of a sudden it's not working right because we've confused width for width for um height at some point or the other way around right and so this is i think that this is another good example of like um really kind of thinking through all of the cases where you know that code was working because width and height were the same thing but if it's different then you have to make sure that you're um that you're doing this correctly or you you might be uh doing something incorrectly under certain conditions yeah um i think for the sake of time i'm going to move up a little bit and i don't think we're going to be able to create all four patterns for each of the quadrant and i think i'm going to also simplify the steps a little bit so that i can show you more things as an introduction so what i'm going to do is it's it's telling us let's fill the first quadrant with the pattern the upper left corner will be filled with parallel lines that run vertically um i'm going to actually skip this because i've also i've already shown you guys how to create a line and i really want to show you how to create um different kinds of 2d primitive shapes um one of which is for example in this quadrant it is telling me that i'm going to be drawing a polka dot pattern on the um top right quadrant which is this one so i'm going to go ahead and do that in here so there's also in the um when you open up our project for this wall drawing um project in dp5 sjs learn p5.js course um there's also comments in the areas where we expect or it's sort of like a guideline for you because projects are not we're not particularly checking whether you're doing things correctly or incorrectly it's more of a guideline and it says to do um for the draw bulk without polka dot section so i'm going to go move down inside now we're inside the draw from draw function in here and what we're going to do is try to use a circle um first before we even do a grid of circles we're going to draw a circle inside of that quadrant so here in line 32 i'm going to just use another function called circle which is a um if you can you can go to the reference and check out under the shapes under 2d primitive primitives section we've got a reference for a function circle so as namesake this function will draw you a circle inside of the canvas it takes three arguments in here the x coordinate y coordinate and also d for diameter of the circle or really the width and height of the shape right and we're gonna go back in here and say okay if i were to draw let's try to draw a circle actually in the middle of the canvas first so using the width and the height variables to in order for me to get the width at the middle of the canvas my x coordinate will have to be width divided by 2. my y coordinate will have to be height divided by 2 and then for the size i'm just going to give it an arbitrary number of 100 which will be which will be translated into pixel values so it'll be it will have a diameter of 100 pixels if we run this we see a circle in the middle of our canvas exactly in the middle of the canvas um and at the with an if you see this the x and the y coordinates are used for the center of the circle right and then 100 is for the diameter of the circle um and let's actually go ahead and i think this was to do before this it says set no stroke and fill color so we're gonna do here and we're going to use a fill function which um change the fill color so the color the solid color that the shape is filled with to another color that you can define in here and a couple of notes on the fill function is um if you're familiar with web programming you know that there's multiple ways that you can define colors for example in within css right you have hexadecimal colors you've got name color colors so for example like pink beige black and all that kind of things that you can use within css you can also define colors in rgb and hsl and so on all of those things you can do within p5.js things will be a little bit different in terms of syntax but you should be able to do something like let's say in string if i say pink it will fill our circle in pink um also if you were to do some sort of like a hex number in here and say uh um is this number sign and then to i think this just should give us blue zero zero zero ff which it does and you can also use rgb numbers which you don't have to do like rgb and another function inside like you would do for css you can just directly give it three arguments for the fill function so if i were to give 255 0 and 0 this should color our circle in red yeah the way i think about it is lots of red no green no blue if we did like 255 255 0 it would be what that's mixing r and g so it's going to be mixing red and green which gives yellow yeah cool why didn't i try it out that's what i say and then i'm gonna write and what happens if i do something like this what kind of color do we get get like an orangey color which looks nice too um i'm also gonna maybe just kind of ignore the prompts in the um project a little bit because i also do wanna wait actually i do wanna show you different shapes but before i do that i'm going to move my circle so that it sits on the top left top right quadrant of our canvas which i'm also going to try doing with the width and the height variables so if you want to do some if you want to position our center of our circle to be at the center of our top right quadrant we have to divide up our canvas a little bit more right so in order for us to say okay we want to have our y to be here and we know that our y is at zero at the top of our canvas and it will gradually increase as it reaches towards the bottom this is at height divided by two so if it's a quarter height divided by four that it should sit in the middle of our top right quadrant um vertically so let's go ahead and change that so the height is not divided by two but divided by four and click run and you will see that it now sits um quarter way from the top to the bottom of our account again a good point to just remind yourself that zero is top left so you know if you're familiar with like more traditional coordinates that you might see in math you're starting from the bottom we're starting from the top and going down so that's a fourth of the way down the the canvas cool so now we're going to do the similar thing where um we're going to calculate how to position our x-coordinate here with our width um variable built-in v5.js variable so if i were to go from the left um boundary of our canvas being at zero zero coordinate for our x coordinate zero for our x coordinate then this would be at where the width is divided by 4 because it's quarter way in but in order for us to get all the way here that would actually be three quarters of the way in so what we're going to do is we're going to actually divide the width divided by 4 and times it by 3 so that way we have three of our quarters which would make our circle be sitting on the center of the top right quadrant of our canvas nice cool and then i'm going to move on and i also want to show you a different 2d primitive shape which is we're going to try um using a square so you can create a square using a function called square i think this is another really nice thing about v5js is that a lot of the functions that they have inside of their reference or inside the whole library itself really is self-explanatory if the function is called square it will draw you a square if it's called rect it will draw your rectangle if it's called the lips it will draw your lips um so with that okay let's try clicking on the reference page for the square function which basically it will give um it is um telling you that we need three variables at the least so i guess one little note about how you can read the references on the p5.js website if you're looking at the syntax and things are in square brackets this means that those are optional values and you don't need to have them in order for you to draw a square and also if you think about it logically in order for you to draw a square you need absolutely an x and y coordinate and you also need some sort of a size and because it's a perfect square where the width and the height of the shape is the same you really need just one number right to afford it to be the size of the square so similarly let's just start off by creating our square in the middle of the canvas by doing width divided by two height divided by two and also similarly i'm just going to put in a static number in here for now for 100 pixels and notice that immediately you kind of see something different here right when we drew our circle previously we had our the middle of our circles as the center position of our circle match the center position of earth of our canvas in the case of square we see that the top left corner of our canvas matches the middle of our canvas this is because the x and y coordinates that we pass through the square function is used to position the left um top left corner of the square and the 100 um the as given as the third argument of this function is used as the width and the height of the sheet so in order for us to basically say there are multiple ways of doing this actually to have us position our shape in the middle of the canvas for example which would be to change our x and y coordinates that we're giving into the function itself so for example we know that the the width and height of our shape is supposed to be 100 so if we minus 50 it will move 50 pixels to the left and then if we also minus 50 for the height for the y coordinate sorry not the height for the y coordinate it's going to move 50 pixels towards the top of the canvas so if we do this and save we'll see that now our um square is positioned in the middle of the canvas but also what we can do here is let's say that we do want to keep our x and y coordinates to be with divided by two and height divided by two inside of our reference we're going to take a look at and a function that exists from the fifa just library called rect mode which stands for rectangular mode so using this function you can set you can tell p5.js um program to basically say um please interpret my the numbers that i'm giving to direct function and the square function differently and if we tell direct function to be at center so here i'll do it right above my square function and say rect mode and right center in all caps what this will do is that after we set rectmode to be at center or rectangular mode to be a center our x and our y coordinates for our square and rectangle functions are going to be used to be at the center position of our shape for our rectangular shapes which we include rectangle and square cool um i guess maybe this might be a good time to take any questions um from the chat if we have some but basically what i wanted to show you during this first series of our live stream for creative coding is that you know there is a javascript library called p5.js it's available for everyone to use because it's an open source library this is the web page that you can go to for references for all the documentation on all the functions that they have the library has available for you and that i also wanted to give you a little bit of a taste of what you can do with javascript to create um 2d drawings on the web page i uh yeah we can we can wait for some questions to come in from the chat um we had a question earlier that was um uh can you talk a little bit about the difference between p5.js and processing and which one is better for use on the web so processing was never really um developed for it to be used on the web itself it really was a library that was built for um for java the program language java which is very different from javascript so javascript is a scripting language that you can we use for the web page um to do any sort of like an actionable things within the web page itself and java is more of like um how would i explain this um alex i feel like you might be more apt at explaining what java is but basically um it is a programming language yeah java is used for non-web applications right so if you wanted to make a little application that's sitting on your desktop right you could do that using java and so processing is a very similar library where you can do all sorts there's a canvas you can draw shapes you can animate the stuff on the canvas really very similar functionality right so um if you've ever used processing or if you intend to use processing you will have to download what's called an ide which is um integra what is it what does it stand for ide idea integrated development environment integrated development environment which means that you're going to be opening downloading and opening the software where you create where you program all of your things that for your visualizations and you can run them and see them and etc but basically you need a special sort of um interpreter of your program to create the equity and see those visualizations and if you do download that you will see that there will be an option to interpret that code in javascript and you can use you can copy that and then paste it into like a web page similar to with a similar setup to what we have here for our index.html and it should be you should be able to run that on the web page but really p5 the processing the ide itself it does um provide you with an option for you to display your code online but it was never really intended to um the initial motivation that's um so to speak was not for it to run on the web page and this is where p5.js came in and p5.js was specifically um created so that it takes all advantage of web programming of sorry of web graphics programming for um and and really i'd say if you're going to create visualizations on the web page usb 5.js because that's what it was built for g1 could we get a little bit of a preview of how to animate stuff uh isaac is asking how do you animate and spin the shapes i i always uh spinning i always found to be a little bit different spinning involves at least the way that i always thought it involves like rotating the canvas itself which starts to get a little bit mind-bending but i was wondering if you want if we could just see one of these balls kind of start to drop okay so if you want to rotate anything there is a function called rotate which you can put in a static angle in here and v5.js angles are given in radians i'm going to go through this really fast but uh we there's also another um p5.js built-in variable called frame count which basically increments one per frame rendered so it renders around 60 frames per second so um it will have go from zero to 60 for each second basically in a b5.js in the world of b5.js if you're trying to animate something really really quickly you use this number and i'm going to slow it down by timesing it by 0.01 and what this will do is something like that that's not spinning with its center on its own because when you rotate something in p5.js you're rotating the whole canvas right you're not just rotating the shape itself right so you can almost imagine it's like the the canvas is kind of like spinning around that top left corner uh it's how i i try to visualize it yeah so when we do change our square to have a x and y coordinate zero comma zero you can see that it's rotating at the top left corner like this um so in order for us to basically move our rectangle back to the center of our canvas what we'll need to do is actually use another function called translate which translates the position of our canvas the entire canvas from zero comma zero to zero to width divided by two and height divided by two so what i'm doing is i'm actually moving the whole origin point of my canvas from the top left corner to the middle of the canvas if we do this and we run it we have the whole canvas which which moved from top left corner to the middle of the canvas and spinning on its own and notice how like it's created this trace of um a white circle around it because our stroke color um is white but if we were to not want our strokes in here i would say no stroke before we draw the shape and we won't have any stroke so now we're actually it's also creating a circle right because it's the uh if we if we have no fill i guess we will just see the um um actually if we use a background function at the beginning of our draw it's refreshing with that background color and then it's drawing the shape on top of it so it will look like you know it's wiping it out in black and then it's drawing that the shape in that particular rotation and so on um continuously and this is actually the thing that i was talking about about how the draw function runs and that after the setup function runs once so you will also see that all of our lines disappeared that's because at the beginning when the program runs we had all of those lines but immediately after we're wiping our background to a black a solid black color again and then drawing these shapes on top of it that's why we no longer see those white guidelines yeah you can think of that background as painting over everything that existed before and then the draw loop happens again that repaints the shapes um challenge challenge for the um audience if do you want if you what's the what's the built-in variable it's called free uh like frame count so if you put in frame count as the x value for your circle there and maybe you divide it by uh or you multiply it by a small amount or something um let's not hit run yet let's see if our audience can guess what happens and then sorry what were you going to say do you want i was going to say we could just leave it the way it is i don't think we need to do anything to it just use frame count the way it is for the x yep yeah i think that that makes sense um but i was gonna say though um let me actually revert this back because i do want to show something sure that is really really quick while we wait for the audience to think about that but um you can also give alpha or opacity value to your colors and if you put in a little bit of opacity in the background function by giving it the second value when you only have you know two values it's going to create this like tracing effect do people see this i think it's more noticeable when it's a little bit faster yeah it's hard it's hard to see but there we go that's cool that's because um the background color is being uh cleared out with some opacity so it still leaves traces of things um right the previous square that we're painting over we can still see a little bit of it and then we um uh continue to paint paint over the background yeah um okay cool let's look at if we so if we replace this before this was a constant value right it was always width divided by two or whatever it was now it's going to be frame count and frame count is this value that's keeping track of how many frames have existed since the start so presumably it starts at zero and every frame it increases by one and so our position is going to be changing every time we draw it so if we go ahead and run this we'll see there we go our circle is moving it's x yeah it's x position is dependent on the frame count it's no longer static so it looks like the circle is moving cool um i guess maybe one last question i think just came in through the chat if you're new to programming i'd say that our learn p5.js course is really intended for beginners and it does take you from the beginning of like knowing nothingness to really really slowly progressing through but it does assume a little bit that you will have some knowledge of fundamental programming concepts so i would um personally recommend that you take our learn javascript course before taking our learn b5.js course but if you just kind of want to like go through and get a taste of like programming like what it's like to program without worrying too much about learning how to program in general then i think you wouldn't have problems just following along the learn p5.js course from the beginning yeah again i think it's a it's a great way to learn those fundamentals too of if you if you don't know what a for loop is or how to write a for loop well you can write a for loop using p5 and instead of creating one circle you can try to create 100 circles using a for loop so it's a nice really visual way to kind of hone those fundamentals which is the thing that this um project originally intends to do which is trying having learners basically use multiple um sets of four loops to create these patterns that repeat in in different numbers so for example this line um pattern uses one set of for loop that draws these lines for how many uses like nine i think and then like same for the polka dots and checkers and like these on diagonal lines and so on cool all right juwan do you want to give a brief preview of what we're doing next week yeah so for next week we're going to talk a little bit about the concepts that are covered in this animation module of their learning people just course um and we're going to talk about uh or do a walkthrough of this bouncing balls project which does this cool awesome so we're really going to go into um creating animations with b5.js and create multiples of the same multiple variations of the same shape cool that works good to me so thank you for uh checking this out and um yeah uh we will uh we will see you next week

Channel: Codecademy

Views: 13,507

Keywords: p5.js, creative coding, p5

Id: vR06jWwfQ3I

Length: 61min 45sec (3705 seconds)

Published: Tue Mar 09 2021