attractors
Version:
Generating animated attractors for <canvas>
201 lines (168 loc) • 5.39 kB
HTML
<html lang="en">
<head>
<title>Attractors</title>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="theme-color" content="#57A3BD">
<link rel="icon" sizes="192x192" href="favicon-192.png">
<link rel="icon" sizes="32x32" href="favicon-32.png" >
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
body {
background-color: #57A3BD;
margin: 0px;
overflow: hidden;
}
#settings {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.1;
font-size: 2em;
cursor: pointer;
margin-right: 10px;
}
#paint-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#nogo {
width: 300px;
height: 200px;
top: 100px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<canvas id="paint-canvas"></canvas>
<div id="nogo"></div>
<div id="settings">⚙</div>
<script src="lib/dat.gui.min.js"></script>
<script src="lib/opentype.min.js"></script>
<!--
<script src="/lib/dat.gui.min.js"></script>
<script src="/lib/opentype.min.js"></script>
-->
<script type="text/javascript">
// Default config and load from URL
var config = {
id: 'paint-canvas',
init_scale: 1,
text: 'A T T R A C T O R S',
text_position_x: 50,
text_position_y: 33,
text_width_ratio: 12,
background_color: '#57A3BD',
nb_attractors: 25,
particule_density: 900,
line_width: 0.35,
nogo_zone: false,
color1: '#DBCEC1',
color2: '#F7F6F5',
pixelratio: window.devicePixelRatio,
svg: false,
one_path: false,
shadow_scale: 1,
nogoCircles : [],
}
if(window.location.hash) {
try {
config = JSON.parse(decodeURIComponent(window.location.hash.slice(1)));
} catch(e) {}
}
</script>
<script src="ninis.js"></script>
<script type="text/javascript">
// Refresh on click, on resize and fetch keyboard keys
function refreshGUI() {
console.log(textInput);
textInput.updateDisplay();
}
function onKeyUp(e) {
if (e.which == 13) { // Enter
reload();
} else if (e.which == 8) { // Backspace
return;
} else if (e.which == 27) { // Escape
config.text = '';
reload();
} else { // any char or space
var typedChar = String.fromCharCode(e.which);
if(typedChar.match(/[a-zA-Z\s/]/)) {
config.text += typedChar;
reload();
}
}
refreshGUI();
}
function onKeyDown(e) {
if(e.which == 8) { // Backspace
config.text = config.text.slice(0, -1);
reload();
// if we are in an input, do not preventDefault
if(event.target.tagName.toUpperCase() != 'INPUT') {
e.preventDefault();
}
}
refreshGUI();
}
document.body.addEventListener('keyup', onKeyUp);
document.body.addEventListener('keydown', onKeyDown);
document.getElementById("paint-canvas").addEventListener('click', reload, true);
window.addEventListener( 'resize', reload, false );
// get the position and size of the "nogo" element.
function getNoGoElParam() {
var nogoEl = document.getElementById('nogo');
return {
x: nogoEl.offsetLeft,
y: nogoEl.offsetTop,
width: nogoEl.offsetWidth,
height: nogoEl.offsetHeight
}
}
// Reload
function reload() {
config.nogoParam = getNoGoElParam();
window.location.hash = encodeURIComponent(JSON.stringify(config));
init();
}
// dat.GUI controls
var gui = new dat.GUI();
gui.domElement.style.visibility = 'hidden';
dat.GUI.toggleHide();
gui.remember(config);
gui.addColor(config, 'background_color').onChange(reload);
gui.add(config, 'nb_attractors', 0, 500).onChange(reload);
gui.add(config, 'particule_density', 0, 3000).onChange(reload);
gui.add(config, 'init_scale', 0.01, 1.5).onChange(reload);
gui.add(config, 'nogo_zone').onChange(reload);
var textFolder = gui.addFolder('Text');
var textInput = textFolder.add(config, 'text').onChange(reload);
textFolder.add(config, 'text_width_ratio', 0, 50).onChange(reload);
textFolder.add(config, 'text_position_x', 0, 100).onChange(reload);
textFolder.add(config, 'text_position_y', 0, 100).onChange(reload);
var lineFolder = gui.addFolder('Lines');
lineFolder.add(config, 'line_width', 0, 5).onChange(reload);
lineFolder.addColor(config, 'color1').onChange(reload);
lineFolder.addColor(config, 'color2').onChange(reload);
var lineFolder = gui.addFolder('Shadows');
lineFolder.add(config, 'shadow_scale', 0, 5).onChange(reload);
var advancedFolder = gui.addFolder('Advanced');
advancedFolder.add(config, 'pixelratio', 1, 10).onChange(reload);
advancedFolder.add(config, 'svg').onChange(reload);
advancedFolder.add(config, 'one_path').onChange(reload);
advancedFolder.add({save_svg:false}, 'save_svg').onChange(generateSVG);
document.getElementById("settings").addEventListener('click', function() {
gui.domElement.style.visibility = 'visible';
dat.GUI.toggleHide();
});
</script>
</body>
</html>