Pixel Land!

Inspiration

We were inspired by the reddit board r/place. While running, it acted as a way for users from around the globe to come together to create a constantly changing pixel-art square.

What it does

Our program seeks to achieve something similar to r/place. Essentially a user visits the site and selects a cube they would like to change and a color that they would like to change it to. They can continuously do this, as can others, ideally creating a beautiful, community-driven mosaic of color.

How we built it

Front-end: For this we utilized JavaScript, CSS, HTML, and great deal of the Three.js and jQuery JavaScript libraries! On the Three.js side, we have webgl rendering a simple plane and a 2d array of cubes. We place them appropriately apart, and (attempt) to call functions that detect when the mouse is over a specific cube and when the user clicks. On click, ideally, we send the cube index and desired cube color to the backend using the jQuery .post() command.

Back-end: I'm extremely proud of the technology behind the backend. It's entirely in Rust, leveraging the power of actix_web and tokio, a multi-threaded asynchronous runtime (no garbage collector!). By far, the most difficult part was satisfying the borrow checker while still allowing data to mutate across threads.

Challenges we ran into

JJ: Well, for one, this was a first for both of us when it came to working with any kind of web development tools. I come from a primarily desktop-based, C# background. My first time picking up HTML, CSS, and JavaScript was earlier this week, and it has definitely been a worthwhile struggle. Figuring how I wanted to implement the JavaScript into the index.html document and how to get CSS and the document working together and functioning was definitely something that was very outside of what I am used to. Another challenge was figuring out how to get the Get and Post requests functioning. For that, I discovered that the jQuery library provided some concise functions to work with. The Get function was up and running well, but their was a discrepancy between the data the front-end was passing to the backend and the data that the backend wanted. This was an issue which halted our overall progress and ultimately led to us being unable to complete it.

Fletcher: I was completely unprepared for two things; the permissiveness of JavaScript, and keeping data thread-safe in Rust. For the former, JavaScript assumes that what you're doing, is what you meant to do! I look forward to learning TypeScript to protect myself from me. For the latter, it was pretty difficult proving to the borrow checker that all data access from a multi-threaded context was statically safe. I'm much better at it now! Also, I couldn't successfully combine mouse + camera location in Three.js to raycast, in order to detect which cube the user has selected.

Accomplishments that we're proud of

We managed to establish front-end and back-end communication to a degree, we came up with something that was visually appealing, and we're ultimately very proud to have gotten as far as we did! While there is still a lot more progress to be made, this is certainly the strong foundation of a highly satisfying and fulfilling webpage.

What we learned

Fletcher: I learned how to write basic JavaScript and leverage the Three.js ecosystem. Additionally, I learned how to safely access data from a multi-threaded context, utilize auto-deref features of Rust's smart pointers, and serialize/deserialize into arbitrary structs.

JJ: In undertaking this project, I have become better prepared for getting out of my comfort zone, and, to put it in a funny way, I'd say I really learned how to better learn. I went, in a few days, from having absolutely no web development experience to understanding the basics of the most important web development tools and how to utilize these to communicate and work with a back-end system.

What's next for Pixel Land!

Well, we plan to continue moving forward with this endeavor, growing our skills and eventually making a finished product. First, we plan on making a working demo of the webpage with the basic functionality that we initially intended. Next, we plan on refactoring and optimizing the code and then expanding the data set, including more and more cubes for users to transfigure. After this, we will further ensure data integrity by backing up the cubes in a PostgreSQL database. We would also like to add an individual user timer so that a single user cannot spam color changes, and we were thinking of incorporating another button that would allow a user to select "Random" as their input. This would randomly generate a color and box selection and then give them an option to approve this change before pushing it. Finally, we will dive much deeper into the CSS side of the site and really make it look like nothing else.

Built With

• actix
• css
• html
• javascript
• jquery.js
• rust
• three.js