Review - How to Paint with Code Building Your App
Do you ever wonder how your favorite digital painting app works behind the scenes? You know that you have a paint tool and stroke and fill colors, but how does the code the runs the app really work. Well, Arianna Ninh has a great article entitled How to Paint with Code: Building Your App that shows how to create a simplified version of a painting app.
Actually, this article is the second part of a two-part project. The first part entitled How to Paint with Code: Creating Your Brushes discusses how to make several types of paint brushes in P5.js. Use the link below to read my review of part one.
Now that you have your brushes, you are ready to build your digital painting app in P5.js. Ninh begins by discussing the goals of her project, such as the basic painting tools that you will put in your app. She also discusses that she will be using both built-in P5.js functions and custom coded functions to run the app. She covers how she will take a modular approach to coding her project and how she will be using code checkpoints for testing her code at various points in the progress.
Next she discusses the file structure and what each file will contain, including the HTML, CSS and P5.js files. She begins with the basic code found in any P5.js project, which are the familiar setup() and draw() functions.
Ninh moves on to coding the interactive elements for the canvas controls for a painting app. She discusses the toolbox elements, which will include a dropdown menu, sliders and buttons and how coding custom functions will help to keep her code clean and concise. She begins with a drop-down menu for choosing one of the ten brush types, such as pen, marker or splatter brushes. Next she covers the slider controls for choosing a brush size and a color opacity. For choosing a background color and a paint brush color, she codes a popup color picker. She also codes buttons for saving your painting as a jpg and resetting the canvas. Her final step is to code a few keyboard shortcuts for the app. She uses the P5.js built-in keyPressed() function to listen for when a key is pressed.
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.
Review - How to Paint with Code: Creating Brushes
Demo of the Painting App
https://painting-with-code-intro-app.superhi.com/
How to Paint with Code: Building Your App by Arianna Ninh
https://library.superhi.com/posts/how-to-paint-with-code-building-your-app
How to Paint with Code: Creating Your Brushes by Arianna Ninh
https://library.superhi.com/posts/how-to-paint-with-code-creating-paintbrushes
Actually, this article is the second part of a two-part project. The first part entitled How to Paint with Code: Creating Your Brushes discusses how to make several types of paint brushes in P5.js. Use the link below to read my review of part one.
Now that you have your brushes, you are ready to build your digital painting app in P5.js. Ninh begins by discussing the goals of her project, such as the basic painting tools that you will put in your app. She also discusses that she will be using both built-in P5.js functions and custom coded functions to run the app. She covers how she will take a modular approach to coding her project and how she will be using code checkpoints for testing her code at various points in the progress.
Next she discusses the file structure and what each file will contain, including the HTML, CSS and P5.js files. She begins with the basic code found in any P5.js project, which are the familiar setup() and draw() functions.
Ninh moves on to coding the interactive elements for the canvas controls for a painting app. She discusses the toolbox elements, which will include a dropdown menu, sliders and buttons and how coding custom functions will help to keep her code clean and concise. She begins with a drop-down menu for choosing one of the ten brush types, such as pen, marker or splatter brushes. Next she covers the slider controls for choosing a brush size and a color opacity. For choosing a background color and a paint brush color, she codes a popup color picker. She also codes buttons for saving your painting as a jpg and resetting the canvas. Her final step is to code a few keyboard shortcuts for the app. She uses the P5.js built-in keyPressed() function to listen for when a key is pressed.
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.
Review - How to Paint with Code: Creating Brushes
Demo of the Painting App
https://painting-with-code-intro-app.superhi.com/
How to Paint with Code: Building Your App by Arianna Ninh
https://library.superhi.com/posts/how-to-paint-with-code-building-your-app
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.
