Review - How to Paint with Code Creating Brushes
After searching the web, I found one of the best tutorials about creating your own brushes with P5.js. In How to Paint with Code: Creating Your Brushes, Arianna Ninh teaches her readers how to create several types of brushes.
Ninh's first step is to create a very basic drawing app that draws a simple line with a pen brush. Going forward, she builds on this simple P5.js sketch, by adding more P5.js functions, loops and arrays. She also uses her own custom functions. When finished, she has not only created a pen brush but also a felt-tip marker, rainbow brush, wiggle brush, toothpick brush, fountain pen brush, splatter brush, hatching brush and spray paint or splatter brush.
For those new to P5.js, Ninh begins by creating the basic files needed for every P5.js sketch or project. She covers linking to the online version of the P5.js library and discusses the purpose of the code in the style.css file. Next she covers the first two P5.js functions, which are the setup() and draw() functions.
With the P5.js sketch files ready to go, Ninh adds more code inside the draw() function. She adds the pen() function, which holds the code that will run when the mouse touches the canvas (mouseIsPressed). But what happens in the pen() function. Ninh discusses the code inside the pen() function line-by-line.
With the pen() function, Ninh has created the pen brush and is now ready to build on that code to create other brushes. Her next function is the marker() function, which uses circles along the mouse path to create a marker brush.
Still drawing circles on the canvas, Ninh introduces the P5.js mouseX, mouseY, pmouseX and pmouseY system variables and how to use them, along with the dist() function, to create a smoother brush. She also introduces color in to the process and discusses the difference between the RGBA and HSBA color modes.
Next, Ninh moves on to more complex brushes. She introduces math based code snippets to create the wiggle, toothpick and splatter brushes. She encourages her readers to take what they have learned and apply it to other projects and lists her favorite resource links and code snippets.
Arianna Ninh is one of the educator team at superhi.com, an online school and community for creatives. You will find this and other great tutorials on the superhi.com website.
How to Paint with Code: Creating Your Brushes by Arianna Ninh
https://library.superhi.com/posts/how-to-paint-with-code-creating-paintbrushes
Ninh's first step is to create a very basic drawing app that draws a simple line with a pen brush. Going forward, she builds on this simple P5.js sketch, by adding more P5.js functions, loops and arrays. She also uses her own custom functions. When finished, she has not only created a pen brush but also a felt-tip marker, rainbow brush, wiggle brush, toothpick brush, fountain pen brush, splatter brush, hatching brush and spray paint or splatter brush.
For those new to P5.js, Ninh begins by creating the basic files needed for every P5.js sketch or project. She covers linking to the online version of the P5.js library and discusses the purpose of the code in the style.css file. Next she covers the first two P5.js functions, which are the setup() and draw() functions.
With the P5.js sketch files ready to go, Ninh adds more code inside the draw() function. She adds the pen() function, which holds the code that will run when the mouse touches the canvas (mouseIsPressed). But what happens in the pen() function. Ninh discusses the code inside the pen() function line-by-line.
With the pen() function, Ninh has created the pen brush and is now ready to build on that code to create other brushes. Her next function is the marker() function, which uses circles along the mouse path to create a marker brush.
Still drawing circles on the canvas, Ninh introduces the P5.js mouseX, mouseY, pmouseX and pmouseY system variables and how to use them, along with the dist() function, to create a smoother brush. She also introduces color in to the process and discusses the difference between the RGBA and HSBA color modes.
Next, Ninh moves on to more complex brushes. She introduces math based code snippets to create the wiggle, toothpick and splatter brushes. She encourages her readers to take what they have learned and apply it to other projects and lists her favorite resource links and code snippets.
Arianna Ninh is one of the educator team at superhi.com, an online school and community for creatives. You will find this and other great tutorials on the superhi.com website.
How to Paint with Code: Creating Your Brushes by Arianna Ninh
https://library.superhi.com/posts/how-to-paint-with-code-creating-paintbrushes
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
