In this post, I want to talk about how to create a gradient line in p5.js. But first, let’s look at how we can do this without using any libraries with HTML5 Canvas API.
Conveniently for us, there is a method called
createLinearGradient(). The idea is to set the start and end of the gradient position the same as the line itself.
// assuming you already have a <canvas> in your html.
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800
canvas.height = 500
ctx.lineWidth = 80;
ctx.lineCap = 'round'
gradientLine(ctx, 60, 60, 300, 380, 'black', 'blue')
gradientLine(ctx, 720, 120, 80, 300, 'brown', 'orange')
gradientLine(ctx, 520, 70…
In the last post, I talked about how you can draw a custom path using
curveVertex() function in p5js. The question now is what if I do not want to use a continuous line, but instead, I want to use custom shapes as my brush? You know in Photoshop, there are hundreds of different kinds of brushes.
Note: This post’s content is heavily inspired by a paper.js tutorial although I did not look at the source code of the library for learning purpose.
The easiest way to create a paint brush in p5js is to display a shape at mouse…
A path is made up of points, and is a basic building block of…
In this post, I will look at how to handle vector graphics boolean operations such as union, difference, intersection or xor, in the HTML5 Canvas. The boolean operations are very common and useful for any designer. If you regularly use Adobe Illustrator to create graphic elements, you must be familiar with the Pathfinder panel that lets you use these operations.
Let’s say you want to get an intersection of two shapes. One way to think about it is from the perspective of bitmap images. You can access individual pixels and create an image mask or use one of the many…
In this post, I would like to document my process of learning to use
react-draggable component. The basic usage is quite simple — you only need to wrap your element with a
Draggable component. To learn how, you can refer to the original repo or read a write up by Victoria Lo here on Medium.
What I wanted to do was a little different in that I not only wanted to drag elements but also attach CSS transition animation to them, and that's what I want to cover in this post.
I will use
create-react-app for simplicity.
$ npx create-react-app…
I love making websites with Gatsbyjs and recently started using Mapbox, so I thought I could combine the two. The idea is to create a travel blog (of course, traveling after the virus goes away) where the map will support the text content by dynamically zooming into the area of interest and putting markers of the places from a blog post. When navigating between different posts, the map will continuously highlight the new areas instead of refreshing the whole map each time. This will give a better spatial context to the readers.
Before I dive in, I just want to…
Here is a breakdown on what we will look at. First, we will write down some text but instead of storing in a single
string we will break them down into individual…
p5.js has a function called
textToPoints() which is somewhat hidden in the reference. This function returns you with an array of points that are on the outline of the text. It does resampling for you (and you can control the sampling resolution) so it is great to use for quick typographic experiments. In this post, I will show you the basics of how to use it and a few use cases and challenges such as dealing with multiple letters and counter shapes (ie. holes in letters — 0 a, p, B, etc.)
The basic usage is very simple. First, you…
The p5.js library itself does not have a way to export a video out of a sketch but because everything you do is simply drawing on an HTML5 Canvas, if you can find a library to export what’s on the Canvas, you should be able to use it. I recently stumbled upon a really good and simple library that exports to H.264 mp4 video straight out of a browser (no server needed) and made a simple example to make it work with a p5js sketch.
If you would rather check out the original library, here is the link, and I…
Let’s pick up from where we left off in the last post. We cleaned up the JSON annotations and exported it as a CSV file. Now, let’s load the CSV file back in, and filter them with conditions we define and generate PNG images so that we can use the images to train Convolutional Neural Networks.
Again, I am treating this post as a Jupyter Notebook, so if you want to follow along, open Jupyter Notebook in your own environment. You will also need to download Google Fonts Github repo and generate the CSV annotations. …