heltonbiker/GeradorImagemProjetada.html

## GeradorImagemProjetada.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>Imagem Projetada</title>
    <style>
        :root {
            --width: 1024px;
            --height: 500px;
        }

        input[type=range][orient=vertical]
        {
            -webkit-appearance: slider-vertical; /* WebKit */
            width: 0px;
            height: 500px;
            padding: 0 5px;
        }

        input[type=range][orient=horizontal]
        {
            height: 10px;
            width: 500px;
        }


    </style>
</head>

<body onload="updateDrawing();">

    <table>
        <tr>
            <td>
                <canvas width="1024" height="500" id="canvas"></canvas><br/>
            </td>
            <td>
                <input id="sliderAlturaMaxima" class="sliderVertical" orient="vertical" type="range" min="0" max="1" value="0.9" step="0.0001" oninput="updateDrawing();"/><br/>
            </td>
            <td>
                <input id="sliderAlturaMinima" class="sliderVertical" orient="vertical" type="range" min="0" max="1" value="0.1" step="0.0001" oninput="updateDrawing();"/><br/>
            </td>
        </tr>
        <tr>
            <td>
                <input id="sliderEspessura" type="range" orient="horizontal" min="1" max="10" value="10" step="1" oninput="updateDrawing();" class="slider"/><br/>
            </td>
        </tr>
    </table>

    <script type="text/javascript">

        function updateDrawing () {

            var canvas = document.getElementById('canvas');
            var cx = canvas.getContext('2d');

            var alturaTelaPixels = canvas.height;
            var larguraTelaPixels = canvas.width;

            var alturaRelativaMaxima = parseFloat(document.getElementById('sliderAlturaMaxima').value);
            var alturaRelativaMinima = parseFloat(document.getElementById('sliderAlturaMinima').value);
            var espessuraListras = parseInt(document.getElementById('sliderEspessura').value);


            var listras = gerarListras(alturaTelaPixels, alturaRelativaMinima, alturaRelativaMaxima, espessuraListras);

            cx.save()
            cx.translate(0, alturaTelaPixels);
            cx.scale(1, -1);

            pintarImagem(cx, listras, larguraTelaPixels, alturaTelaPixels, espessuraListras);
            pintarBolinhasDebug(cx, alturaTelaPixels, alturaRelativaMinima, alturaRelativaMaxima)

            cx.restore();
        }

        function gerarListras(alturaTelaPixels, alturaRelativaMinima, alturaRelativaMaxima, espessura) {
            var listras = [];

            var alturaMinima = alturaTelaPixels * alturaRelativaMinima;
            var alturaMaxima = alturaTelaPixels * alturaRelativaMaxima;
            var alturaCentral = Math.round((alturaMaxima + alturaMinima) / 2.0);

            var meiaAltura = (alturaMaxima - alturaMinima) / 2.0;
            var baseshift =  Math.floor(espessura / 2.0);

            listras.push([alturaCentral - baseshift, true]);

            var directions = [1,-1];
            for (var dir in directions) {
                var direction = directions[dir];
                var indiceListra = 1;
                var position = alturaCentral;
                while (Math.abs(position - alturaCentral) + espessura < meiaAltura) {
                    position = alturaCentral + 2 * direction * indiceListra * espessura;
                    listras.push([position - baseshift, false]);
                    indiceListra++;
                }
            }

            return listras;
        }

        function pintarImagem(cx, listras, larguraTela, alturaTela, espessura) {
            cx.save();

            cx.fillStyle = '#000';
            cx.fillRect(0, 0, larguraTela, alturaTela);

            for (var i in listras) {
                cx.fillStyle = listras[i][1] ? "#ff0" : "#fff";
                cx.fillRect(0, listras[i][0], larguraTela, espessura);
            }
            cx.restore();
        }

        function pintarBolinhasDebug(cx, alturaTela, alturaRelativaMinima, alturaRelativaMaxima) {
            var alturaMinima = alturaTela * alturaRelativaMinima;
            var alturaMaxima = alturaTela * alturaRelativaMaxima;
            var alturaCentral = (alturaMaxima + alturaMinima) / 2.0;

            pintaBolinha(cx, alturaMinima, "#f00");
            pintaBolinha(cx, alturaMaxima, "#f00");
            pintaBolinha(cx, alturaCentral, "#080");
        }

        function pintaBolinha(cx, altura, cor) {
            cx.save();
            cx.fillStyle = cor;
            cx.beginPath();
            cx.ellipse(5, altura, 5, 5, 0, 2*Math.PI, false);
            cx.fill();
            cx.restore();
        }
    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="utf-8">
	<title>Imagem Projetada</title>
	<style>
	:root {
	--width: 1024px;
	--height: 500px;
	}

	input[type=range][orient=vertical]
	{
	-webkit-appearance: slider-vertical; /* WebKit */
	width: 0px;
	height: 500px;
	padding: 0 5px;
	}

	input[type=range][orient=horizontal]
	{
	height: 10px;
	width: 500px;
	}


	</style>
	</head>

	<body onload="updateDrawing();">

	<table>
	<tr>
	<td>
	<canvas width="1024" height="500" id="canvas"></canvas><br/>
	</td>
	<td>
	<input id="sliderAlturaMaxima" class="sliderVertical" orient="vertical" type="range" min="0" max="1" value="0.9" step="0.0001" oninput="updateDrawing();"/><br/>
	</td>
	<td>
	<input id="sliderAlturaMinima" class="sliderVertical" orient="vertical" type="range" min="0" max="1" value="0.1" step="0.0001" oninput="updateDrawing();"/><br/>
	</td>
	</tr>
	<tr>
	<td>
	<input id="sliderEspessura" type="range" orient="horizontal" min="1" max="10" value="10" step="1" oninput="updateDrawing();" class="slider"/><br/>
	</td>
	</tr>
	</table>

	<script type="text/javascript">

	function updateDrawing () {

	var canvas = document.getElementById('canvas');
	var cx = canvas.getContext('2d');

	var alturaTelaPixels = canvas.height;
	var larguraTelaPixels = canvas.width;

	var alturaRelativaMaxima = parseFloat(document.getElementById('sliderAlturaMaxima').value);
	var alturaRelativaMinima = parseFloat(document.getElementById('sliderAlturaMinima').value);
	var espessuraListras = parseInt(document.getElementById('sliderEspessura').value);


	var listras = gerarListras(alturaTelaPixels, alturaRelativaMinima, alturaRelativaMaxima, espessuraListras);

	cx.save()
	cx.translate(0, alturaTelaPixels);
	cx.scale(1, -1);

	pintarImagem(cx, listras, larguraTelaPixels, alturaTelaPixels, espessuraListras);
	pintarBolinhasDebug(cx, alturaTelaPixels, alturaRelativaMinima, alturaRelativaMaxima)

	cx.restore();
	}

	function gerarListras(alturaTelaPixels, alturaRelativaMinima, alturaRelativaMaxima, espessura) {
	var listras = [];

	var alturaMinima = alturaTelaPixels * alturaRelativaMinima;
	var alturaMaxima = alturaTelaPixels * alturaRelativaMaxima;
	var alturaCentral = Math.round((alturaMaxima + alturaMinima) / 2.0);

	var meiaAltura = (alturaMaxima - alturaMinima) / 2.0;
	var baseshift = Math.floor(espessura / 2.0);

	listras.push([alturaCentral - baseshift, true]);

	var directions = [1,-1];
	for (var dir in directions) {
	var direction = directions[dir];
	var indiceListra = 1;
	var position = alturaCentral;
	while (Math.abs(position - alturaCentral) + espessura < meiaAltura) {
	position = alturaCentral + 2 * direction * indiceListra * espessura;
	listras.push([position - baseshift, false]);
	indiceListra++;
	}
	}

	return listras;
	}

	function pintarImagem(cx, listras, larguraTela, alturaTela, espessura) {
	cx.save();

	cx.fillStyle = '#000';
	cx.fillRect(0, 0, larguraTela, alturaTela);

	for (var i in listras) {
	cx.fillStyle = listras[i][1] ? "#ff0" : "#fff";
	cx.fillRect(0, listras[i][0], larguraTela, espessura);
	}
	cx.restore();
	}

	function pintarBolinhasDebug(cx, alturaTela, alturaRelativaMinima, alturaRelativaMaxima) {
	var alturaMinima = alturaTela * alturaRelativaMinima;
	var alturaMaxima = alturaTela * alturaRelativaMaxima;
	var alturaCentral = (alturaMaxima + alturaMinima) / 2.0;

	pintaBolinha(cx, alturaMinima, "#f00");
	pintaBolinha(cx, alturaMaxima, "#f00");
	pintaBolinha(cx, alturaCentral, "#080");
	}

	function pintaBolinha(cx, altura, cor) {
	cx.save();
	cx.fillStyle = cor;
	cx.beginPath();
	cx.ellipse(5, altura, 5, 5, 0, 2*Math.PI, false);
	cx.fill();
	cx.restore();
	}
	</script>

	</body>
	</html>