diff --git a/assets/calibration/0.svg b/assets/calibration/0.svg index 867a15a..36efd98 100644 --- a/assets/calibration/0.svg +++ b/assets/calibration/0.svg @@ -1,22 +1,13 @@ - - - + + - - - - + + + + - + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/calibration/1.svg b/assets/calibration/1.svg index 6f9bbec..b272e64 100644 --- a/assets/calibration/1.svg +++ b/assets/calibration/1.svg @@ -1,7 +1,6 @@ - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/calibration/2.svg b/assets/calibration/2.svg index 3183d8d..5fbe1f1 100644 --- a/assets/calibration/2.svg +++ b/assets/calibration/2.svg @@ -1,9 +1,7 @@ - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/messages.csv b/assets/messages.csv new file mode 100644 index 0000000..88a0b37 --- /dev/null +++ b/assets/messages.csv @@ -0,0 +1,17 @@ +key,en,de +calibration,calibration,kalibrierung +calibration-button,calibrate,kalibrieren +calibration-intro,Align the following scheme to the coloured version on the poster and press Calibrate.,Richte das Bild an dem bunten Symbol auf dem Poster aus und bestätige um das Bild zu kalibrieren. +credits,credits,impressum +credits-back,back,zurück +credits-designed,Designed by,Designed von +credits-developed,Developed by,Entwickelt von +label-c,digital spaces,digitale räume +label-m,motivations,motivationen +label-y,relationships,beziehungen +language-code,en,de +language-name,English,Deutsch +start-button,start,start +start-cta,Press start when you are ready.,Drücke auf start wenn du bereit bist. +start-intro,"To explore the poster, give access to your phone camera and calibrate it.",Gib den Kamerazugriff frei und kalibriere die Farbwerte um das Poster zu erforschen. +title,Stories of Online Harassment,Stories of Online Harassment diff --git a/assets/style.css b/assets/style.css index 7ca45f3..2a256cc 100644 --- a/assets/style.css +++ b/assets/style.css @@ -92,6 +92,9 @@ canvas, .page { #page-calibration svg { max-height: 90vh; } +#calibration-samples { + visibility: hidden; +} button, .button, .button-text { line-height: 20px; diff --git a/src/calibrate.js b/src/calibrate.js index 341dc98..ca69e11 100644 --- a/src/calibrate.js +++ b/src/calibrate.js @@ -1,22 +1,11 @@ const math = require('mathjs'); -const names = [ - 'cyan', - 'magenta', - 'yellow', - 'CM', - 'MY', - 'CY', - 'black', - 'white', -]; - const getCenter = (el) => { const rect = el.getBoundingClientRect(); return [rect.x + rect.width/2, rect.y + rect.height/2]; }; -const fmt = ( col ) => { +const fmt = (col) => { const [r, g, b] = col.map(c => Math.floor(c * 255)); const num = r << 16 | g << 8 | b; let hex = num.toString(16); @@ -24,37 +13,52 @@ const fmt = ( col ) => { return hex; }; -module.exports = (gl, svg) => { - const regions = svg.getElementById('calibration-samples'); +const parse = (col) => { + if (col.length !== 7 || col[0] !== '#') throw new Error(`invalid color string '${col}'`); + const rgb = parseInt(col.slice(1), 16); + const r = (rgb >> 16) & 0xff; + const g = (rgb >> 8) & 0xff; + const b = (rgb >> 0) & 0xff; - const reference = []; - const measured = []; + return [ + r / 0xff, + g / 0xff, + b / 0xff, + 0, + ]; +}; - const pixels = new Uint8Array(4); +module.exports = (gl, svg) => { + const samples = svg.getElementById('calibration-samples'); - for (const region of regions.children) { - const samples = []; + const pixels = new Uint8Array(4); - for (const sample of region.children) { - let [x, y] = getCenter(sample); - y = window.innerHeight - y; + const readings = {}; + for (const sample of samples.children) { + let [x, y] = getCenter(sample); + y = window.innerHeight - y; - gl.readPixels( - x, y, - 1, 1, - gl.RGBA, - gl.UNSIGNED_BYTE, - pixels - ); + gl.readPixels( + x, y, + 1, 1, + gl.RGBA, + gl.UNSIGNED_BYTE, + pixels + ); - samples.push(Array.from(pixels).map(n => (n/255))); - } + const output = sample.attributes.fill.value; + readings[output] = readings[output] ?? []; + readings[output].push(Array.from(pixels).map(n => (n/255))); + } - const average = samples - .reduce((a, b) => a.map((ac, i) => ac + b[i]), [0, 0, 0, 0]) - .map(c => c / samples.length); + const measured = []; + const reference = []; + for (const output of Object.keys(readings)) { + const average = readings[output] + .reduce((a,b) => math.add(a,b)) + .map(c => c / readings[output].length); measured.push(average); - reference.push([...JSON.parse(region.dataset.color), 1]); + reference.push(parse(output)); } console.table({ reference: reference.map(fmt), measured: measured.map(fmt) }); diff --git a/src/index.js b/src/index.js index 219f21b..b2327bb 100644 --- a/src/index.js +++ b/src/index.js @@ -39,7 +39,7 @@ const loadTemplate = async () => { template = document.getElementById('calibration-template'); template.onclick = async (e) => { e.stopPropagation(); - templateI = (templateI + 1) % 3; + templateI = (templateI + 1) % 4; loadTemplate(); }; }; diff --git a/src/shaders/cmyk.frag b/src/shaders/cmyk.frag index 9abc575..382ccca 100644 --- a/src/shaders/cmyk.frag +++ b/src/shaders/cmyk.frag @@ -34,6 +34,6 @@ void main() { col = smoothstep(stepRange.x, stepRange.y, col); col = mix(vec3(0), fadedcol, dot(col, lensColor)); - gl_FragColor = vec4(col, 1.0); + gl_FragColor = vec4(1.0 - col, 1.0); gl_FragColor.rgb = mix(gl_FragColor.rgb, texcol, globalMix); }