High-Level Project Summary
The Jovian Compositor is an in-browser image processing suite that allows users to create and save custom interpretations of the raw data provided by JunoCam. Through extensive use of WebGL shaders, the web application is able to render processed images in real-time, and provides powerful image processing tools like color channel mixing and image sharpening. The Jovian Compositor was built entirely within p5.js’s free and beginner-friendly web editor, allowing the project to be endlessly remixed with custom HTML, CSS, Javascript, GLSL shader files, and JunoCam images.
Link to Final Project
Link to Project "Demo"
Detailed Project Description
What does it do?
The Jovian Compositor allows users to interactively process raw JunoCam images into a color composite of their own design, which they can then save for further study and sharing.
How does it work?
The Jovian Compositor is a webpage partitioned into two parts: a control panel and a graphical display. The control panel holds a series of sliders to manipulate the weighted contributions of each color to the final image as well as parameters for a sharpening process that brings out the details of Jupiter's cloudscape. After adjusting the image to their liking, users can save the display as an image by pressing the 's' key.
What benefits does it have?
The program was designed with ease and accessibility at the forefront of consideration. A user needs no specialized technical skills to operate the program, as user input is gathered from an easy-to-use GUI. The Compositor was built entirely on p5js's web editor, so users with extra technical skills can enjoy remixing the entire project with their own HTML, CSS, Javascript, GLSL shader files, and JunoCam images.
What do you hope to achieve?
I'd like to share my own fascination for space with the world, and ultimately inspire the same fascination in others. I think digital photography has revolutionized the way we understand the universe through imagery, and I hope my image processing suite reveals new, interactive ways to shape our understanding of Jupiter.
How was it developed?
The wonderful JavaScript library p5js.org is responsible for orchestrating the technologies at play. Like any web page, the Jovian Compositor is an HTML document styled with CSS, both of which were generated by and editable in the p5.js editor. The control panel is more HTML & CSS, while the graphical display is a p5.js "sketch."
Crucially, the p5.js sketch uses shaders to display the color channels, the composite color image, and apply sharpening. By using shaders, the relevant computations are handled in parallel by the GPU, allowing for real-time interaction with the compositing process.
Space Agency Data
The image processing suite comes preloaded with a few sets of color channel images from JunoCam, downloaded from www.missionjuno.swri.edu/junocam/processing
Hackathon Journey
I have had a blast working on my submission for the Space Apps Hackathon! I first heard about it earlier this year, and immediately began toying around with different ideas I might bring to life. One idea that stuck with me was an in-browser programming game, where players could write some avionic software for cartoony rockets. When the challenges were released, I didn't see a way to fit that vision in with the available options.
Instead, I gravitated towards the Visualizing the Jovian System like Never Before challenge. I'm taking Computational Photography at UNC-Chapel Hill this year, and I immediately saw the potential to apply techniques we've learned in class like blurring, sharpening, and edge detection. In class, we've been using MatLab, which doesn't lend itself nicely to web-based applications. This is where I realized the main hurdle of my project: how does one manipulate an entire image's worth of pixels, without leaving the browser and without making the user wait?
The answer was shaders. In every hackathon I've participated in, my team's final project was a combination of technologies that I knew well and technologies that I had learned during the hackathon itself. For this hackathon, those technologies were p5.js and WebGL shaders, respectively. I'm really happy with how my shaders turned out, and I'm excited to take my new experience forward to keep improving and expanding the way I use them.
I'd like to thank Russell for encouraging me, and I'd like to thank my friends Babu and Connor, who reminded me to take breaks, provided me with laughs, and hunkered down through a hurricane with me over the course of this weekend. Thanks gals!
References
Data
- JunoCam images provided by NASA at www.missionjuno.swri.edu/junocam/processing
Tools
- p5js.org, a Javascript library
- WebGL shaders
Resources
- Introduction to p5.js Shaders, by Casey Conchinha and Louise Lessél, available at itp-xstory.github.io/p5js-shaders
- Mozilla's GLSL reference, available at developer.mozilla.org/en-US/docs/Web/API/WebGL_API
Tags
#shaders, #glsl, #p5js, #image-processing, #broswer