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

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

Try 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:

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

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

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

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

In 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 end

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