Skip to content

Web app that recreates an image using only rectangles.

Notifications You must be signed in to change notification settings

sssilver/approx_draw

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

approx_draw

Web app that recreates an image using rectangles.

This uses a very simple hill-climbing algorithm to randomly place rectangles on a canvas, in a way which iteratively builds up an approximation of an image.

Algorithm

``` current approximation = empty canvas for NUM_ITERATIONS for NUM_RECTANGLES_PER_ITERATION Generate a random_rectangle. Calculate the score of (current approximation + random_rectangle). if score is better than current best score from this iteration: best_score = score best_rectangle = random_rectangle current approximation += best rectangle. display current approximation ``` The score is calculated like so: ``` score(approximate_img, target_img): score = 0 for pixel, target_pixel in approximate_img, target_img score += abs(target_pixel.r - pixel.r) score += abs(target_pixel.g - pixel.g) score += abs(target_pixel.b - pixel.b) return score ``` Its performance is O(I*R*P), where I is iterations, R is rectangles per iteration, and P is pixels in the image. This suggests that if you want a good render, try downscaling your image first! I've gotten good results with images under 200x200 pixels.

Demo

![Image showing demo of approximation](https://cloud.githubusercontent.com/assets/5407457/6572281/0d9c1cfe-c765-11e4-8060-257ff2e5d688.jpg) ![Image showing demo of approximation](https://cloud.githubusercontent.com/assets/5407457/6575528/911fc346-c783-11e4-9cce-521c92305616.png) ![Image showing demo of approximation](https://cloud.githubusercontent.com/assets/5407457/6575534/978b74fa-c783-11e4-9071-5e8ac8a7c801.png) ![Image showing demo of approximation](https://cloud.githubusercontent.com/assets/5407457/6575532/93e73046-c783-11e4-93f6-aafc898a4934.png)

To do

- Make GIFs that show the images being built up, rectangle by rectangle - Optimise the server code - why is the JS version twice as fast as the Go version? - Resize large images

About

Web app that recreates an image using only rectangles.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Go 73.4%
  • HTML 11.1%
  • JavaScript 10.8%
  • CSS 4.7%