Gradient lines and brushes with linear interpolation
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.
Canvas Way
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…With a little bit of vector math
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.
Simplest Method
The easiest way to create a paint brush in p5js is to display a shape at mouse…
For interactive drawing applications
In this post, I’d like to show you how you can interactively create custom paths with the mouse in p5js. This can be handy if you are building a design tool for yourself or others. It will serve as a basic structure for more complex interactions. If you are not familiar with the p5js library, you should still be able to apply the same logic to other JavaScript libraries because the way a path works in Canvas libraries are pretty much the same or very similar.
Paths in p5js
A path is made up of points, and is a basic building block of…
Adobe Illustrator’s Pathfinder, but with JavaScript
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.
Why Vector Boolean Ops?
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…
Create a draggable element that also animates.
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.
Setup
I will use create-react-app for simplicity.
$ npx create-react-app…With smooth map animation between pages
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…
Typography animation using class & objects
In this post, I would like to show you how to make the text animation where you can have control over individual words. We will also store its original position so that you can return back. We will use a JavaScript library called p5.js. If you are not familiar with the library, check out their website. It is designed to be beginner-friendly for creating audio-visual-interaction on the web.
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…
Get the outlines of your fonts with p5.js and opentype.js
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.)
Basic Usage
The basic usage is very simple. First, you…
Save mp4 videos from within a browser. No server needed.
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…
Quickly generate hundreds of font images.
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.
Directory Setup
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. …
