chriscoastal / rainbeau Goto Github PK

A color theming assistant that takes inspiration from the read world.

Check out Rainbeau

Thanks for giving this project a star! ⭐️
Report Bug · Request Feature

Rainbeau is an SPA that allows users to browse through and pull colors directly from images to inspire color themes in their own work. Users cycle through randomized photos to create unique color palettes that are read from ‘color markers’ placed on the image. Markers can be dragged, added, renamed, and deleted to update the palette swatches. User created color themes are formatted for CSS stylesheets and popular UI libraries for easy export.

(back to top)

• Typescript
• React 18
• Firebase
• React Spring
• MUI
• Emotion

(back to top)

Image by Niquirk

You can check out the app and create your own color themes at Rainbeau.

I decided to build Rainbeau as an exercise to gain a more thorough understanding of the power and versatility of and the Canvas API. The idea of a palette theming app the gave some constraints to the endless possibilities of color choices, while at the same time having a strong/inspiring visual UI.

My learning from creating Rainbeau became a jump off point for working with WebGL and Three.js.

Some highlights from what I wanted to accomplish and include in the project:

• work directly with the Canvas API and read / write a 2D context to it
• write a state context that will update colors immediate as users interact with the canvas
• writing logic to translate jpeg image data from the canvas matrix
• keeping the app performant through throttling and handling animation without rerenders
• converting RGB and HEX colors
• use the Fetch API to make requests to Unsplash
• using Google Cloud Functions and Secrets Manager to store API keys
• listening for window resize events to update the canvas context and translate color marker positions

(back to top)

Image by Dima DallAcqua

There is still more work and ideas I would love to add (or go back and change 😅) to Rainbeau, but I'm happy with where the project is at in terms of what I set out to make - primarily an exercise to better understand the workings of the Canvas API. I do hope to add a few more of the features planned. The roadmap for future features includes adding auth, saving and sharing palettes between users, and the ability to upload images for local use. If you would like to help implement any, please see the contribution guidelines in the next section.

• map out basic UI
• fetch images from API
• render image to canvas
• read/write canvas image data to state
• HEX to RGB to HSL translations
• add Google Cloud Secret storage
• add draggable color markers
• map RGB colors to color names
• add customizable color name fields
• add formatted export of colors
• improve responsive layout
• change marker animation to React Spring
• update image data / marker positions on resize
• add history to state and undo/redo
• add tests
• persist state in local storage
• refactor state management to Zustand
• additional color formats
• Firebase auth / login
• save user palettes to backend
• user image uploads
• sharing color palettes
• ... 🏁

See the open issues for a list of open issues.

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you would like to make or suggest are welcomed!

If you have a suggestion that would make Rainbeau better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Note that you will not be able to run the project locally without setting up your own dev backend/cloud functions with Firebase and obtaining a key for Unsplash's API. If you would like assistance with this, please note that when opening an issue.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

I'm currently looking for new projects to work on, or an inspiring team to join for longer term. If you think we would be a good fit (or if you just want to say 'hey'), I'm happy to hear from you!

ChrisCoastal: [email protected] 🌊

Project Link: https://github.com/ChrisCoastal/rainbeau

(back to top)

• Thank you to everyone responsible for writing and maintaining the libraries, packages, and other code that are a part of this project. 🙏
• Big thank you to the artist's whose work appears in Rainbeau. Make sure to check out their work via the lin kin the app.
• Extra big thank you to Niquirk, whose image is the unofficial 'rainbeau'. Also thanks to Dima DallAcqua, Jas Rolyn, and Zhaoli Jin whose work appears in Rainbeau demo stills, video, and this README. 🌈
• Thanks, as always, to the authors of the innumerable articles, Stack Overflow answers, and other resources that allow learning to keeping going everyday. ⛑
• And to the person I catch rainbows with - thank you for your love of color and imagination.

(back to top)