PKSL

PKSL is a web app that transforms an image from the user's camera into pixel art.

Comment

Inspiration

"We were inspired by the art style of waneella, a digital artist who creates pixel art of realistic scenarios, and the recent popularity of the app Lapse."

What it does

"Our web app, PKSL, takes feed from the user's camera and, after a photo is taken, processes the image into a pixelated version that the user can download to view."

How we built it

"We created a progressive web app utilizing React and a JavaScript backend. We then implemented various image processing techniques such as cel shading, color quantization with various filters, including but not limited to mosaic filtering, bilateral filtering, and Sobel filtering. We used custom-created CSS to help our front-end look more professional, and more functional. Our final product combined cel shading, mosaic filtering, and a final color filter to create a smooth final pixelated image."

Challenges we ran into

"Our team was accustomed to working with graphics technology in a 3D environment, where vector and color data are readily provided. However, in this situation, only one 2D image was available for image processing. Thus, we ran into challenges trying to implement the same image processing techniques work for a 2D environment instead of a 3D one. In addition, much of the research required for the project was very difficult to understand and implement, and we ran into technical issues such as needing to try numerous different color palettes and device incompatibility."

Accomplishments that we're proud of

"We successfully developed an image processing model that is fairly modular where we can change a number of parameters, such as pixelization strength, color palettes, image resolutions, and more. Our project is very minimalistic in nature in that the user interface is very clean and easy to use."

What we learned

"Throughout this project, our team learned how to collaborate together in a way that catered to each of our strengths. We learned how to integrate various front-end and back-end technologies, such as React, NodeJS, and OpenCV. Additionally, we learned how to process raw image data by building various filter functions in native JavaScript."

What's next for PKSL

"The next step for PKSL is to implement image processing utilizing computer vision through OpenCV. We have already created an implementation that utilizes computer vision and machine learning to perform edge preservation, stylization, and color quantization. In the future, we can further utilize OpenCV to add in details similar to Nvidia's DLSS software while getting a closer stylization aesthetic to our original inspiration. Furthermore, we could utilize noise reduction algorithms to clean up edges and false positives that are currently present within our final product."

Share this project:

Updates