📷 The Holga Project

A simple experiment with HTML5 canvas that lets a user drag a photo into the browser window and apply a Holga-like filter (only black & white for now).

theholgaproject.com

First-Time Setup

After cloning the repository you will need a couple of dependencies before you start working in your local environment.

node

This project requires node.js. nvm is an easy way to install node.

# Install nvm and then node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
nvm install stable

yarn

For package management we use yarn.

# Install yarn package manager
curl -o- -L https://yarnpkg.com/install.sh | bash

# Install all package dependencies
yarn install

To see available script options:

yarn run

Starting the Dev Server

yarn run start

Upgrade Dependencies

yarn upgrade-interactive

Build and deploy to production

yarn run build && yarn run deploy

Misc.

• chmod +x ./bin/foo.sh to make script in bin executable.

To Do

• Add progress bar for file uploads.
• Add offline support.
• Color filter option.

Resources

• Robert Fleischmann's vignette filter from vintageJS
• Matt Riggott's Gaussian Blur experiments
• Canvas2Image
• Mozilla Developer Network
• HTML5 Demos
• Stack Overflow
• HTML5 Canvas Tutorials