Skip to content

Javascript canvas scanner to create scanned glitch effect from graphic files

License

Notifications You must be signed in to change notification settings

filipnathanel/canvas-scanner

Repository files navigation

Synopsis

A canvas based scanner emulation for producing glitched art

Motivation

The analog approach

The original way to create scanned effect requires a designer/artitst to possess:

  • a physical representation of scan object (photo, print, booty)
  • a scanner

The scanned effect is then produced by moving the scan object on the surface of scanner while the scanner is scanning.

Analog approach critique

As much as the human introduced 'error' is required to produce the effect, the manual movement of a scan object introduces few flaws especially from the perspective of professional application. The flaws being:

  • lack of repeatability
  • lack of fine control

And from the less professional perspective:

  • dependency on extra hardware (printer/scanner)

Development prerequisites

You need to have node.js with up to date npm to develop this project.

Development process

The project structure and build automation is based on modified Yeoman Webapp Generator

In order to start developing this project:

Clone the repo to your local machine:

git clone http://github.com/filipnathanel/canvas-scanner

Then cd into the canvas-scanner directory and execute npm install

After the npm will have finished installing you should be able to simply gulp serve to start up a server with livereload.

TODO

  • step by step tutorial on first visit
  • save / load functionality

About

Javascript canvas scanner to create scanned glitch effect from graphic files

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published