Apr 23, 2021Building the Magic Wand Tool for a Drawing App, pt. 1In my drawing app, Pixel V, I have a color replace tool that lets you restrict where the brush makes a mark to only a chosen color. When the brush was limited to a single pixel width, I just checked the canvas for the color of the pixel at the…2 min read2 min read
Apr 16, 2021Adding Layers to A Drawing App, pt. 2In part 1, we rendered the layers to the DOM, and now we’re going to make it so the layers can be rearranged and interacted with from the DOM. The important lines here are the ones setting each layer element to draggable: true and associating the actual layer object with…3 min read3 min read
Apr 9, 2021Adding Layers to A Drawing App, pt. 1This won’t be much of a tutorial, but this is a glimpse into my initial attempt to add layers to a drawing app. This is the first time I’ve really thought keeping a state would be useful, so that’s probably the direction I’ll be moving in the future. …2 min read2 min read
Apr 1, 2021Create Pixel Art with CSSTry it here. You may have seen articles about using the box-shadow property in CSS to make pixel art. The process involves creating an element with the width and height of a pixel, and creating a box-shadow for each pixel. It looks something like this:Pixel Art2 min readPixel Art2 min read
Mar 25, 2021Create a Custom Upload Button in JavaScriptFor my pixel art app, Pixel V, I want to make it easy to use a reference image layered behind or on top of the user’s drawing. …2 min read2 min read
Mar 18, 2021Custom Bezier Tool for Pixel ArtTry it here. In my pursuit to render a well-aliased bezier curve for a pixel art tool, I came upon a paper on rasterizing curves by Alois Zingl. The paper covers many types of curves, but I’m just going to focus on quadratic bezier curves. The code in the paper…3 min read3 min read
Mar 11, 2021Custom Bezier Curve Tool for HTML Canvas, pt. 2Last time we rendered the curve by connecting the pixels with a series of lines, creating a polyline that estimates the bezier curve. That method may work sometimes, but it often produces artifacts when used for pixel art. This time we’re going to try plotting each pixel one after another…4 min read4 min read
Mar 5, 2021JS: Making a Color Picker from Scratch, part 3To give a color picker the expected behavior, there are some tricks to how you set up the interaction between the gradient canvas and the user’s mouse. …2 min read2 min read
Feb 26, 2021How to use UUID for Rails APIIn application.rb, add the following line: config.generators do |g| g.orm :active_record, primary_key_type: :uuid end Create a new migration from the command line: rails g migration enable_uuid You should get a file that looks like this: class EnableUuid < ActiveRecord::Migration[6.0] end Then add this method inside that migration to enable uuid: class EnableUuid < ActiveRecord::Migration[6.0] def change enable_extension 'uuid-ossp' enable_extension 'pgcrypto' end end1 min read1 min read
Feb 19, 2021JS: Making a Color Picker from Scratch, part 2Try it here. Last time I went over the basic layout in HTML and CSS. Now I’ll go over creating the gradients and user interaction. Let’s start by creating a Picker class and assigning all the buttons to associate with. …Color Picker4 min readColor Picker4 min read