Use Tensorflow with GPUs on Mac with the official Apple plugins.

This is based on my experience and it may not work for your machine. Please use it at your own risk. I cannot take responsibility for any harm done to your computer.

I have been very happy with my Conda virtual environment setup to do machine learning experiments locally, but…

Gradient lines and brushes with linear interpolation

Gradient lines on HTML5 Canvas

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

With a little bit of vector math

Custom brush shapes drawn at fixed distance.

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

For interactive drawing applications

Drawing paths interactively

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

Adobe Illustrator’s Pathfinder, but with JavaScript

Vector boolean operation demo

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

Create a draggable element that also animates.

Dragging HTML elements with react-draggable

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

With smooth map animation between pages

Animate over map without page refresh

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…

Word-level typography animation.

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…

Typography animation using font outlines.

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…

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…

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