Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
319 lines (262 sloc) 12.3 KB
<!DOCTYPE html>
<!--
Copyright (C) 2017 lamaken
https://github.com/lamaken/visualk/blob/master/web/art/jsmosaic.html
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsMosaic Editor v0.1</title>
<meta name="Keywords"
content="mosaic,round, mosaic editor" />
<meta name="Description"
content="Design your own mosaics. Let computer draw or paint for you." />
<meta name="Author" content="lamaken@gmail.com" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="img/ico" href="favicon.ico">
</head>
<body onload="updateMain()">
<div id="idMosaic" style="opacity: 0.9;left:15px;top:15px;border: 5;background-color: white;position: fixed;padding: 30px;color:blue;font-family: monospace; text-decoration: activecaption solid ;font-size: smaller">
<center>
jsMosaicEditor<br/>
<a target="black" href="https://github.com/lamaken/visualk/blob/master/web/art/jsmosaic.html">sources</a>
<br/>
<br><div id="container" style="background-color: white">
</div>
<table>
<tr><td>
<input onchange="updateMain()" id="mx" type="range" name="mx" min="15" max="150" value="50"/>
</td><td><div id="lmx" >width:a</div></td></tr>
<tr><td>
<input onchange="updateMain()" id="my" type="range" name="my" min="15" max="150" value="50"/>
</td><td><div id="lmy" >c</div></td></tr>
<tr><td>
<input onchange="updateMain()" id="rbright" type="range" name="rbright" min="0" max="255" value="175"/>
</td><td><div id="lrbright">r</div></td></tr>
<tr><td>
<input onchange="updateMain()" id="gbright" type="range" name="gbright" min="0" max="255" value="175"/>
</td><td><div id="lgbright">g</div></td></tr>
<tr><td>
<input onchange="updateMain()" id="bbright" type="range" name="bbright" min="0" max="255" value="175"/>
</td><td><div id="lbbright">b</div> </td></tr>
<tr><td>
<input onchange="updateMain()" id="cell" type="range" name="cell" min="1" max="9" value="3"/>
</td><td><div id="lcell">m</div> </td></tr>
<tr><td>
<input onchange="updateMain()" id="domain" type="range" name="domain" min="0" max="555" value="100"/>
</td><td><div id="ldomain">domain</div> </td></tr>
</table>
<input value="colorize" type="button" onclick="updateMain();"/>
</center>
</div>
<canvas id="mosaic" ></canvas>
<script>
var seed = 0;
var rIntes = 200;//0..256
var gIntes = 200;
var bIntes = 200;
var domini = 200;
function HSVtoRGB(h, s, v) {
h = parseInt(h, 10);
s = parseInt(s, 10);
v = parseInt(v, 10);
var r, g, b;
if (s !== 0) {
s /= 100;
}
if (v !== 0) {
v /= 100;
}
if (s === 0) {
console.log("s === 0");
r = v;
g = v;
b = v;
return "#" + Math.floor(r * 0xff).toString(16) +
Math.floor(g * 0xff).toString(16) +
Math.floor(b * 0xff).toString(16);
}
var i, f, m, n, k;
i = Math.floor(h / 60);
f = h / 60 - i;
m = v * (1 - s);
n = v * (1 - s * f);
k = v * (1 - s * (1 - f));
switch (i) {
case 0:
r = v;
g = k;
b = m;
break;
case 1:
r = n;
g = v;
b = m;
break;
case 2:
r = m;
g = v;
b = k;
break;
case 3:
r = m;
g = n;
b = v;
break;
case 4:
r = k;
g = m;
b = v;
break;
case 5:
r = v;
g = m;
b = n;
break;
default:
break;
}
r = Math.floor(r * 0xff).toString(16);
g = Math.floor(g * 0xff).toString(16);
b = Math.floor(b * 0xff).toString(16);
r = r.length == 1 ? r = '0' + r : r;
g = g.length == 1 ? g = '0' + g : g;
b = b.length == 1 ? b = '0' + b : b;
return getColor(r, g, b);
}
function ellipse(context, cx, cy, rx, ry) {
context.save(); // save state
context.beginPath();
context.translate(cx - rx, cy - ry);
context.scale(rx, ry);
context.arc(1, 1, 1, 0, 2 * Math.PI, false);
context.restore(); // restore to original state
context.stroke();
}
function getRndColor() {
var r = Math.round(Math.random() * (domini)) + (rIntes - domini);
var g = Math.round(Math.random() * (domini)) + (gIntes - domini);
var b = Math.round(Math.random() * (domini)) + (bIntes - domini);
return getColor(r, g, b);
}
function circle(color, ctx, x, y, radX, radY) {
/*
*
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
*/
ctx.beginPath();
ctx.arc(x, y, radX, radY, 2 * Math.PI, false);
ctx.fillStyle = 'color';
ctx.fill();
ctx.lineWidth = 0;
ctx.strokeStyle = color;
ctx.stroke();
}
function updateMain() {
/*init*/
var mx = document.getElementById("mx").value;
var my = document.getElementById("my").value;
var cell = document.getElementById("cell").value;
domini = document.getElementById("domain").value;
var rbright = document.getElementById("rbright").value;
var gbright = document.getElementById("gbright").value;
var bbright = document.getElementById("bbright").value;
var lmx = document.getElementById("lmx");
var lmy = document.getElementById("lmy");
var lcell = document.getElementById("lcell");
var lrbright = document.getElementById("lrbright");
var lgbright = document.getElementById("lgbright");
var lbbright = document.getElementById("lbbright");
var ldomini = document.getElementById("ldomain");
lmx.innerHTML = "w";// + mx;
lmy.innerHTML = "h";// + my;
lcell.innerHTML = "c";// + cell;
lrbright.innerHTML = "r";// + rbright;
lgbright.innerHTML = "g";// + gbright;
lbbright.innerHTML = "b";// + bbright;
ldomini.innerHTML = "a";// + domini;
/**/
var mostra = document.createElement('canvas');
var tosave = document.createElement('canvas');
mostra.id = "mostra";
tosave.id = "tosave";
var radiusX = Math.round((mx / 2 / cell));
var radiusY = Math.round(my / 2 / cell);
mostra.setAttribute("width", mx);
mostra.setAttribute("height", my);
mostra.style.display = "none";
tosave.setAttribute("width", mx - radiusX);
tosave.setAttribute("height", my - radiusY);
var mosaic = document.getElementById('mosaic');
mosaic.width = window.innerWidth;
mosaic.height = window.innerHeight;
var ctxmostra = mostra.getContext('2d');
var ctxtosave = tosave.getContext('2d');
var ctxmosaic = mosaic.getContext('2d');
ctxmostra.imageSmoothingEnabled = false;
ctxmosaic.imageSmoothingEnabled = false
var mod = 0;
seed += 0.001;
if (seed > 0.3)
seed = 0;
ctxmostra.fillStyle = "red";
ctxmostra.fillRect(0, 0, mostra.width, mostra.height);
rIntes = rbright; //0..256
gIntes = gbright;
bIntes = bbright;
for (var x = 0; x < Math.round(cell * radiusX); x += radiusX) {
for (var y = 0; y < Math.round(cell * radiusY); y += radiusY) {
var color = getRndColor();
ctxmostra.fillStyle = color;
ctxmostra.fillRect(x, y, radiusX, radiusY);
//circle(color,ctxmostra,x, y, radiusX/2, radiusY/2);
ctxmostra.fillRect(mostra.width - x - radiusX * 2, y, radiusX, radiusY);
ctxmostra.fillRect(x, mostra.height - y - radiusY * 2, radiusX, radiusY);
ctxmostra.fillRect(mostra.width - x - radiusX * 2, mostra.height - y - radiusY * 2, radiusX, radiusY);
}
}
var raxola = ctxmostra.getImageData(0, 0, mostra.width - (radiusX), mostra.height - radiusY);
ctxtosave.putImageData(raxola, 0, 0);
ctxmostra.stroke();
dataUrl = tosave.toDataURL();
imageFoo = document.createElement('img');
imageFoo.onload = function () {
var topaint = document.getElementById("imageFoo");
for (var mmx = 0; mmx < mosaic.width; mmx += topaint.width) {//mostra.width){
for (var mmy = 0; mmy < mosaic.height; mmy += topaint.height) {
ctxmosaic.drawImage(imageFoo, mmx, mmy);
}
}
}
imageFoo.src = dataUrl;
imageFoo.id = "imageFoo";
imageFoo.style.width = mx - radiusX;
imageFoo.style.height = my - radiusY;
if (document.getElementById("imageFoo") != null) {
document.getElementById("container").removeChild(document.getElementById("imageFoo"));
}
document.getElementById("container").appendChild(imageFoo);
}
function getColor(r, g, b) {
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</body>
</html>