search

grgrdvrt / poulette

Proof of concept for a color mixer interface
MIT License
181 stars 4 forks source link

alternative blending algorithms #2

Open micouy opened 3 years ago

micouy commented 3 years ago

very cool project. it inspired me to experiment with different blending algorithms. i created something similar in p5.js, have a look here.

in one version i just calculate a coefficient (1 / distance)^power for each point at each pixel and the resulting color is a sum of point_color * normalize(point_coeff). normalize prevents the sum of coefficients from being greater than 1.

in the second version the resulting color is something like a sum of point_color * normalize(sum_of_coeffs - point_coeff). you can drag points, pick a color by clicking anywhere (the output is in the console) and add a new point by double-clicking.

one-over:

one over

subtract:

subtract

micouy commented 3 years ago

i tried to model the transitions in geogebra but they don't behave exactly like i expected them to: https://www.geogebra.org/3d/wws3s4yh

grgrdvrt commented 3 years ago

You version is gorgeous and the geogebra visualization is super interesting! I'll try some variations on the blending method and the color space some day. It seems I'll have to abandon the WebGL implementation and its triangles-based blending at some point...

micouy commented 3 years ago

thanks! here's a cool effect i managed to recreate (-ish). i think this was the one-over version, it creates these sharp edges when you move the slider to the right and the distance between two source points is small.

image image

dackdel commented 3 years ago

also made me think of this https://meshgradient.com/

micouy commented 3 years ago

WOW! it's so cool. do you have any idea how it works? i can't find anything about their algorithm but i saw that photoshop has a similar tool.

EDIT: someone implemented it in shadertoy https://www.shadertoy.com/view/7sSGzh

dackdel commented 3 years ago

no idea unfortunately. the shadertoy link is que cool