Add Greyscale Transformation entry
It is added to the list of experiments. Its link is also added in other pages.master
Muhammad Rifqi Priyo Susanto
parent
ff79e1e1a1
commit
6fe0a04efc
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li class="active"><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,202 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Greyscale Transformation - Experiments - srifqi</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="author" content="srifqi">
|
||||
<meta name="description" content="An example of greyscale transformation in digital image processing">
|
||||
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
|
||||
<style>
|
||||
noscript, .noscript {
|
||||
background: #fff9cC2;
|
||||
border: 4px solid #fff176;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
noscript, .noscript, noscript *, .noscript * {
|
||||
font: 12px sans-serif !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px sans-serif;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.figures {
|
||||
margin: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.figures img, .figures canvas {
|
||||
display: inline-block;
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
input[type=range], #slider {
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@media (max-width: 832px) {
|
||||
body {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS polyfill for MathML */
|
||||
|
||||
msub>*:nth-child(2) {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
msup>*:nth-child(2) {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Greyscale Transformation</h1>
|
||||
<noscript class="noscript">
|
||||
For full functionality of this site, it is necessary to enable JavaScript.
|
||||
Here are the <a href="https://www.enable-javascript.com/" target="_blank">
|
||||
instructions how to enable JavaScript in your web browser</a>.
|
||||
</noscript>
|
||||
<article>
|
||||
<h2>Negative transformation</h2>
|
||||
<p>Below is an example of negative transformation (invert color), i.e. <math><mi>T</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow> <mo>=</mo> <mrow><mn>1</mn> <mo>-</mo> <mi>x</mi></mrow></math> where <math><mi>x</mi> <mo>∈</mo> <mrow><mo>[</mo><mn>0</mn><mo>,</mo> <mn>1</mn><mo>]</mo></mrow></math>.</p>
|
||||
<div class="figures">
|
||||
<img id=imgA src="torii.png">
|
||||
<canvas id=cA width=256 height=256></canvas>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Logarithmic transformation</h2>
|
||||
<p>Below is an example of logarithmic transformation. It uses <math><mi>T</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow> <mo>=</mo> <mrow><mi>c</mi> <msub><mi>log</mi><mn>2</mn></msub><mrow><mo>(</mo><mn>1</mn> <mo>+</mo> <mi>x</mi><mo>)</mo></mrow></mrow></math> where <math><mi>c</mi></math> is the value of slider below and <math><mi>x</mi> <mo>∈</mo> <mrow><mo>[</mo><mn>0</mn><mo>,</mo> <mn>1</mn><mo>]</mo></mrow></math>.</p>
|
||||
<div class="figures">
|
||||
<img id=imgB src="torii.png">
|
||||
<canvas id=cB1 width=256 height=256></canvas>
|
||||
<canvas id=cB2 width=256 height=256></canvas>
|
||||
<pre id=coutB>0</pre>
|
||||
<input id=sliderA type="range" min=0 max=2 value=1 step=0.001>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Power-law transformation</h2>
|
||||
<p>Below is an example of power-law (gamma) transformation. It uses <math><mi>T</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow> <mo>=</mo> <msup><mi>x</mi><mi>k</mi></msup></math> where <math><mi>k</mi></math> is the value of slider below and <math><mi>x</mi> <mo>∈</mo> <mrow><mo>[</mo><mn>0</mn><mo>,</mo> <mn>1</mn><mo>]</mo></mrow></math>.</p>
|
||||
<div class="figures">
|
||||
<img id=imgC src="torii.png">
|
||||
<canvas id=cC1 width=256 height=256></canvas>
|
||||
<canvas id=cC2 width=256 height=256></canvas>
|
||||
<pre id=coutC>0</pre>
|
||||
<input id=sliderB type="range" min=-1024 max=1024 value=0>
|
||||
</div>
|
||||
</article>
|
||||
<script>
|
||||
const SIZE = 256;
|
||||
const a0 = cA.getContext("2d");
|
||||
const aB1 = cB1.getContext("2d");
|
||||
const aB2 = cB2.getContext("2d");
|
||||
const aC1 = cC1.getContext("2d");
|
||||
const aC2 = cC2.getContext("2d");
|
||||
var imgData;
|
||||
window.addEventListener("load", function() {
|
||||
a0.drawImage(imgA, 0, 0);
|
||||
imgData = a0.getImageData(0, 0, SIZE, SIZE);
|
||||
let canvasData0 = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
|
||||
for (let j = 0; j < canvasData0.height; j ++) {
|
||||
for (let i = 0; i < canvasData0.width; i ++) {
|
||||
let k = (j * canvasData0.width + i) * 4;
|
||||
canvasData0.data[k ] = 255 - canvasData0.data[k ];
|
||||
canvasData0.data[k + 1] = 255 - canvasData0.data[k + 1];
|
||||
canvasData0.data[k + 2] = 255 - canvasData0.data[k + 2];
|
||||
}
|
||||
}
|
||||
a0.putImageData(canvasData0, 0, 0);
|
||||
sliderA.value = 1;
|
||||
sliderA.oninput = function() {
|
||||
drawA(sliderA.value);
|
||||
};
|
||||
drawA(1);
|
||||
sliderB.value = 0;
|
||||
sliderB.oninput = function() {
|
||||
drawB(sliderB.value);
|
||||
};
|
||||
drawB(0);
|
||||
});
|
||||
const clamp = (v) => Math.min(Math.max(v, 0), 255);
|
||||
const logarithmic = (v, c) => c * Math.log2(1 + v / 255) * 255;
|
||||
function drawA(val) {
|
||||
let multiplier = val;
|
||||
coutB.innerText = multiplier;
|
||||
let canvasData = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
|
||||
let freq = new Array(256); for (let i = 0; i < 256; i ++) freq[i] = 0;
|
||||
for (let j = 0; j < canvasData.height; j ++) {
|
||||
for (let i = 0; i < canvasData.width; i ++) {
|
||||
let k = (j * canvasData.width + i) * 4;
|
||||
canvasData.data[k ] = logarithmic(canvasData.data[k ], multiplier);
|
||||
canvasData.data[k + 1] = logarithmic(canvasData.data[k + 1], multiplier);
|
||||
canvasData.data[k + 2] = logarithmic(canvasData.data[k + 2], multiplier);
|
||||
freq[canvasData.data[k]] ++;
|
||||
}
|
||||
}
|
||||
aB1.putImageData(canvasData, 0, 0);
|
||||
let max = Math.max(...freq);
|
||||
aB2.clearRect(0, 0, 256, 256);
|
||||
aB2.fillStyle = "grey";
|
||||
aB2.strokeStyle = "blue";
|
||||
aB2.beginPath();
|
||||
aB2.moveTo(0, 255);
|
||||
aB2.fillRect(0, 255 - freq[0] / max * 255, 1, freq[0] / max * 255);
|
||||
for (let i = 1; i < 256; i ++) {
|
||||
aB2.fillRect(i, 255 - freq[i] / max * 255, 1, freq[i] / max * 255);
|
||||
aB2.lineTo(i, 255 - clamp(multiplier * Math.log2(1 + i / 255) * 255));
|
||||
}
|
||||
aB2.stroke();
|
||||
}
|
||||
const k1 = 1 / 1024 / 1024;
|
||||
const powerlaw = (v, e) => Math.pow(v / 255, e) * 255;
|
||||
function drawB(val) {
|
||||
let exponent = Math.pow(10, val * val * Math.sign(val) * k1);
|
||||
coutC.innerText = exponent;
|
||||
let canvasData = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
|
||||
let freq = new Array(256); for (let i = 0; i < 256; i ++) freq[i] = 0;
|
||||
for (let j = 0; j < canvasData.height; j ++) {
|
||||
for (let i = 0; i < canvasData.width; i ++) {
|
||||
let k = (j * canvasData.width + i) * 4;
|
||||
canvasData.data[k ] = powerlaw(canvasData.data[k ], exponent);
|
||||
canvasData.data[k + 1] = powerlaw(canvasData.data[k + 1], exponent);
|
||||
canvasData.data[k + 2] = powerlaw(canvasData.data[k + 2], exponent);
|
||||
freq[canvasData.data[k]] ++;
|
||||
}
|
||||
}
|
||||
aC1.putImageData(canvasData, 0, 0);
|
||||
let max = Math.max(...freq);
|
||||
aC2.clearRect(0, 0, 256, 256);
|
||||
aC2.fillStyle = "grey";
|
||||
aC2.strokeStyle = "blue";
|
||||
aC2.beginPath();
|
||||
aC2.moveTo(0, 255);
|
||||
aC2.fillRect(0, 255 - freq[0] / max * 255, 1, freq[0] / max * 255);
|
||||
for (let i = 1; i < 256; i ++) {
|
||||
aC2.fillRect(i, 255 - freq[i] / max * 255, 1, freq[i] / max * 255);
|
||||
aC2.lineTo(i, 255 - clamp(Math.pow(i / 255, exponent) * 255));
|
||||
}
|
||||
aC2.stroke();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
torii
|
||||
Aoi Aso-jinja, torii
|
||||
Saigen Jiro (CC0 1.0)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Greyscale Transformation - Experiments - srifqi</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="author" content="srifqi">
|
||||
<meta name="description" content="An example of greyscale transformation in digital image processing">
|
||||
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
|
||||
<link rel="stylesheet" href="/main.css">
|
||||
</head>
|
||||
<body style="border: 0; max-width: 100%;">
|
||||
<header><h1>Greyscale Transformation Experiment</h1></header>
|
||||
<main>
|
||||
<nav>
|
||||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li class="active"><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
<li><a href="negative_lens.html">Negative Lens</a></li>
|
||||
<li><a href="positive_lens.html">Positive Lens</a></li>
|
||||
<li><a href="waterdrop.html">Waterdrop</a></li>
|
||||
<li><a href="drive_a_car.html">Drive A Car</a></li>
|
||||
</ul></li>
|
||||
<li><div><a href="/minetest.html">Minetest</a></div></li>
|
||||
<li><div><a href="/library.html">Libraries</a></div></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="max-width: calc(100% - 16px);">
|
||||
<aside>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th colspan="2">Greyscale Transformation</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th>Type</th><td>Course material</td></tr>
|
||||
<tr><th>Date</th><td><time datetime="2020-10-01">1 October 2020</time></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</aside>
|
||||
<p>This was created from an assignment. I did it in GNU Octave. But, I want to try doing it in JavaScript.</p>
|
||||
<p>There are three transformation: image negative (invert color), logarithmic transformation, and power-law (gamma) transformation.</p>
|
||||
<p><span class="italic">Power-law transformation can be used for contrast streching.</span></p>
|
||||
<p><a href="bare/dip/grey_transform.html" target="_blank">open in new window</a></p>
|
||||
<iframe style="width: 800px; height: 500px;" src="bare/dip/grey_transform.html"></iframe>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li class="active"><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li class="active"><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
<section>
|
||||
<p>I like to do coding and creating mini projects. Here are some of my projects.</p>
|
||||
<ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a> (<time datetime="2020-10-01">1 October 2020</time>)</li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a> (<time datetime="2020-08-20">20 August 2020</time>)</li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a> (<time datetime="2020-08-08">8 August 2020</time>)</li>
|
||||
<li><a href="addition_game.html">Addition Game</a> (<time datetime="2014-09-29">29 September 2014</time>)</li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li class="active"><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<ul class="left-menu">
|
||||
<li><div><a href="/">Home</a></div></li>
|
||||
<li><div><a href="./">Experiments</a></div><ul>
|
||||
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
||||
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
||||
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
||||
<li><a href="addition_game.html">Addition Game</a></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue