mirror of
https://github.com/scrtwpns/mixbox.git
synced 2026-03-19 06:29:27 +01:00
134 lines
3.6 KiB
JavaScript
134 lines
3.6 KiB
JavaScript
let width = 650;
|
|
let height = 650;
|
|
let center_x = width/2;
|
|
let center_y = height/2;
|
|
let outer_radius = 300;
|
|
let inner_radius = 100;
|
|
let circle_radius = 45;
|
|
var colors = [];
|
|
var centers_outside = [];
|
|
var centers_inside = [];
|
|
var sliders_pos = [];
|
|
var mix_t = [];
|
|
let numPigments = 0;
|
|
let step = 0;
|
|
let dragged = -1;
|
|
|
|
function setup() {
|
|
createCanvas(650, 650);
|
|
background(255);
|
|
colorMode(RGB);
|
|
stroke(125);
|
|
strokeWeight(3);
|
|
|
|
colors = [color( 255,236,4), color( 252,211,0), color( 255,105,0), color( 225,35,1), color( 191,0,18), color( 128,2,46), color( 78,1,66), color( 74,0,101), color( 16,31,61), color( 13, 27, 68), color( 25, 0, 89), color( 8,34,138), color( 12, 69,118), color( 6, 54, 51), color( 0,74,41), color( 84,50,36), color( 58,39,0), color( 13,9,1), color(249,250,249)];
|
|
|
|
numPigments = colors.length;
|
|
step = TWO_PI / numPigments;
|
|
|
|
for(let i=0; i<numPigments; i++)
|
|
{
|
|
let x0 = center_x + sin(i * step) * inner_radius;
|
|
let x1 = center_x + sin(i * step) * outer_radius;
|
|
let y0 = center_y + cos(i * step) * inner_radius;
|
|
let y1 = center_y + cos(i * step) * outer_radius;
|
|
|
|
centers_inside.push( createVector(x0, y0));
|
|
centers_outside.push(createVector(x1, y1));
|
|
mix_t.push(0);
|
|
sliders_pos.push(createVector(x1,y1));
|
|
|
|
fill(colors[i]);
|
|
line(x0, y0, x1, y1);
|
|
ellipse(x1, y1, circle_radius, circle_radius);
|
|
fill(200);
|
|
ellipse(center_x, center_y, inner_radius*2, inner_radius*2);
|
|
}
|
|
|
|
}
|
|
|
|
function draw() {
|
|
|
|
if(dragged > -1)
|
|
{
|
|
mix_t[dragged] = get_t(centers_outside[dragged].x, centers_outside[dragged].y, centers_inside[dragged].x, centers_inside[dragged].y, mouseX, mouseY);
|
|
sliders_pos[dragged] = createVector(centers_outside[dragged].x - sin(dragged * step) * mix_t[dragged] * (outer_radius-inner_radius),
|
|
centers_outside[dragged].y - cos(dragged * step) * mix_t[dragged] * (outer_radius-inner_radius));
|
|
|
|
background(255);
|
|
let weights = 0;
|
|
|
|
for(let i=0; i<numPigments; i++)
|
|
{
|
|
line(centers_inside[i].x, centers_inside[i].y, centers_outside[i].x, centers_outside[i].y);
|
|
fill(colors[i]);
|
|
ellipse(sliders_pos[i].x, sliders_pos[i].y, circle_radius, circle_radius);
|
|
|
|
weights += mix_t[i];
|
|
}
|
|
|
|
if(weights > 0.000001)
|
|
{
|
|
let latent_mix = [0,0,0,0,0,0,0];
|
|
for(let j=0; j<numPigments; j++)
|
|
{
|
|
if(mix_t[j]>0.000001)
|
|
{
|
|
let latent = mixbox.rgbToLatent(colors[j]);
|
|
let t = mix_t[j]/weights;
|
|
for(let k=0; k<latent.length; k++)
|
|
{
|
|
latent_mix[k] += latent[k] * t;
|
|
}
|
|
}
|
|
}
|
|
let mixed_color = mixbox.latentToRgb(latent_mix);
|
|
fill(mixed_color);
|
|
ellipse(center_x, center_y, inner_radius*2, inner_radius*2);
|
|
}
|
|
else
|
|
{
|
|
fill(200);
|
|
ellipse(center_x, center_y, inner_radius*2, inner_radius*2);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function mousePressed()
|
|
{
|
|
for(let i=0; i<numPigments; i++)
|
|
{
|
|
if(mouseX > sliders_pos[i].x - circle_radius/2 &&
|
|
mouseX < sliders_pos[i].x + circle_radius/2 &&
|
|
mouseY > sliders_pos[i].y - circle_radius/2 &&
|
|
mouseY < sliders_pos[i].y + circle_radius/2)
|
|
{
|
|
dragged = i;
|
|
}
|
|
}
|
|
}
|
|
|
|
function mouseReleased()
|
|
{
|
|
dragged = -1;
|
|
}
|
|
|
|
function get_t (ax, ay, bx, by, qx, qy)
|
|
{
|
|
let u = createVector(bx-ax, by-ay);
|
|
let v = createVector(qx-ax, qy-ay);
|
|
|
|
let d = (u.x*v.x + u.y*v.y) / u.mag();
|
|
let t = d/u.mag();
|
|
|
|
return clamp(t, 0.0, 1.0);
|
|
}
|
|
|
|
function clamp(x, lowerlimit, upperlimit) {
|
|
if (x<lowerlimit) {return lowerlimit;}
|
|
else if(x>upperlimit){return upperlimit;}
|
|
else {return x;}
|
|
}
|