Download raw (7.5 KB)
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="geom.js"></script>
<style type="text/css">
@font-face {
font-family: 'linux_libertine_displayRg';
src: url('font/linlibertine_drah-webfont.eot');
src: url('font/linlibertine_drah-webfont.eot?#iefix') format('embedded-opentype'),
url('font/linlibertine_drah-webfont.woff2') format('woff2'),
url('font/linlibertine_drah-webfont.woff') format('woff'),
url('font/linlibertine_drah-webfont.ttf') format('truetype'),
url('font/linlibertine_drah-webfont.svg#linux_libertine_displayRg') format('svg');
font-weight: normal;
font-style: normal;
}
canvas {
width: 400px;
}
body{
font-family: 'linux_libertine_displayRg' , serif;
}
div.container{
height: auto;
margin: 0 auto;
margin-top: 50px;
min-width: 400px;
text-align: center;
}
a{
text-decoration: none;
color: grey;
}
</style>
</head>
<body>
<div class="container">
<canvas id="canvas" width="950" height="350"></canvas>
<h1 class="main">Multiple Art Days</h1>
<h3>Le salon des pratiques éditoriales dans<br />l'art contemporain aujourd'hui</h3>
<h5>les 22, 23 et 24 mai 2015</h5>
<h5>La Maison Rouge,
<br>10 Boulevard de la Bastille,
<br>75012 Paris
</h5>
<p>
<a href="mailto:contact@multipleartdays.com">contact@multipleartdays.com</a>
</p>
</div>
<script type="text/javascript">
window.addEventListener('load', function () {
var fps = 20;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
var hpgl = '';
var red_offset = 0;
var black_offset = 0;
// http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60
);
};
})();
/**
* Inclination in rad
* left array, with left contour
* right array, with right contour
*/
function calcFat(linePoint, width, angle, left, right) {
penAngle = angle - (.5 * Math.PI);
if (angle == 0
&& (1/0) > (1/angle))
{
// penAngle = -0
console.log('negative 0');
var offsetX = Math.cos(penAngle) * width;
var offsetY = Math.sin(penAngle) * width;
} else {
var offsetX = Math.cos(penAngle) * width;
var offsetY = -Math.sin(penAngle) * width;
}
left.push(point(linePoint.x + (offsetX), linePoint.y - (offsetY)));
right.push(point(linePoint.x - (offsetX), linePoint.y + (offsetY)));
}
function drawPath(ctx, path, style, lineWidth) {
var left = [];
var right = [];
var plotterPoints = [];
for(var t=0;t<=1;t+=.001) {
calcFat(path.at(t), lineWidth(t), path.angle(t), left, right);
}
ctx.beginPath();
ctx.moveTo(left[0].x, left[0].y);
for(var i=1;i < left.length; i++) {
ctx.lineTo(left[i].x, left[i].y);
}
for(var i=right.length-1;i > -1; i--) {
ctx.lineTo(right[i].x, right[i].y);
}
ctx.lineTo(left[0].x, left[0].y);
if (style.fill) {
ctx.fillStyle = style.fill;
ctx.fill();
}
if (style.stroke) {
ctx.strokeStyle = style.stroke;
ctx.lineWidth = (style.lineWidth !== undefined) ? style.lineWidth : 1;
ctx.stroke();
}
}
var paths = [
// M
new Path([
point(2,110),
point(7,110),
point(12,107),
point(17,110),
point(22,110),
point(17,110),
point(12,107),
point(12,30),
point(17,25),
point(15,15),
point(10,11),
point(0,10),
point(10,11),
point(15,15),
point(17,25),
point(20,27),
point(50,100),
point(50,110),
point(50,100),
point(55,95),
point(88,25),
point(95,22),
point(95,15),
point(100,11),
point(105,10),
point(100,11),
point(95,15),
point(95,107),
point(100,110),
point(105,110),
point(100,110),
point(95,107),
point(90,110),
point(85,110),
]),
// A
new Path([
point(125,110),
point(132,110),
point(137,107),
point(142,110),
point(147,110),
point(142,110),
point(137,107),
point(138,103),
point(147,80),
point(149,78),
point(149,74),
point(164,28),
point(169,25),
point(169,10),
point(169,25),
point(171,27),
point(190,74),
point(190,78),
point(187,80),
point(152,80),
point(149,78),
point(152,80),
point(187,80),
point(190,78),
point(192,80),
point(202,103),
point(203,107),
point(198,110),
point(193,110),
point(198,110),
point(203,107),
point(208,110),
point(213,110),
point(208,110),
point(203,107),
]),
// D
new Path([
point(233,110),
point(238,110),
point(243,107),
point(243,15),
point(238,10),
point(233,10),
point(238,10),
point(243,15),
point(248,10),
point(266,10),
point(272,11),
point(278,12),
point(284,15),
point(290,20),
point(295,28),
point(301,50),
point(301,70),
point(295,100),
point(290,105),
point(278,108),
point(271,109),
point(266,110),
point(248,110),
point(243,107),
]),
];
var sinoide = function (sini, amplitude, offset, baseOffset) {
sini || (sini = 1);
amplitude || (amplitude = 1);
offset || (offset = 0);
baseOffset || (baseOffset = 0);
var period = Math.PI * 2 * sini;
return function (t) {
return Math.abs(Math.sin((t + offset) * period) * amplitude + baseOffset);
}
};
var flat = function () {
return function () {
return 0;
}
}
var fixed = function(width) {
return function () {
return width;
}
}
var spikes = function (spikes, amplitude, offset) {
spikes || (spikes = 1);
amplitude || (amplitude = 1);
offset || (offset = 0);
var period = 1 / spikes;
return function (t) {
var pt = ((t+offset) % period) / period;
if (pt > .5) {
return (1-pt) * amplitude;
} else {
return pt * amplitude;
}
}
}
var black = {
lineWidth: .5,
stroke: 'black',
fill: null,
};
var white = {
lineWidth: .5,
fill: 'white',
stroke: null,
};
function drawFrame (offset) {
var now = Date.now();
if (now - then > interval) {
then = now;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var p=0;p<paths.length;p++) {
var path = paths[p];
drawPath(ctx, path, black, sinoide(1.5, 10, offset, 0));
drawPath(ctx, path, white, fixed(.6));
}
}
window.requestAnimFrame(function () { drawFrame(offset+.001); });
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.scale(3,3);
drawFrame(0);
});
</script>
</body>
</html>