Paintbrush - Beginner
Using shapes
Modify the two functions in your sketch.js
file to this code here, and feel free to change around any of the code to your liking! Make sure to read the comments which explain what each line does.
Using a Custom Function
Firstly, let’s create a custom function which paints 20 circles around a certain point, for a unique paintbrush effect. Here is what I’ve coded, but you are encouraged to change any of the variables and add/delete lines of code to see what happens.
Remember: there’s always undo button if you ever mess up.
As you can see, inside this function I have used other functions like random()
, stroke()
or circle
, which are functions we don’t have to make as they’ve already been made by the libraries we are using!
Using Prebuilt Functions
Inside the p5.js library, there are prebuilt functions! Here are two valuable functions which you can play around with:
This function only executes when your mouse is pressed, so we only need to write this:
Likewise, this function only executes when your mouse is dragging, so we only need to write this:
Your Ultra Paintbrush
If you have finished all three of those functions, try and see if you can make a paintbrush which only changes to certain colours. Then, make another paintbrush which uses another shape instead of circle
.
Finally, try and create a paintbrush which combines all three of the different paintbrushes, depending on what type of key you press (hint: search up ‘keyPressed in p5.js’).
If you want to continue with your paintbrush journey, visit the p5.js website.
Well done! You have now created a canvas with your own custom paintbrush using a JavaScript library called p5js.