I am an art teacher and more of an illustrator/animator and (very) limited code experience I use hype for animations and interactive designs.
I wanted to give my students a visual mixing guide. I envision a sample set of colors that I assign mixing percentages. These are not RGB colors, these are physical pigments and I have "ball-park" percentages for each mixture.
Anyway, as the student picks a color the result percentages are displayed in a kind of bar graph.
I have searched for similar examples but can't find anything that I can reverse engineer...any ideas? Examples enclosed. Thanks!
I think the first question to help is how is this color chosen? Is it from a list or a freeform color wheel where they can choose any color?
The easiest route is from a specific list, then with a little bit of code you could pre-determine the mixing percentages which would at least cut down a little bit on the math.
Ultimately it looks like you are doing a single stacked chart. There might be some fun ways to do this without code using Hype's UI, but the easiest way would be to simple make <div>s with an inline-block style that has a width specified. Something like:
<style>
.color-bar {
width: 300px;
height: 30px;
}
.color-segment {
display: inline-block;
height: 100%;
padding: 0px;
margin: 0px;
}
.magenta-color {
background-color: magenta;
}
.cyan-color {
background-color: cyan;
}
.yellow-color {
background-color: yellow;
}
</style>
<div class = "color-bar">
<div class = "color-segment cyan-color" style="width: 50%"></div><div class = "color-segment magenta-color" style="width: 25%"></div><div class = "color-segment yellow-color" style="width: 25%"></div>
</div>
Given the above bit of code, you would just need to set the width percentages to what you want. The arrows to go along with it could work in a similar manner.
I am a bit confused though by your sample images; shouldn't these be in a CMY colorspace if you are using pigments?
Depending on your color picker, you may need to convert a monitor's RGB additive color space to a CMY subtractive pigment color space. A cmyk() color selector is proposed for the next version of CSS but does not exist for any browsers yet. Luckily the formula to convert appears pretty simple:
C = 255 - R
M = 255 - G
Y = 255 - B
Where this is assuming 8-bit colors values represented from 0 to 255.
(from http://www.huevaluechroma.com/092.php)
If you intend to use a RYB color space instead, the conversion is a bit more complicated and a topic of research 
. I found this page which has links to a paper and code to do the conversion:
https://www.daveeddy.com/2014/07/01/red-yellow-and-blue/
For other folks less familiar with the distinction (sadly basic color theory is not well covered in most schools!), I have been a fan of this video:
(while ranty and needs a language warning, has a pretty good overview on color science!)
2 Likes
Thanks!
As an artist who worked in graphic design I learned that the monitor will show 256 shades of gray. But for traditional media like paint it is limited to around 11 shades of gray (practical purposes).
The sample colors displayed will be from a chosen list of colors and I will "translate" there "equivalent" mixing percentages from digital to physical using what I know about mixing colors and an approximate resemblance of the physical colors. It will be up to the student to finally zero in on exact hues and values. They will NOT try and match the swatches they see on screen but rather actual color samples I supply to them. It's all analog, best guess. The percentages displayed are just to get them started with approximate amounts of each pigment. Its a color mixing exercise...sort of.
1 Like
Gotchya!
If it is a small list you could potentially even do this as different scenes in Hype or via different timelines that control the width of elements (and position of the arrows). With the notion of timelines with relative keyframes you could make it into a pretty slick animation that effortlessly goes from one state to another.
If it is more than a dozen or so that approach becomes a bit unwieldy, and you'd probably want to use some code that has a mapping of the color to the percentages, and then use the above HTML code to set the % on those elements.
Yes, thank you,
Great suggestions. Eventually I want to map dozens (or hundreds) of colors, arrange them into a color wheel and as the student mouse over the percentage graphics animate change.
Each color mixture will be imprecise and is just so they can get started. I will have to mix these colors by hand and give impression as to what percentages are used.
Thanks for your help
Based on:
https://knowpapa.com/cmt/
Download:
PigmentMixer.hype.zip (37,7 KB)
Hope this helps (and still needs some styling, though)!
4 Likes
Wow that's cool! Thanks! You have inspired me to better my education learning HTML5, and related code work.
I am an amateur at writing HTML can you suggest a path to better understanding the functions you built into this document?
Should I take an on-line class on writing HTML5? I work full time in a factory so it's not possible for me to go to school.
1 Like
This will be your main obstacle. If you have the energy to learn after a long day at work do it! And you will be amazed how much time you have if you stop watching TV. In your case, the internet is your friend. Horizontal knowledge transfer was enabled through the internet: bottom line there is the library of Alexandria at your fingertips. You just have to take the time to use it. Taking time for teaching is a great blessing disguised as you are not only teaching others you're employing a mindset for learning and there is no ultimate knowledge so that mindset is the key ingredient for self betterment and understanding. Revisiting a topic more than once is also beneficial as it opens the topic even deeper as each time you revisit you have personally grown a bit (and understand it differently or deeper).
Other reading this might recommend other things. Somebody?
The internet is vast…
I like to recommend https://scrimba.com/ (mostly free!)
Perfekt Classic Observer Pattern 
Yeah Baby! 
This is what I have come up with so far. I can't be sure if I can just make one scene with different timelines, or if I need to make a new scene (as I have done) for every color change.
Mixture indicator proto.hype.zip (77.5 KB)
Eventually i will need to have a mixture result for every color...something like this...
1 Like
Awesome!
If the elements are the same between all animations, you could definitely go the timeline route. If in showing the colors the elements are different you'd probably want differing scenes, though this means it may be harder to edit and I'd encourage the use of symbols for common elements so the changes will occur on all scenes.
In reality with that many colors it will be hard to make changes and require a lot of work -- this is where programming tends to shine.
1 Like
@Kilgo not sure if this would help get some more ideas but Golden Artists paints has this really cool digital paint mixer. As a fellow artist, I've marveled over how it works many many times!
1 Like