Algoritmi per le modalità di fusione dei colori: tonalità, saturazione, colore, luminosità

Question

Algoritmi per le modalità di fusione dei colori: tonalità, saturazione, colore, luminosità

#1 da (6 voti)

7

Sto lavorando su un'utilità JavaScript in cui sto provando mescolare due colori in modi diversi . Fondamentalmente voglio coprire le modalità di fusione fornite da Photoshop / le specifiche del W3C su compositing e blending (che sono essenzialmente lo stesso).

Gli algoritmi forniti in quel documento non sono troppo utili per me difficili. Innanzitutto, desidero utilizzare i canali alfa in aggiunta. Ho avuto abbastanza successo con questo, utilizzando gli algoritmi piuttosto completi di le specifiche di compattazione SVG .

Purtroppo le specifiche non coprono le modalità indicate come modalità di fusione non separabili nelle specifiche W3C menzionate che sono: tonalità , saturazione , colore e luminosità .

Le specifiche del W3C forniscono algoritmi per questo, ma quelli

a) ~~sembra essere un po 'diverso da quello che Photoshop sta usando (i canali RGB calcolati differiscono da quelli di Photoshop di circa 16 su una scala 0-255).~~ Ciò è stato in effetti causato da me rovinando il mio Photoshop impostazioni .

b) non prendere in considerazione i canali alfa dei colori.

Mi sembra di aver cercato metà del web ma non ho trovato nessuna formula bella e / o autoritaria per quelle quattro modalità di fusione .

Qualcuno ha un'idea su dove trovarli? (Preferibilmente in JavaScript, ma immagino di poter lavorare a modo mio da qualsiasi altro linguaggio di programmazione o pseudo-codice. In pratica, dovrebbe comunque ridursi a semplici calcoli matematici.)

specifications algorithms color

posta Loilo 24.11.2016 - 19:14

fonte

1 risposta

Leggi altre domande sui tag specifications algorithms color

Chi (cliente o fornitore) dovrebbe scrivere il documento delle specifiche Come implementare in modo pulito l'accesso alla funzione basata su autorizzazione

score 6 · Accepted Answer

Aggiornamento: Durante l'implementazione di tutti gli algoritmi mi sono reso conto che questo probabilmente avrebbe reso un pacchetto molto carino. Se sei interessato, puoi scaricarlo su npm .

Quindi il bravo ragazzo Christos Lytras ha messo insieme una risposta eccellente sulla mia domanda corrispondente su StackOverflow . Ne prenderò la parte vitale e la riformulerò qui:

L'algoritmo appropriato si trova in Adobe Gestione documenti - Formato documento portatile - Parte 1: PDF 1.7 specifica. Quel documento sembra anche essere la fonte per gli algoritmi nelle specifiche del W3C collegate nella domanda. La parte che fino a quel momento ci mancava è chiamata formula di composizione dei colori a pagina 328:

11.3.6 Interpretation of Alpha

The colour compositing formula

Questa formula è il link mancante per la domanda precedente.

Deve essere applicato al colore già miscelato in retrospettiva, il che significa che prende il colore di origine e di sfondo così come il composto di quelli generato dagli algoritmi già menzionato nella domanda.

Scritto in codice (JavaScript) questo compositing a colori apparirà come segue:

// The colors to blend
var source = { r: 255, g: 213, b: 0, a: 0.6 }
var backdrop = { r: 141, g: 214, b: 214, a: 0.6 }

// This example shows the result of blending 'source' and 'backdrop' with the 'hue' blending mode, according to the W3C or Adobe spec
// However the composite could also be calculated by 'saturation', 'color' or 'luminosity' mode
var composite = { r: 151, g: 224, b: 224 }

// The mentioned colour compositing formula as a function
var colourCompositingFormula = function(as, ab, ar, Cs, Cb, Bbs) {
    return (1 - (as / ar)) * Cb + (as / ar) * Math.round((1 - ab) * Cs + ab * Bbs);
}

// Calculate the opacity of the result
var resultingAlpha = source.a + backdrop.a * (1 - source.a) // Adobe PDF Format Part 1 - page 331

var result = {
    // Adobe PDF Format Part 1 - page 328
    r: colourCompositingFormula(source.a, backdrop.a, resultingAlpha, source.r, backdrop.r, composite.r),
    g: colourCompositingFormula(source.a, backdrop.a, resultingAlpha, source.g, backdrop.g, composite.g),
    b: colourCompositingFormula(source.a, backdrop.a, resultingAlpha, source.b, backdrop.b, composite.b),
    a: resultingAlpha
}

Questo è tutto.

Big shoutout a questo punto per Christos Lytras di StackOverflow che ha rotto quel problema fino a diventare abbastanza piccolo da masticare per chiunque non fosse familiare con la fusione dei colori.

Nota: Nel caso in cui desideri leggere le specifiche Adobe collegate, considera di non farlo con un lettore PDF integrato nel browser. Il visualizzatore PDF proprietario di Chrome ha incasinato i numeri di pagina che ti faranno vedere la formula nella pagina in cui ti aspetteresti di trovarla.