Gradient lines and brushes with linear interpolation

Gradient lines on HTML5 Canvas
Gradient lines on HTML5 Canvas
Gradient lines on HTML5 Canvas. Image by Author.

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 . The idea is to set the start and end of the gradient position the same as the line itself.


With a little bit of vector math

Custom brush shapes drawn at fixed distance.
Custom brush shapes drawn at fixed distance.
Custom brush shapes drawn at fixed distance. Image by Author.

In the last post, I talked about how you can draw a custom path using 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

Drawing paths interactively
Drawing paths interactively
What we will build in this post. Image by Author.

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

Vector boolean operation demo
Vector boolean operation demo
Vector boolean operation demo. Image by Author.

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.

Dragging HTML elements with react-draggable
Dragging HTML elements with react-draggable
React Draggable component and CSS transition. Image by Author.

In this post, I would like to document my process of learning to use component. The basic usage is quite simple — you only need to wrap your element with a 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 for simplicity.


With smooth map animation between pages

Animate over map without page refresh
Animate over map without page refresh
Gatsbyjs and Mapbox GL JS. Image by Author.

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…


Word-level typography animation.
Word-level typography animation.
Word-level typography animation with p5.js. Image by Author.

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 we will break them down into individual…


Typography animation using font outlines.
Typography animation using font outlines.
Image by Author.

Get the outlines of your fonts with p5.js and opentype.js

p5.js has a function called 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.

Machine learning training time-lapse
Machine learning training time-lapse
Machine learning training time-lapse. Image by Author.

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. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store