PlaneteCasio
/
Le_Royaume_Poudingue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Le_Royaume_Poudingue/Development Tools/SpriteGenerator.html

207 lines
11 KiB
HTML
Raw Normal View History

SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
<EFBFBD><EFBFBD><!DOCTYPE html>
<html>
<head>
<title>SpriteGen</title>
Replace SpriteGenerator.html
2018-09-07 00:42:57 +02:00
<style type="text/css">
body {
image-rendering: -moz-crisp-edges;
image-rendering: -ms-crisp-edges;
}
#backGround {
opacity: 0.35;
}
.container {
position: absolute;
top: 100px;
width: 100px;
height: 100px;
border: 2px solid purple;
}
.container canvas {
position: absolute;
width: 100%;height: 100%;
top: 0; left: 0;
image-rendering: inherit;
}
pre {
position: fixed;
top: 100vh;
height: 30px;
background-color: purple;
color: yellow;
margin: -30px 0 0 0;
width: 100vw;
left: 0;
padding: 9px 0 0 10px;
}
#codeContainer {
position: fixed;
background-color: black;
border-radius: 10px;
width: 40%; height: 40%;
margin: -10px; left: 50%; top: 50%;
color: white;
z-index: -1; opacity: 0;
padding: 10px; transition: 0.8s;
}
</style>
SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
</head>
<body>
Replace SpriteGenerator.html
2018-09-07 00:42:57 +02:00
<div id="codeContainer" ondblclick="this.style.zIndex='-1';this.style.opacity='0'">
<h2>CODE</h2>
<h4>Size : </h4>
<p></p>
</div>
<input type="file" id="fileChooser" onchange="Test(this.files[0].name);">
<img src="Rat.png" id="bordel" style="border: 5px solid blue;">
<div class="container" >
<canvas id="backGround"></canvas>
<canvas id="foreGround"></canvas>
<canvas id="activeLayer"></canvas>
</div>
<button onclick="draw()">Draw</button>
<button onclick="sketch.push(new coord(999,0));draw();">New path</button>
<button onclick="restart()">Restart</button>
<button onclick="ereaser()">Erease last point</button>
<button onclick="codeGenerator()">Get the code</button>
<input type="range" id="zoom" min="2" max="20" value="10" onchange="zoom(this.value)" name="zoom">
<pre></pre>
SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
<script type="text/javascript">
Replace SpriteGenerator.html
2018-09-07 00:42:57 +02:00
var consoleOutput = document.getElementsByTagName('pre')[0];
var bg = document.getElementById('backGround');
var bgCtx = bg.getContext('2d');
var fg = document.getElementById('foreGround');
var fgCtx = fg.getContext('2d');
var al = document.getElementById('activeLayer');
var alCtx = al.getContext('2d');
SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
Replace SpriteGenerator.html
2018-09-07 00:42:57 +02:00
var colorList = ['BlueViolet','Blue','Brown','CadetBlue','Crimson', 'DarkBlue', 'DarkRed', 'DarkGreen', 'DarkOrchid', 'DarkSlateBlue', 'DimGray', 'HotPink', 'MediumPurple', 'Olive'];
var index = 0;
var cnvsCont = document.getElementsByClassName('container')[0];
var lol = document.getElementById('bordel');
function coord(x, y) {
this.x = x;
this.y = y;
}
var sketch = [new coord(999, 0)];
SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
Replace SpriteGenerator.html
2018-09-07 00:42:57 +02:00
function Test(value) {
lol.src = value;
lol.onload = function(){
bg.width = lol.width;
bg.height = lol.height;
fg.width = lol.width;
fg.height = lol.height;
al.width = lol.width;
al.height = lol.height;
cnvsCont.style.height = (10*lol.height) + "px";
cnvsCont.style.width = (10*lol.width) + "px";
document.getElementById('zoom').value = 10;
bgCtx.drawImage(lol,0,0);
}
}
al.onmousemove = function(event) {
var cPos = al.getBoundingClientRect();
var factor = document.getElementById('zoom').value;
var x = Math.ceil((event.clientX - cPos.left)/factor );
var y = Math.ceil((event.clientY - cPos.top)/factor );
consoleOutput.innerHTML = x + ", " + y;
alCtx.clearRect(0,0,lol.width, lol.height);
alCtx.fillStyle="red";
alCtx.fillRect(x-1,y-1,1,1);
}
al.onclick = function(event) {
var cPos = al.getBoundingClientRect();
var factor = document.getElementById('zoom').value;
var x = Math.ceil((event.clientX - cPos.left)/factor );
var y = Math.ceil((event.clientY - cPos.top)/factor );
var newPoint = new coord(x , y);
sketch.push(newPoint);
draw();
consoleOutput.innerHTML = "Number of points : " + (sketch.length-1);
}
function zoom(factor) {
cnvsCont.style.height = (factor*lol.height) + "px";
cnvsCont.style.width = (factor*lol.width) + "px";
}
function draw() {
fgCtx.imageSmoothingEnabled = false;
fgCtx.clearRect(0,0,lol.width,lol.height);
fgCtx.lineJoin = "bevel";
fgCtx.lineWidth="1";
fgCtx.fillStyle=colorList[index];
var a;
index = 0;
for (a in sketch) {
if (sketch[a].x === 999) {
index = (index + 1)%colorList.length;
fgCtx.fillStyle=colorList[index];
} else {
fgCtx.fillRect(sketch[a].x-1, sketch[a].y-1,1,1);
}
}
}
function ereaser() {
if (sketch.length > 1) {
sketch.pop();
draw();
} else {consoleOutput.innerHTML = "No point left to be ereased.";}
}
function codeGenerator() {
var winCode = document.getElementById('codeContainer');
winCode.style.zIndex = "2";winCode.style.opacity = "1";
winCode = winCode.lastElementChild;
console.log(winCode); var tempY;
winCode.innerHTML = "{";
for (var a = 1 ; a<=sketch.length ; a++) {
console.log(a);
if (sketch[a] != undefined) {
if (sketch[a].x === 999) {
winCode.innerHTML += "<22>d9, ";
} else {
winCode.innerHTML += sketch[a].x + ".";
tempY = lol.height-sketch[a].y;
if (tempY<10) { winCode.innerHTML += "0";}
winCode.innerHTML += tempY + ", ";
}
}
}
winCode.innerHTML = winCode.innerHTML.slice(0,winCode.innerHTML.length-2);
winCode.parentElement.getElementsByTagName('h4')[0].innerHTML = "Size : " + (winCode.innerHTML.length - sketch.length) + " bytes";
winCode.innerHTML += " -> List 1";
}
function restart() {
if (confirm('Recommencer votre dessin ?') === true) {
sketch = [new coord(999, 0)];
draw();
}
}
Test("Rat.png");
SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
Replace SpriteGenerator.html
2018-09-07 00:42:57 +02:00
SpriteGenerator.html téléversé
2018-08-16 15:35:48 +02:00
</script>
</body>
</html>