xml-wizard
A webapp that demonstrates the library's capabilities.
In order to improve the code we inevitably have to consume our own APi so that it acts as proof of concept and help keeps the development morale upbeat. Functionality suggestions are greatly appreciated.
Created the /huetiful subdirectory to house the utility functions and API.
The web app currently has two main utilities palette generator and gradient generator.
These two utilities house tons of customizations to tweak your final output.
In the gradient generator we have
- Easings
- Bezier interpolation
- Spline interpolation
- Multiple color spaces
- Midpoint adjustments
- CSS code output (copy and paste)
- more to come!!!
For the palette generator:
- Base palettes which are analogous,triadic to name a few
- For every
basePalettecolor object we return the hueshifted and tonal/monochromatic and the pastel palette. - Option to check if the palette is colorblind safe or make it compliant to the condition.
- Customizations used in the gradient generator are applicable to tonal palettes.
- more coming soon!!!
Hey @prjctimg, interesting project you got here. Really cool :fire: :rocket:
I did read a few posts from the website and I don't quite understand a few things.
For instance:
- when should I consider using this library?
- what benefit can it add to my project?
Currently, I'm playing with this project and I will be happy to integrate this library and play with it. Just let me know how this library can help me.
Btw, thanks for the invite. I don't know how I can be helpful here as I don't know much about colors :sweat_smile:
Hey @prjctimg, interesting project you got here. Really cool :fire: :rocket:
I did read a few posts from the website and I don't quite understand a few things.
For instance:
- when should I consider using this library?
- what benefit can it add to my project?
Currently, I'm playing with this project and I will be happy to integrate this library and play with it. Just let me know how this library can help me.
Btw, thanks for the invite. I don't know how I can be helpful here as I don't know much about colors :sweat_smile:
Hey, there @takanome-dev . Thank you so much for taking the time to take a peek at this project!
Thanks for pointing out these questions on certain things which aren't clear with the library. I'll try to answer as best as I can.
I'll start with your first question (when should I consider using this library?)
I have tried to keep this project as general as possible so that it can have a wide range of use cases, some of which even myself am not aware of 😂 An example would be using the library to filter colors obtained from the Canvas API's getImageData method. (I'll explain in detail later)
Another use case would be when, you want to have a dynamic UI that for example has a CTA that changes color based on an image (for example the hero image or avatar) but supposedly you want the CTA button to always have a warm color. I think you can (almost) see where I'm going with this.
Looking at the library from a generative art perspective, let's say you want to constrain the kind of colors that appear in any iteration of your design, you can use the filtering functions to keep the colors that match what you want or better yet render those colors in some kind of order using the sorting utilities in the sortBy modules.
Since the library is just pure JS, you can even hook it up with your creative coding framework/library of choice like P5, Rune et cetera. I think it would be nice to add such integration guides in the foreseeable future. And of course, I'm sure, you're wondering if there's anything React /Svelte specific things you can do with it as well 😉
And for your second question (what benefit can it add to my project?)
Well, that question is subjective depending on how you choose to use the library. If you're into data visualization then you may make use of the predefined color scales in the package (borrowed from the colorBrewer project) . Or use it to spice your UI by using the utilities provided to do some wizardry with color.
All in all, I think the library's use cases are only limited by the developers creativity. I'm sure you'll find it useful for at least something if you read a bit more about color theory (on which this library's utilities are based on)
And don't worry about not knowing about colors! We're planning to have a knowledge base of small bite sized guides that explain some of the concepts of color theory applied during the making of this library.
Let me know if you need any clarifications!
Oh wow, thanks for this detailed explanation. Really appreciate it :pray: I'm definitely going to give it a try this weekend 🙂 Will let you know how it goes :wink:
Oh wow, thanks for this detailed explanation. Really appreciate it :pray: I'm definitely going to give it a try this weekend 🙂 Will let you know how it goes :wink:
Thanks again, for your contribution!
Will open a gist to share some example pseudo code tonight on how you can chain together the utilities to achieve certain end results!
Unassigning myself for now, not sure when I'm gonna be able to do this 😓
No worries mate! There's always a better time to work on open source.
Feel free to come back whenever your schedule sees it fit!
Cheers!
Get Outlook for Androidhttps://aka.ms/AAb9ysg
From: El Hadji Malick Seck @.> Sent: Sunday, February 4, 2024 10:13:31 PM To: prjctimg/huetiful @.> Cc: Dean Tarisai @.>; Mention @.> Subject: Re: [prjctimg/huetiful] A webapp that demonstrates the library's capabilities. (Issue #16)
Unassigning myself for now, not sure when I'm gonna be able to do this 😓
— Reply to this email directly, view it on GitHubhttps://github.com/prjctimg/huetiful/issues/16#issuecomment-1925901176, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZAJNB6GOMNOBB6BIHAI3ADYR7TWXAVCNFSM6AAAAAAVHCERDWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRVHEYDCMJXGY. You are receiving this because you were mentioned.Message ID: @.***>
Algo art
A collection of tools to create svg backgrounds, custom gradients and palettes
Working on it for an upcoming hackathon.
So I have created demo pages for most of the utilities by mapping the spec files to Nunjucks templates. The new docs will be in Release v2.1.0.
The page will be static (for now) just to visually demonstrate what the expected output is supposed to look like.