Color Swatch Calculator

1

Mixture calculator mockup.zip (84.4 KB)
blank
Been working on this off and on for a while. Not a code writer, just have a visuals and a Hype Mockup (included). I will figure it out if someone can just point me in a direction. Tell me if this is even possible? Some sort of script?

Want to embed this interactive on a web page. User drags swatch from pallet of predetermined values and drops it onto well (box). Well translates color predetermined percentage and animates graph to show mixture components. Don't want to have to create unique animations for 128 colors.

Mixture components are primary colors: Red,Yellow,Blue,White,Balck.

Predetermined Colors Example: Olive Green = (Red 50%) + (Yellow 100%) +(Blue 50%)+ (Black 10%)
Orange = (Red 100%) + (Yellow 100%)
etc...

Olive_green
Olive_green1796×1196 83.3 KB

Olive_green anotated
Olive_green anotated1796×1196 198 KB

Orange
Orange1796×1198 123 KB

Mixture calculator mockup

1 Like
2

This is definitely possible, but will probably require some amount of glue code.

A lot may come down to if you favor having the data accuracy in RGB or in RYB. Starting with RYB means that you'll have fine tuned the values, and would need to convert to RGB for the computer. Starting in RGB means you can do a lot more upfront visually, but the RYB accuracy may not be what you intended. You can also supply both values for the project to fine tune paint and computer displays.

There's always multiple ways to tackle a problem, but if you favor RYB, I'd probably do something like:

  • Make animations for the R Y B W BL bars that go from 0 to 100, each on separate timelines
  • Use the Additional HTML Attributes in the Identity Inspector to either hold the RYB color values, or hold an index to a javascript object which has the values
  • On Scene Load, generate the color for each swatch by setting the CSS background-image for each element with color data
  • Either use a group with overflow scrolling and style your own scrollbar via CSS for the scrolling, or entirely use Hype elements and have the scrollbar perform an on drag to control timeline that animates the swatches to look like a scroll
  • Use an drag and drop library like this one: Hypespecific Drag and Drop Enabler
  • On drop run some code that will change the dropzone to the specified color, and then also uses the Hype API to animate the R Y B W BL timelines to some value that maps a % to a time in seconds

I would see the biggest hurdles being:

  • RYB to RGB color conversion. Since computers use RGB you'll need to find some code to convert the color spaces. (I'd also ask yourself why you actually want RYB and/or why not use CMYK which will yield better paint results?)
  • Scrollable area that has drag and drop outside of the group, so your drag/drop may be dependent on that setup
  • Swatch value entry if you want to do it manual could take a while
2 Likes
3

You say predetermined, That sounds to me that you already know all the percentages and just do not want to create 128 animations.

If each swatch uses the additional HTML attributes with one for its named colour and five more for each percent value.

Then the coding would be very simple.
You would just need to get those values on drop and animate using the setElementProperty() API for each bar accordingly

4

Here is a template and some code to maybe get you started (PigmentMixer):

1 Like
5

Thanks for your reply.
This is intended to be an interactive for art students...beginning painters. We use a primary palette of colors in the beginning. Red, yellow, blue, white and sometimes black. I'm only concerned with approximate, visual mixture guidelines. It offers them a rough guide to each quantity of paint required to arrive at an approximate color, hue.

6

Thanks!

7

Yes, I remember this...Thanks!
Still working on the project in my spare time.

1 Like
8

So had a bit of time to have a play.

The scroll is easy enough.
You just style the scroll bar with css.
And have the scrolling groups right side line up with the rounded rect on top of it so it looks like the scroll bars border.

I did come close to getting a drag to look like it went across the two groups. Chart and swatch.
But did not fully work as expected. Once scrolled the drag would be limited to a new scrollTop or something. More hassle than its worth to figure it out.

Personally think just clicking on a swatch should be the way to go anyway. So thats what this does.

Each swatch has HTML additional Attributes which are used.
Gonna be fun putting them in on all of them. I only did the first left four ( red - grey )

I think I may have some swatch code I wrote that worked of a json that populated swatches with attributes. not dug it out.

But thats the way I would go which would be easier to write out.
Use the swatch id/class name and have an array of json objects like.

{"swatch": "red","blue": "50", "yellow":"30", "white":"80", "black":"10"}

And then some code to iterate through the array/json objects and populate the swatches Additional HTML attributes.

Any way here is your update example. minus the latter.
Click the four left most swatches red-grey

swatch.hype.zip (54.7 KB)

2 Likes
9

Wow, nice work!!

2 Likes
10

Thanks.

Just noticed that I had the css

.scrollGroup{
	overflow-x: visible !important;

}

commented out. This is needed so reinstated it.

Also since the OP uses % I fixed the attributes to reflect that. and changed the math.
Makes more sense.

11

Version 2.

Main change here is to show how to make it easier to edit the data using a json file.

I used the colour json list found here https://gist.github.com/jjdelc/1868136#file-crayola-json
But any can do.

I modified the list to include ryb w bl percentages ( only first 4 with different % the others are all 0s )

[
    {
        "hex": "#EFDECD", 
        "name": "Almond", 
        "rgb": "(239, 222, 205)",
 "ryb":{
"R":"50",
"Y":"30",
"B":"10",
"W":"5",
"BL":"5"
}
 }, 
    {
        "hex": "#CD9575", 
        "name": "Antique Brass", 
        "rgb": "(205, 149, 117)",
 "ryb":{
"R":"10",
"Y":"40",
"B":"40",
"W":"0",
"BL":"5"
}
 },

In this list there are 133 colors. So I made sure there are 133 swatch rectangles.

The initSwatch() function.
Will set the colour of each swatch and add the ryb percent values to it's dataset and also add the colour's name.

The only addition to the original code is to show the colour name.

The json file can be edited in any text editor.

swatch_2-1.hypetemplate.zip (66.6 KB)

4 Likes
12

Yes! Thats great! It'll take me a while to understand this, but I'm going to try and tweak everything for my own use if that's ok? I work full time so it's been slow going.

1 Like
13

Thats what it is there for👍
Just let me know if you want something explained.

14

And let me also know when you are ready to then look at this one.

2 Likes
15

Pretty great code pen here… not an exact fit but neat:

4 Likes