Skip to content

Instantly share code, notes, and snippets.

@anbnyc

anbnyc/index.html

Last active July 26, 2017 17:33
Show Gist options
  • Save anbnyc/54d3fa0bc918c6909c7370cd638f3382 to your computer and use it in GitHub Desktop.
Save anbnyc/54d3fa0bc918c6909c7370cd638f3382 to your computer and use it in GitHub Desktop.
Download ZIP
Wallpaper illustrator v0
Raw
index.html
<html>
<head>
<style type="text/css">
canvas {
border: solid black 1px;
}
div.controls{
width: 300px;
float: left;
}
.canvas{
margin-left: 320px;
}
button {
width: 100px;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
button:hover{
background: #ccc;
}
</style>
</head>
<body>
<div class="controls">
<h4>Pattern controls</h4>
<div>
<label for="reso">Repetition</label>
<input id="reso" name="reso" type="number" value="20"></input>
<br>
</div>
<h4>Iteration controls</h4>
<div>
<label for="iter">Iteration</label>
<input id="iter" name="iter" type="checkbox" value="false"></input>
<br>
</div>
<div>
<label for="memo">Memory</label>
<input id="memo" name="memo" type="checkbox" value="false"></input>
<br>
</div>
<div>
<label for="freq">Frequency (ms)</label>
<input id="freq" name="freq" type="number" value="250"></input>
<br>
</div>
<div>
<label for="step">Step</label>
<input id="step" name="step" type="number" value="-1"></input>
<br>
</div>
<div>
<button id="start">ANIMATE</button>
<button id="reset">RESET</button>
</div>
<div>
<h4>Draw here:</h4>
<canvas id="input"></canvas>
</div>
</div>
<div class="canvas">
<canvas id="output"></canvas>
</div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
Raw
index.js
var inW = 300;
var inH = 200;
var ratio = 3;
var reso, memory, iterate, timeout, step;
var data = [];
var intervals = [];
var outW = inW*ratio;
var outH = inH*ratio;
var canvasIn = document.getElementById("input");
canvasIn.width = inW;
canvasIn.height = inH;
var canvasOut = document.getElementById("output")
canvasOut.width = outW;
canvasOut.height = outH;
var ctxIn = canvasIn.getContext("2d")
var context = canvasOut.getContext("2d")
const { offsetTop, offsetLeft } = canvasIn;
document.getElementById("reset").addEventListener('click',reset);
document.getElementById("start").addEventListener('click',start);
canvasIn.addEventListener('mouseenter', () => {
iterate = document.getElementById("iter").checked;
reso = +document.getElementById("reso").value;
step = +document.getElementById("step").value;
memory = document.getElementById("memo").checked;
})
function start(){
if(iterate){
intervals.push(setInterval(() => {
if(reso > 100 || reso <= 0){
stopAll();
} else {
animate();
reso += step;
}
}, document.getElementById("freq").value));
}
}
canvasIn.addEventListener('mousemove', e => {
const { pageX: x, pageY: y } = e
data.push({ x: x - offsetLeft, y: y - offsetTop })
inputDraw();
if(!iterate){
animate();
}
})
function inputDraw(){
ctxIn.beginPath();
ctxIn.lineWidth = 1;
ctxIn.strokeStyle = "black";
data.map(o => ctxIn.lineTo(o.x, o.y))
ctxIn.stroke();
ctxIn.closePath();
}
function animate(){
if(!memory) context.clearRect(0, 0, outW, outH);
for(var i = 0; i < reso; i++){
for(var j = 0; j < reso; j++){
var x = i*inW*(ratio/reso)
var y = j*inH*(ratio/reso)
context.moveTo(x,y);
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = "black";
data.map(o =>
context.lineTo(
x+o.x*(ratio/reso),
y+o.y*(ratio/reso)
))
context.stroke();
context.closePath();
}
}
}
function reset(){
stopAll();
data = [];
intervals = [];
reso = +document.getElementById("reso").value;
ctxIn.clearRect(0, 0, outW, outH);
context.clearRect(0, 0, outW, outH);
}
function stopAll(){
intervals.map(o => clearTimeout(o))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment