78 lines
4.5 KiB
HTML
78 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<title>Positive Lens - Experiments - srifqi</title>
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="srifqi">
|
|
<meta name="description" content="Simulation of a ray of light goes through positive lens">
|
|
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
|
|
<link rel="stylesheet" href="/main.css">
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Experiments",
|
|
"item": "https://srifqi.github.io/experiment/"
|
|
}, {
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "Positive Lens"
|
|
}]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body style="border: 0; max-width: 100%;">
|
|
<header><h1>Positive Lens 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><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
|
|
<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
|
|
<li><a href="dip_edge_detection.html">Edge Detection</a></li>
|
|
<li><a href="dip_smoothing.html">Image Smoothing</a></li>
|
|
<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>
|
|
<li><a href="negative_lens.html">Negative Lens</a></li>
|
|
<li class="active"><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">Positive Lens<br><span class="exp-kilo">1024</span></th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><th>Type</th><td>JS demo</td></tr>
|
|
<tr><th>Date</th><td><time datetime="2014-06-15">15 June 2014</time></td></tr>
|
|
<tr><th>Size</th><td>1 287 bytes<br>1 301 bytes <small>(revised)</small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</aside>
|
|
<p>This is my attempt to create a demo using less than 1 KB of JavaScript. It was an attempt for JS1K entry. This experiment fails to meet "less than 1 KB" criteria.</p>
|
|
<p>Because <code>lineCap</code> property conflicts with <code>lineTo</code> function, the old code doesn't work anymore. Here is the revised version by adding <code>a.le=a.lineTo;</code> after hashing.</p>
|
|
<p>Use arrow to change position (<kbd>←</kbd> and <kbd>→</kbd>) and height (<kbd>↑</kbd> and <kbd>↓</kbd>).</p>
|
|
<p>This is the minified code:</p>
|
|
<pre>
|
|
function G(a,b){for(a=a||1,b=b||1,0>a&&(a=-a),0>b&&(b=-b),b>a&&(a=[b,b=a][0]);;){if(a%=b,0==a)return b;if(b%=a,0==b)return a}}function L(a,b){return a/G(a,b)*b}function k(a,b,c,d){var e=L(b,d),f=e/b*a-e/d*c,g=G(e,f);return[f/g,e/g]}for($ in a)a[$[0]+$[$.length>>1]]=a[$];a.le=a.lineTo;function l(a,b,c,d,e){var f=a*-d+b*c,a=c-a,b=d-b;return(b*e+f)/a}var e=1e3,g=500,i=500,j=250,h=50,s=240,f=120,K=k(1,f,1,s),S=K[1]/K[0],M=Math.abs(S,s),H=h*M;c.width=e;c.height=g;window.onkeydown=function(a){switch(a.keyCode){case 37:i-1>s&&s++;break;case 38:j-1>h&&h++;break;case 39:s>0&&s--;break;case 40:h>0&&h--}d()};function d(){with(K=k(1,f,1,s),S=K[1]/K[0],M=Math.abs(S/s),H=h*M,a)(A=function(x,y){le(x,y);so();bn();}),cr(0,0,e,g),strokeStyle="#00f",bn(),me(0,j),A(e,j),me(i,9),A(i,g),me(i-3,4),A(i+3,4),me(i,1),A(i,7),strokeStyle="#f00",me(i-s,j),A(i-s,j-h),f>s&&setLineDash([4]),me(i+S,j),A(i+S,j-H*(f>=s?1:-1)),f>s&&setLineDash([0]),strokeStyle="#2af",me(i-f,j-5),A(i-f,j+5),me(i+f,j-5),A(i+f,j+5),me(i-2*f,j-5),A(i-2*f,j+5),me(i+2*f,j-5),A(i+2*f,j+5),strokeStyle="#282",me(i-s,j-h),le(i,j-h),A(e,l(i,j-h,i+f,j,e)),(s<=f&&(setLineDash([4]),me(i,j-h),A(0,l(i,j-h,i+f,j,0)),setLineDash([0]))),me(i-s,j-h),A(e,l(i-s,j-h,i,j,e)),(s<=f&&(setLineDash([4]),me(i-s,j-h),A(0,l(i-s,j-h,i,j,0)),setLineDash([0])))}d();
|
|
</pre>
|
|
<p><span class="italic">Simulation of a ray of light goes through positive lens</span></p>
|
|
<p><a href="bare/positive_lens.html" target="_blank">open in new window</a></p>
|
|
<iframe style="width: 1004px; height: 504px;" src="bare/positive_lens.html" title="The experiment"></iframe>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|