Turning photos into beautiful art with HTML5

(click image to toggle original)

Image source: Heimaey

I’ve been kicking this idea around in my head, and decided to implement it while learning how to canvas in HTML5:
simplification of an image by drawing a bunch of lines

  1. Choose a pixel.
  2. Within some range around it, find another pixel with a similar colour.
  3. Draw a semi-transparent line to it, filled with a gradient from one colour to the other.
  4. Repeat a lot.

This creates a bunch of blurring, but usually constrained within objects due to the colour threshold.


thin lines


very thin lines


reversed logic


Here’s the JSFiddle. It’s really slow.

Clipstack, or Why is it so tedious to swap two text fields?

ctrl-x, ctrl-x, ctrl-`, ctrl-`

It’s almost 2016 but the Windows clipboard still sucks, so I prototyped a program that watches the clipboard for new data, and adds it to an internal stack.
A different hotkey (ctrl-`) pops data from the top of the stack, and pastes it.

IN OTHER WORDS: Swapping two fields isn’t unbearably tedious anymore! Your clipboard can have many items in it that you can paste sequentially with the hotkey! Seems to work with any kind of data!

Download (early release) binary here!

To change the hotkey create a file called “hotkey.txt” in the same directory, and put one key (list of .NET Forms Keys here) on each line.

For example, to get Ctrl-`, the file should be:

Control
Oem3

The code is on github.

Skype Youtube Sniffer

Wrote a python bot that scrapes youtube links from Skype messages, and pretty prints the info (which it gets from pafy).

The code is on github.

hvítur

What

A webapp that takes an image and for each pixel sets
A = (255 - (R + G + B)/3)
That is, each pixel’s opacity is the inverse of its brightness (I used the simple “average value” interpretation of brightness).

So if you have something on a white background (strongly suggest clipping that background to #FFF with levels in Photoshop or something first), you can extract that onto a transparent background without the jagged edges that a simple threshold-based magic wand would create.

How

JQuery uploads the selected image via AJAX to my Flask backend, which does the above operation using PIL, and returns it as a base64 encoded string.

Try it here

The code is on github.

Trying to make sense of degree requirements

Made a thing that is basically a limited spreadsheet with tags on each row and LINQ queries.
Its purpose was to plan out my future courses at UBC, but even with this it’s really tough.

Give it a shot: Download

(C#/WPF)