vandemjh/tiling

Redraws a given picture, built from the ground up with PHP and vanilla JS

Tiling

Tiling is an app to redraw a given picture using a variety of smaller images.

Under the hood

Python

Python scripts are used to take the average RGB value of every pixel in an array of images. The results are output in JSON which is used later on the client side.

PHP

On the server, PHP is used to try to create an image object from the URL. If that fails, the image is downloaded and converted to a png. Next, each pixel of the image is read and output to the client in JSON.

JavaScript

A Canvas element is used to display the closest image for each pixel, determined by the average RGB values.

Average Pixel JSON

The average pixel files are JSON in the following format:

{
"link to image" : [average red, average blue, average green],
...
}

Examples

tiling's Issues

Add different shades of given picture

Add a nice landing page

• Space to choose what format you would like to use (pokemon, greyscale, etc)
• Select pixel density
• Some example images to load

Add option to draw from pieces of the given image

Improve scalability

• Python scripts overlap
• PHP file management is a bit confounded
• Add descriptive folders

Add the option to scrape from any site

Add Python buildpack

Python buildpack will allow easier:

• Generation of test images
• Image averaging
• ...

Add documentation

• Add readme
• Document php file

Add emoji support

• Find emoji extract
• Add to landing page

Add percentage of each Pokemon used

Add the option to redraw using another method

• Redraw using circles
• Redraw using Pokemon
• Redraw using Emoji
• Redraw using rectangles

Add image upload option

As a user, I would like to upload my own image which is oftentimes easier on mobile than copying and pasting a link to an image.

Fix ASCII support

• Add more chars
• Fix image stretching issues

Add method for normalizing very large and small pictures

Currently, it takes upwards of 20 seconds for some large pictures and small pictures can have gaps in the tiles. Fix and un-hard code the skipLength variable to accommodate large and small pictures.

Increase buffer for downloads

• Currently only one download so two users at once messes things up