Skip to content

Commit

Permalink
add alternate calibation SVGs
Browse files Browse the repository at this point in the history
  • Loading branch information
@s-ol
s-ol committed Oct 19, 2024
1 parent 2222a0f commit edf181b
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 100 deletions.
23 changes: 23 additions & 0 deletions assets/calibration/0.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions assets/calibration/1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions assets/calibration/2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 1 addition & 87 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,93 +52,7 @@ <h1><img src="assets/title.png" data-i18n-alt="title" alt="Stories of online har
<p data-i18n="calibration-intro"></p>
<button data-i18n="calibration-button" id="button-calibrate"></button>
</div>
<svg id="calibration-template" viewBox="-75 -75 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>
svg {
fill: none;
stroke-width: 2px;
stroke-linecap: square;

--cyan: #00adee;
--magenta: #ed6ea7;
--yellow: #fff200;
}
.c { stroke: var(--cyan); }
.m { stroke: var(--magenta); }
.y { stroke: var(--yellow); }

.m .r, .y .l { stroke: #ed1c24; }
.y .r, .c .l { stroke: #00a651; }
.c .r, .m .l { stroke: #2e3192; }
.a { stroke: #000000; }

#calibration-samples { fill: none; stroke: #000; stroke-width: 0.2px; }
#x { stroke: transparent; }
</style>
<g class="c" transform="rotate(-60)">
<path d="M -39.315876 -22.633734 A 40 40 0 0 1 -40 -30 A 40 40 0 0 1 0 -70 A 40 40 0 0 1 40 -30 L 40 -30 A 40 40 0 0 1 39.315852 -22.633605 " />
<path class="r" d="M -0.02181706,-15.395162 A 40,40 0 0 1 39.259345,-22.731674" />
<path class="l" d="m -39.259343,-22.731674 a 40,40 0 0 1 39.28115896,7.336511" />
<path class="a" d="M 0.02181596,-15.395163 A 40,40 0 0 1 8.660254,-5 40,40 0 0 1 13.330675,7.6100789 m -26.664684,0.017761 A 40,40 0 0 1 -8.6602544,-5 40,40 0 0 1 -0.02181704,-15.395162" />
</g>
<g class="m" transform="rotate(60)">
<path d="M -39.315876 -22.633734 A 40 40 0 0 1 -40 -30 A 40 40 0 0 1 0 -70 A 40 40 0 0 1 40 -30 L 40 -30 A 40 40 0 0 1 39.315852 -22.633605 " />
<path class="r" d="M -0.02181706,-15.395162 A 40,40 0 0 1 39.259345,-22.731674" />
<path class="l" d="m -39.259343,-22.731674 a 40,40 0 0 1 39.28115896,7.336511" />
<path class="a" d="M 0.02181596,-15.395163 A 40,40 0 0 1 8.660254,-5 40,40 0 0 1 13.330675,7.6100789 m -26.664684,0.017761 A 40,40 0 0 1 -8.6602544,-5 40,40 0 0 1 -0.02181704,-15.395162" />
</g>
<g class="y" transform="rotate(-180)">
<path d="M -39.315876 -22.633734 A 40 40 0 0 1 -40 -30 A 40 40 0 0 1 0 -70 A 40 40 0 0 1 40 -30 L 40 -30 A 40 40 0 0 1 39.315852 -22.633605 " />
<path class="r" d="M -0.02181706,-15.395162 A 40,40 0 0 1 39.259345,-22.731674" />
<path class="l" d="m -39.259343,-22.731674 a 40,40 0 0 1 39.28115896,7.336511" />
<path class="a" d="M 0.02181596,-15.395163 A 40,40 0 0 1 8.660254,-5 40,40 0 0 1 13.330675,7.6100789 m -26.664684,0.017761 A 40,40 0 0 1 -8.6602544,-5 40,40 0 0 1 -0.02181704,-15.395162" />
</g>

<g id="calibration-samples">
<g data-color="[1, 0, 0]">
<use transform="rotate(-85) translate(0 -40)" href="#x" />
<use transform="rotate(-60) translate(0 -40)" href="#x" />
<use transform="rotate(-35) translate(0 -40)" href="#x" />
</g>
<g data-color="[0, 1, 0]">
<use transform="rotate( 35) translate(0 -40)" href="#x" />
<use transform="rotate( 60) translate(0 -40)" href="#x" />
<use transform="rotate( 85) translate(0 -40)" href="#x" />
</g>
<g data-color="[0, 0, 1]">
<use transform="rotate(155) translate(0 -40)" href="#x" />
<use transform="rotate(180) translate(0 -40)" href="#x" />
<use transform="rotate(205) translate(0 -40)" href="#x" />
</g>
<g data-color="[1, 1, 0]">
<use transform="rotate(0) translate(0 -20)" href="#x" />
<use transform="rotate(0) translate(0 -30)" href="#x" />
</g>
<g data-color="[0, 1, 1]">
<use transform="rotate(120) translate(0 -20)" href="#x" />
<use transform="rotate(120) translate(0 -30)" href="#x" />
</g>
<g data-color="[1, 0, 1]">
<use transform="rotate(240) translate(0 -20)" href="#x" />
<use transform="rotate(240) translate(0 -30)" href="#x" />
</g>
<g data-color="[0, 0, 0]">
<use transform="rotate(-60) translate(0 -80)" href="#x" />
<use transform="rotate( 60) translate(0 -80)" href="#x" />
<use transform="rotate(180) translate(0 -80)" href="#x" />
</g>
<g data-color="[1, 1, 1]">
<use transform="rotate(-60) translate(0 -3)" href="#x" />
<use transform="rotate( 60) translate(0 -3)" href="#x" />
<use transform="rotate(180) translate(0 -3)" href="#x" />
</g>
</g>
<defs>
<g id="x">
<path d="M -2 -2 L 2 2 M 2 -2 L -2 2" />
</g>
</defs>
</svg>
<svg id="calibration-template"></svg>
</div>

<div class="page" id="page-credits">
Expand Down
13 changes: 1 addition & 12 deletions src/calibrate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,6 @@ const names = [
'white',
];

const reference = [
[1,0,0,1],
[0,1,0,1],
[0,0,1,1],
[1,1,0,1],
[0,1,1,1],
[1,0,1,1],
[1,1,1,1],
[0,0,0,1],
];

const getCenter = (el) => {
const rect = el.getBoundingClientRect();
return [rect.x + rect.width/2, rect.y + rect.height/2];
Expand Down Expand Up @@ -65,7 +54,7 @@ module.exports = (gl, svg) => {
.reduce((a, b) => a.map((ac, i) => ac + b[i]), [0, 0, 0, 0])
.map(c => c / samples.length);
measured.push(average);
reference.push(JSON.parse(region.dataset.color));
reference.push([...JSON.parse(region.dataset.color), 1]);
}

console.table({ reference: reference.map(fmt), measured: measured.map(fmt) });
Expand Down
18 changes: 17 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,27 @@ const sliders = Object.fromEntries(
.map(n => [n, document.getElementById(`slider-${n}`)])
);
const canvas = document.getElementById('canvas');
const template = document.getElementById('calibration-template');
let template = document.getElementById('calibration-template');
let gl, program, texture;
let updateInput, cleanupInput;

let cameraCorrection = null; // localStorage.density_lens_corr && JSON.parse(localStorage.density_lens_corr);

let templateI = 0;

const loadTemplate = async () => {
const res = await fetch(`assets/calibration/${templateI}.svg`);
if (!res.ok) throw new Error(`unable to load template ${templateI}`);

template.outerHTML = await res.text();
template = document.getElementById('calibration-template');
template.onclick = async (e) => {
e.stopPropagation();
templateI = (templateI + 1) % 3;
loadTemplate();
};
};

const screenCorrection = (() => {
const colors = [0x00adee, 0xed6ea7, 0xfff200];
let matrix = [];
Expand Down Expand Up @@ -180,5 +195,6 @@ const resize = () => {
window.onresize = resize;
resize();
update();
loadTemplate();

buttons.start.disabled = false;

0 comments on commit edf181b

Please sign in to comment.