8-Bit Studio

Easily turn dull, boring images into 8-bit!

Comment 1

Inspiration

A couple of months ago, I was getting into game development and wanted to make a browser based game, so I ended up coding it in JavaScript using the p5.js graphical library. I really wanted to make it an 8-bit style game because I thought they looked really cool, but there was just one small problem: I wasn't that good at pixel art. :(( I ended up getting help from some friends so that wasn't really a big issue, but at the time, I wished that there was some easy way to make my images look more pixelated to match the theme of the game.

AFTER I made the game, I realized how you could just shrink images and resize them to make them look pixelated. And--tada!-- that was the inspiration for 8-Bit Studio!

What it does

8-Bit Studio allows you to change the dimensions of an image you select and pixelate it! Essentially, it takes in an image, compresses it down by a factor that's controlled by the slider on the app, and then resizes it back to it's original dimensions to achieve a pixelated look.

How I built it

8-Bit Studio was made with HTML, CSS, JavaScript as the frontend and Python for the backend. For the image processing, I used Python Imaging Library (PIL). To allow for the backend to communicate with the frontend, I used eel, a Python library used to make Electron-like GUI applications.

Originally, I intended to make my GUI with Electron, but after stumbling across eel, I just knew I had to use it because the name was so funny. For the user interface, I used Figma to draft a rough sketch of where I wanted to place my buttons.

Challenges I ran into

Since eel basically instantiates a HTTP Server on the computer during program execution, it also meant I was at the mercy of the Google Chrome Developers T_T

First off, apparently I'm not allowed to use local system files in a web browser. After a couple errors and getting yelled at by the developer console, I did some finessing and made the generated images get stored in the same directory as the webpage. I just used a bit of Python magic to save the image within that directory, which successfully allowed me to use local files within my application.

Secondly, I don't think I've actually touched HTML/CSS until this weekend. As a result, I ended up spending more time that I'd like scrolling through Stack Overflow articles and googling how to align elements and position them on my app.

Third(ly?), since I was using both JavaScript and Python to do things in my application, it was a bit tricky getting them to communicate properly while structuring my code for maximum efficiency.

Accomplishments that I'm proud of

This was the first time I used more than one language in a project, and I'm proud that I still remembered that Python doesn't have semicolons. :D

But in all seriousness, I'm really proud of the fact that I have a working application. I've dabbled in a bit of p5.js to create simulations before, but I've never created an actually application that could be used offline. I've also gained a better understanding of how to use HTML/CSS/JS, and am certain that I'll be using it again one day in the future. I've very proud that I learned a lot, overcame a ton of challenges, and made an application that I'd personally use in the future!

What I learned

I learned about HTML and CSS and how to position things on a webpage and then make them look pretty. On top of learning how to use Python to do image manipulation, I've also learned how to create a desktop GUI application and have experienced the pain and suffering that comes with it.

I used to sleep on HTML/CSS because I didn't think they were real programming languages (I still don't know if they are) and have also gained massive respect for web developers! :D

What's next for 8-Bit Studio

Well, it's not much of a "studio" yet due to it's limited features. To fix that, I intend to build upon 8-Bit Studio in the future by adding a feature where users can import music and convert it into 8-bit sounding music that they could use for their own projects. I'd also like to possibly create a built-in canvas for users to create pixel art directly in the application. And as much as I love eel, I'd also like to see if there are other libraries/frameworks I could use that could potentially speed up my application.

Built With

Share this project:

Updates