search

mysticsymbolic / mysticsymbolic.github.io

Fun with procedurally generated visionary art!
https://mysticsymbolic.art/
Other
52 stars 11 forks source link

Colorways for Symbols #27

Open ninapaley opened 3 years ago

ninapaley commented 3 years ago

We should think of ways to get a range of harmonious colors in a group of symbols. Should I create some palettes to be applied at random? Could a user choose some "key colors" (by setting the stroke and fill sliders already there) and then have something generate a range to color the rest, as per "Triad," "Split Complementary," "Square" and "Complementary" at https://color.adobe.com/create/color-wheel ?

ninapaley commented 3 years ago

Hey @toolness , my friend @mittimithai is willing to work on the color challenge. I don't know how to formally invite him through GitHub, but maybe this comment is a start.

ninapaley commented 3 years ago

I think @mittimithai is stymied, so I'm just gonna put out more color ideas in the hopes @toolness or @webaissance picks them up.

Here is a palette I generated at https://color.adobe.com/create/color-wheel with the "triad" setting: palette Below, I applied these colors to an svg from the Creature Maker (sorry Moho gunged up some of the shapes, it does that): color test - Frame 0

Theoretically, a user could select a single key color and the software could color a set of symbols using a somewhat harmonious variation. And then, you know, colors! Any generated palettes would need both "darks" and "lights". 3 of each (3 darks and 3 lights) would be grand, then it could just fill darks and lights according to black and white areas and the results would (I'm guessing) look decent.

Of course it could also just randomly generate a key color and associated palette.

Thoughts?

mittimithai commented 3 years ago

Apologies for the delays... It's taken me a bit to get into JS world again...Ima gonna try to do something tonight, if I don't succeed, likely it will take me longer.

On Sun, Mar 14, 2021 at 4:37 PM Nina Paley @.***> wrote:

I think @mittimithai https://github.com/mittimithai is stymied, so I'm just gonna put out more color ideas in the hopes @toolness https://github.com/toolness or @webaissance https://github.com/webaissance picks them up.

Here is a palette I generated at https://color.adobe.com/create/color-wheel with the "triad" setting: [image: palette] https://user-images.githubusercontent.com/79212762/111088061-47b69700-84f3-11eb-8da6-93c4a4161288.png Below, I applied these colors to an svg from the Creature Maker (sorry Moho gunged up some of the shapes, it does that): [image: color test - Frame 0] https://user-images.githubusercontent.com/79212762/111088072-5d2bc100-84f3-11eb-95cc-7a3f05df7e54.png

Theoretically, a user could select a single key color and the software could color a set of symbols using a somewhat harmonious variation. And then, you know, colors! Any generated palettes would need both "darks" and "lights". 3 of each (3 darks and 3 lights) would be grand, then it could just fill darks and lights according to black and white areas and the results would (I'm guessing) look decent.

Thoughts?

ā€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toolness/mystic-symbolic/issues/27#issuecomment-799002239, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMOEZOLPNFSJLR32SBG44TTDVCCXANCNFSM4YBEUKLA .

ninapaley commented 3 years ago

Here's how I'm thinking about color at the moment: colors are just tinted values. I've designed the symbols with values of black and white, on a background of mid-gray. So we have light, dark, and medium. Below, I fiddled with the sliders and came up with a color trio that pleased me: red gold blue The blue has the darkest value, the gold the lightest, and the red/brown is in between. The hues also contrast with each other, but all 3 are muted. When I made Sita Sings the Blues I thought of colors as just tinted grays, and that mindset worked pretty well for me. The results appear colorful, even though most of the colors are very un-saturated. For MysticSymbolic, I think as long as we have enough value range for distinguishable contrast, it'll look good. There's probably a way to express the blue-gold-red palette above as a numeric range, and other colors within that range could be added. Like the values would always be 3 equidistant points within whatever range is specified ("black" would be darker, "white" would be lighter, but they might be far from absolute black and white, all mid-range grays that only contrast noticeable when adjacent to each other). And the hues needn't all have exactly the same level of saturation, but could be within a specified range of acceptable saturation that could vary from palette to palette. But @mittimithai knows more about the technical aspects and expressions of color than I do!

ninapaley commented 3 years ago

I like these colors too: brownbeigeblue

webaissance commented 3 years ago

Great ideas and conversation. I somehow missed this until now. I am also working on getting all set up to be able to meaningfully contribute. I'm working on publishing my experimental instance of mystic-symbolic to Github Pages - in order to show some things before merging...

As far as the colors Nina - what about letting people create color palettes and saving them for future use. We can also provide tools that generate good color palettes, and also provide some suggested color palettes.

I'll be chiming in more soon.

-Dave, Webaissance

On Wed, Mar 17, 2021 at 7:54 PM Nina Paley @.***> wrote:

I like these colors too: [image: brownbeigeblue] https://user-images.githubusercontent.com/79212762/111566526-4ee7da00-876b-11eb-85a9-bcbc1a541dc3.png

ā€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toolness/mystic-symbolic/issues/27#issuecomment-801578051, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAURRAU34UL2MI4WXFXUCDTEFTO5ANCNFSM4YBEUKLA .

ninapaley commented 3 years ago

As far as the colors Nina - what about letting people create color palettes and saving them for future use. We can also provide tools that generate good color palettes, and also provide some suggested color palettes. I'll be chiming in more soon.

Sounds good to me! I do want the program to be able to auto-generate pleasing colors without human intervention, but human intervention should also be as easy as possible.

ninapaley commented 3 years ago

Here are some more saturated colors: tealpurpleyellow

ninapaley commented 3 years ago

I tried a wacky experiment: dropping a totally saturated primary-colors rainbow into the repository. It worked: Rainbow Tower It looks quite striking amidst the gray. It is unaffected by the fill and stroke color sliders. Maybe I'll keep it. Maybe it has some potential for game creation: find the rainbow! Extra luck if it shows up. Rainbow Tea Rainbow Mogens

ninapaley commented 3 years ago

Thanks for meeting today everyone! Thinking about strokes, fills, and backgrounds, it occurred to me that the background wouldn't have the color "perturbations" that @mittimithai talked about. Then I thought, but the background could have a gradient, which is a perturbation. Then I thought, there are probably a lot of ways to perturb a background. Like have more symbols in it, just in a really narrow color range. Then I made this example: goatwaves - Frame 0 I think this looks good! The rule I applied was: background = narrow color range, less saturation; foreground = slightly more color range, more saturation. Background and foreground colors are also contrasting, from separate sides of the color wheel. I like narrow ranges of colors grouped against different, complementary narrow ranges of colors.

toolness commented 3 years ago

Whoa cool!

Also I just added a "randomize colors" button in #68. @mittimithai, feel free to take a look at it and modify anything you want!

ninapaley commented 3 years ago

Whooooaaahhh @toolness I love the randomize color button!!! Extra dimension of fun!

People with jobs say meetings suck, but ours sure was productive.

webaissance commented 3 years ago

šŸŒžšŸŒžšŸŒž

On Tue, Mar 30, 2021, 6:11 PM Nina Paley @.***> wrote:

Whooooaaahhh @toolness https://github.com/toolness I love the randomize color button!!! Extra dimension of fun!

People with jobs say meetings suck, but ours sure was productive.

ā€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toolness/mystic-symbolic/issues/27#issuecomment-810679475, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAURRHVAUCVNY6AGTGIZDDTGJZCTANCNFSM4YBEUKLA .

ninapaley commented 3 years ago

I'm already impressed by how often totally random color combos are non-terrible. I expected they would be awful most of the time, but in practice about half of them are tolerable, and many are even delightful.

ninapaley commented 3 years ago

Hey @mittimithai and @toolness , the colors have been less functional lately; it looks like the randomizer is sampling only from a small set of colors (256 myabe?). This results in even less contrast. A few times I've gotten all black: stroke, fill, and background all 000000. I figure this is going to get fixed as color harmony rules are developed, but right now it's a step down from random RGB sampling.

webaissance commented 3 years ago

Might I suggest having an option for different color randomizer modes: a) Totally random (original method) b) mittimithai method/s c) potentially other methods (grayscale only, super saturated, pastel, custom palettes, etc)

I again want to emphasize how excited I am about this project and I want to thank you all for your patience as I get up to speed on the development process. Any day now I'm going to have some updates to share with the team and I will begin adding updates to the code.

In addition - I'll be making updates to the website - which I've already started. I will be working on:

I won't add any pages to the website menu until they're approved by our team. First I will share them with the team for review.

If you have more ideas for Mystic-Symbolic.art https://mystic-symbolic.art/website pages let me know. Here are some ideas:

-Dave / Webaissance

On Sat, Apr 10, 2021 at 3:58 PM Nina Paley @.***> wrote:

Hey @mittimithai https://github.com/mittimithai and @toolness https://github.com/toolness , the colors have been less functional lately; it looks like the randomizer is sampling only from a small set of colors (256 myabe?). This results in even less contrast. A few times I've gotten all black: stroke, fill, and background all 000000. I figure this is going to get fixed as color harmony rules are developed, but right now it's a step down from random RGB sampling.

ā€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toolness/mystic-symbolic/issues/27#issuecomment-817213310, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAURRF6JE4FNMHX54QEQM3TIDJ27ANCNFSM4YBEUKLA .

mittimithai commented 3 years ago

Ok glad to see I am not crazy, I thought it was rolling black way way too much. Thanks to Atul's color roll preview, pretty sure that is gone. How does the latest 'feel'? Take a look at the samples under debug and see if they make sense. I've sampled in a small grid (stepsize=0.1, instead of 1)...they look random enough to me, but maybe I am missing something.

Suspect there will be a few more iterations/fixes...if they still suck compared to RGB after that, we should sample RGB unifromly.

ninapaley commented 3 years ago

Thank you @toolness for the color algorithm dropdown menu! I immediately confirmed that random RGB looks better than random CIELUV. Can we have RGB the default for now? Compared to the random CIELUV images I was looking at last night, this morning's random RGBs look better. But when I test them back to back in the dropdown menu, I don't notice much difference, making me wonder if the dropdown menu does not yet correspond to actual RGB vs CIELUV colorspaces. Maybe it does! In which case, I am humbled.

I'm very eager to see how rule options added by @mittimithai look!

ninapaley commented 3 years ago

"Threevals" is definitely an improvement, @mittimithai ! Thanks!

ninapaley commented 3 years ago

@mittimithai I'm really digging the new color algorithms! Can you please try the following:

  1. Extend the range of value variation so all 3 values are still at least 25% apart, but can be even further apart. So we could conceivably have black and almost-black show up occasionally.
  2. Combine threev15, threev30, threev45, threev60, threev75, and threev90 into one thing that picks a random first hue, generates a second hue between 15 and 90 (or 15-120, which I'd also like to see), and then a third hue 180Ā° from the midpoint between the first two hues.
  3. A second hue algorithm that picks hues 30-30-30, ie picks a random hue, second is 30Ā° from that, third is 30Ā° from that. I'd like to also see 60-60-60. In fact, what it should do is generate a random number, n, between 1 and 120, and then pick 3 hues nĀ° apart from each other. Yes! I'd like to see that.
mittimithai commented 3 years ago
  1. Yep, I can do that. I did actually and what I saw was that I didn't like the drop off in chroma you get when sampling really bright/dark values. Right now they the values ("lightness") is set like this: let L1 = rng.inInterval({ min: 10, max: 25 }), L2 = rng.inInterval({ min: L1 + 25, max: 60 }), L3 = rng.inInterval({ min: L2 + 25, max: 85 });

So L1 is between 10 and 25, L2 is between (L1+25) and 0, L3 is between (L2+25) and 85.

  1. The current cleaned up "threevals" is doing this precisely (I deleted the older ones as cruft since this sort of subsumes them, but they can be readded easily).

  2. Sure I can add a new one for this.

Maybe best thing to do is have a quick meeting once these are in to play with them either by screen sharing or cloning my repo temporarily to refine some of the values?

ninapaley commented 3 years ago

Thanks @mittimithai ! I'm finally playing with the new "threevals." I see the other threev options disappeared, but luckily I still have the older version loaded in another window so I can compare.

I totally want to see the hue algorithm described in point 3. Now here's a dream: could we have a slider for hue distance? Or hue angle, or whatever it's called? And another for saturation? I'd really like to bring down saturation, but I know others like bright garish horrible color combinations. These sliders would be unlike the individual color pickers we have now; they would adjust all 3 colors at once, without changing the first, random hue.

In fact the ideal color thingy might be 3 sliders and one color picker: SLIDER 1: hue angle/hue distance. The degrees of separation of hues. This could go down to zero, which would make the image 3 shades of the same hue. SLIDER 2: saturation. This would allow the user to tone everything down or up. (Is the saturation currently the same on all 3 colors? What is the current saturation range?) SLIDER 3: lightness range. This would resemble "contrast." The widest range would make the lightest color appear white, the darkest black, and the middle colored. Narrowing the range would increase the chroma and decrease the contrast. A range of 0 would have 3 different hues of exactly the same value, so you could barely tell them apart. Ideally this sider would have 2 points, one for bottom (black) and one for top (white), and the distance between them would be the range. KEY COLOR PICKER: A color picker substituting the algorithm's current random selection. (If the user picks a really dark color, would that throw everything else off? Maybe this should just be a hue picker, since saturation and lightness are controlled by sliders?)