public
Last active

  • Download Gist
guilloche.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
/*
---
 
name: guilloche
script: guilloche.js
description: guilloche
provides: [Guilloche]
 
...
*/
var guilloche = function(canvas, opts){
var opts = opts || {};
 
var ctx = canvas.getContext('2d'),
size = {x: canvas.offsetWidth, y: canvas.offsetHeight},
halfSize = {x: size.x / 2, y: size.y / 2},
majorR = opts.majorR || 479.5,
minorR = opts.minorR || 50,
angleMultiplier = opts.angleMultiplier || 50,
radiusEffectConstant = opts.radiusEffectConstant || 250,
steps = opts.steps || 1210,
centerPoint = opts.centerPoint || { x: 100, y:100 },
color = opts.color || 'rgb(255,255,255)',
globalAlpha = opts.globalAlpha || 1.0;
 
ctx.globalAlpha = globalAlpha;
ctx.clearRect(0, 0, size.x, size.y);
 
var diff = majorR - minorR,
s = diff / minorR,
theta = 0,
radiusEffect = radiusEffectConstant + minorR,
oldX, oldY;
 
for (var i = steps; i--;) {
var new_theta = angleMultiplier * theta,
x = diff * Math.sin(new_theta) + radiusEffect * Math.sin(new_theta * s) + (centerPoint.x),
y = diff * Math.cos(new_theta) - radiusEffect * Math.cos(new_theta * s) + (centerPoint.y);
 
theta += Math.PI * 4 / steps;
 
if (oldX) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(oldX, oldY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
 
oldX = x;
oldY = y;
}
 
};

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.