A canvas element onto which a pixelated image is drawn. The pixel data that is rendered here actually contains two images interlaced with each other that resolve at different points depending on user input.
Patrick Kaipainen Web Developer, Pixel Enthusiast
Stack and tools
Projects

These projects are entirely my own except where it is noted that they were completed as part of a code-along.

100% Original

IBEW Local Union 353 Job Calls Database

A dashboard for tracking employment trends in the Construction sector.

It displays data relevant to the various classifications of members represented by the union about available jobs. Users can search by date, worker classification and company. Returned results can be filtered further in order to glean information about specific types of construction projects.

React Chart.js

100% Original

Job Calls API / Database / Scraper

An API that returns JSON data pertaining to the employment of workers in the electrical and communications trades.

A Node script uses Puppeteer to automatically sign into the IBEW Local Union 353 website, parse the DOM and extract information about jobs available to electricians, line workers and communications workers. Each day the script writes the selected HTML elements to a new JSON file. This data is then used to populate a Postgres database. The API returns JSON data after receiving requests at any of three endpoints.

Node Express.js Postgres Knex.js Puppeteer Shell scripts

100% Original

Pixel Text Renderer

A reusable React component that renders a string to a canvas element. The section headings on this page are rendered with the vanilla JS version.

Try it out!

npm i react-pixel-text-renderer

Canvas element that renders pixelated text

Github NPM

100% Original

Pixel Character Editor

This utility application can read, preview, modify and save character definition files for the Pixel Text Renderer. Because manualy writing [0, 1, 2, 3, 5, 9, 10, 11, 12, 13, 14, 15, 20] for the letter P isn't much fun.

React Styled Components Browser File API

100% Original

Image Destroyer

An experiment in direct pixel manipulation of images pulled from a NASA image API. Image destroyer renders images on a grid of div elements, and can draw text of arbitrary length to the display.

When I took CS50 in 2020, I was fascinated by a series of projects related to iterating through information that represented images. My background in photography probably accounts for this fascination. Looping through image data made me feel close to the material of the image itself in a way that was familiar from my days spent in the darkroom and in photoshop. I wanted to continue to explore image manipulation using javascript.

Vanilla JS HTML CSS

100% Original

Canvas Destroyer

A refactored, more performant implementation of Image Destroyer using canvas elements. Capable of rendering text from strings and embedding a 'secret' image in another image.

There is a famous 16th century oil painting by Hans Holbein called The Ambassadors. It contains an unusual element - an anamorphic skull. When viewed straight on, this skull is illegible. It looks like an oblique stain across the painting's surface. When viewed from the correct angle however, the skull can be seen.  Similarly, Canvas Destroyer creates a pixel array which renders different images depending on the width of the area that the data is mapped into.

Vanilla JS HTML CSS

100% Original

High Voltage Analog

HVA takes a string of arbitrary length and renders it on a grid of 14 segment displays. The display can be customized by adding or removing 14 segment modules.

This is the evolution of one of the first things I built with javascript. I love archaic technology and analog electronics. It was a fun exercise in manual DOM manipulation and CSS styling.

Vanilla JS HTML CSS

Code Along

Smart Brain

The fullstack final project in the Zero to Mastery Complete Web Developer course.

When given the URL to an image, Smart Brain connects to an image recognition API which returns coordinates for faces in the image. It uses a relational database to store user information and securely hashes login credentials.

React Node Express.js Bcrypt Knex.js Postgres

Code Along / Kit

Ben Eater's 8-Bit Breadboard Computer

A programmable computer built on breadboards out of rudimentary TTL integrated circuits. It has 16 BYTES of RAM for programs and data.

This was my bridge between an interest in electronics and exposure to programmable logic controllers in the electrical trade on the one hand, and programming on the other. This kit gave me so much insight into how computers work at the hardware level. Building this literally entails defining the bit patterns (ie instructions!!) that the machine responds to.

Assembly Adruino Electronics C++

About Me

Hello, I'm Patrick! I'm a web developer with a background in Visual Art.  I earned an MFA from Western University where I later taught courses in traditional darkroom photography. I am also a licensed electrician in the province of Ontario. The common thread is that I love making things!

Skills

  • Wed Development
  • Javascript
  • React
  • HTML
  • CSS
  • Node

Interests

  • Front End
  • Back End
  • Computer Science
  • Arduino
  • Retro electronics
  • Dwarf Conifers

Status

Learning lots of things