Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
/*
---
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;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.