#Deadindian paintbrush drawing code#

draw a bunch of random points within a circle set the number of times we lerp the points in the for loopĬonst lerpX = lerp(mouseX, pmouseX, i / lerps)Ĭonst lerpY = lerp(mouseY, pmouseY, i / lerps) find radius of the spray paint brush and radius squared set minimum radius and spray density of spraypaint brush The vector magnitude is the distance between the origin and the point at X and Y.įor example, if we create a vector with the current mouse point and another vector with the previous mouse point, the below diagram shows how we can visualize them:Ĭonst speed = abs(mouseX - pmouseX) + abs(mouseY - pmouseY) The vector direction is the direction from the origin (0, 0) to the point at X and Y. This will create a p5.Vector object with the following properties: To create a vector, we can pass in an X value and a Y value into the createVector() function. You can think of a vector as an arrow of some length that points towards some direction. One way we can more easily manipulate this relationship is with a vector, which is an object that has both a direction and magnitude. So far in this guide, we've drawn shapes and lines based on the relationship between the current mouse point ( mouseX and mouseY) and the previous mouse point ( pmouseX and pmouseY). Let speed = abs(mouseX - pmouseX) + abs(mouseY - pmouseY) One way we can create more continuous paint strokes out of circles is by connecting them together in a sequence without gaps in between, resulting in what looks like a string of beads(): So, given these constraints, we have to be smart about the way we paint in order for our strokes to look good. Here's another way of looking at it: the draw() function is like the hand that moves our paintbrush around the canvas, but our hand can only move so fast. In this way, each call to the draw() function is like a single animation frame, and repeating draw() over time creates a coherent picture. Since our marker() can only create one circle per call to draw(), the frequency that the browser can call draw() determines how smooth our marker() strokes look. Keep in mind that although we define how our strokes look with paintbrushes like pen() and marker(), it is the draw() function that drives the act of painting on the canvas. Gaps appear between the circles when you draw too quickly. You may have noticed that your paint strokes with the marker() brush don't look quite continuous. } Making better brushes and painting smoother strokes We'll draw a translucent circle wherever the mouse is currently located, which paints a line that feels similar to a felt-tip marker.

Instead of drawing a continuous pen line, let's switch things up. Now, let's explore more p5.js painting techniques and see what fun brushes emerge in the process! Mimicking a felt-tip marker pen

#Deadindian paintbrush drawing code#

To make it easy for you to experiment with these techniques and create your own brushes, I've compiled all of these techniques as code snippets, which you'll find at the very bottom of this guide for future reference. To switch the paintbrush, simply swap pen() for a different paintbrush inside of the draw() function.Īlso, we'll use a variety of math techniques to define our brush strokes throughout this guide.

As you follow along, you can use this same exact template code provided above. draw a line from current mouse point to previous mouse pointįor the rest of this guide, we'll focus on creating different paintbrushes with p5.js. set the color and weight of the stroke