https://github.com/psenger/breakingpixelswithunicorns

breaking pixels with unicorns
https://github.com/psenger/breakingpixelswithunicorns

express nodejs pixelate

Last synced: 10 months ago
JSON representation

breaking pixels with unicorns

• Host: GitHub
• URL: https://github.com/psenger/breakingpixelswithunicorns
• Owner: psenger
• License: mit
• Created: 2017-12-23T11:39:47.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T02:30:47.000Z (almost 3 years ago)
• Last Synced: 2024-04-14T14:29:51.565Z (over 1 year ago)
• Topics: express, nodejs, pixelate
• Language: JavaScript
• Size: 438 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          

"Breaking pixels with unicorns" is a simple web app ( NodeJS with Express ) that will reads an image ( JPEG or PNG ) from a directory in the project and produce a pixelated image with HTML ```divs``` tags. 

Each html ```divs``` tag has a HTML RGBA Style value based on the pixel color depth in the image. As you can guess a large image will have a lot of pixles. So, as a fair warning, you need a small image. I have noticed with large files, you will crash the browser or even the server rendering thousands of HTML div tags.

My suggested image size is 100 by 100 and a color depth of no more than 24 bit depth.

The eventual goal of this project, is to lower the resolution and color depth of the iamge so I can turn this into a Color By Numbers project. I saw my daughter using a color by numbers app, and thought "They want 7.99 a month for that!" Ill try to make something free. Not sure how this can work yet, but It cant be that hard.

## Examples:

For example, the following image of a running fox.

![Running Fox](https://psenger.github.io/BreakingPixelsWithUnicorns/images/RunningFox.png)

Will turn into a webpage that looks like the following:

![Running Fox](https://psenger.github.io/BreakingPixelsWithUnicorns/images/ScreenShot.png)

## Running:

You need NodeJS installed and that can be pulled down from [here](https://nodejs.org/en/download/) and then 

open a terminal window or dos promot into the project and execute the following:

```bash

npm install

npm start

```

If you get errors regarding the Port that the server can run on, let me know and Ill add more documentation.

- fini -