I honestly don't play a lot of Minecraft, but something that really interests me is the things people create using the game as a medium. Thousands of hours are sometimes dedicated to create works monumental sculptures and drawings using the blocks the game provides. To aid in the creation of these works, several fan-made tools have been developed to automate and give creators even more control. One of these being the Minecraft image converter which takes images are converts them into a tool users can edit using blocks, and then port to the game. I was mesmerized by the images created using it, and thought it would be cool to see something like it in motion, more aimed towards the act of conversion than the output, behaving almost like a Snapchat filter.

What it does

The site accesses the users camera, divides it into 16x16 tiles, determines the average color of each pixel within the tile, and replaces it with a 16x16 Minecraft block with a similar average color.

How I built it

The site is built upon vanilla JavaScript/HTML/CSS, heavily utilizing the HTML5 canvas to calculate the colors and transpose blocks. To determine the colors of the individual blocks, and organize them in an easy to use JSON file, I used Python.

Challenges I ran into

I hadn't worked with canvases much at all prior to UB Hacking, so figuring out the logistics/syntax was a major early issue. I also had to strike a balance between adding more blocks/frames per second, without overloading the code.

Accomplishments that I'm proud of

I think it's pretty, in like a weird way.

What I learned

I learned how to utilize the canvas in JavaScript, and have a better sense of how to manipulate graphics using code (on a kinda basic level)

What's next for Minecraft Camera

Hopefully a more user friendly UI, possibly a better block matching algorithm, maybe a way to keep faces / bodies from being turned into Minecraft blocks.

Share this project: