Procedural Poutsa Generator
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function Randomcolorset() {
// To colorize the poutsaki,
// we use a color wheel, and we
// randomly choose two matching and
// one contrasting color
// from the colorwheel.
this.colorwheel = ["#FF0000","#FF8000","#FFFF00",
"#80FF00","#00FF00","#00FF80",
"#00FFFF","#0080FF","#0000FF",
"#8000FF","#FF00FF","#FF0080"];
this.getrandom = function() {
var mc1 = Math.floor(Math.random()*this.colorwheel.length);
var mc2 = (mc1 + 1) % this.colorwheel.length;
if (Math.random() > 0.5) {
var tmp = mc2;
mc2 = mc1;
mc1 = tmp;
}
var cc = (mc1 + this.colorwheel.length / 2) % this.colorwheel.length;
randset = [this.colorwheel[mc1], this.colorwheel[mc2], this.colorwheel[cc]];
return randset;
}
}
function Poutsaki(x, y, length, trihes, petsa, colorset, rotation, tsoureki_factors) {
this.length = length;
// We only parametrize on length, and we derive penile width
// using the Golden Ratio, to give our poutsaki aesthetically
// pleasing harmonic proportions. Just like the Parthenon.
this.width = length / 1.618;
this.x = x;
this.y = y;
this.trihes = trihes;
this.petsa = petsa;
this.colorset = colorset;
this.rotation = rotation;
this.tsoureki_factors = tsoureki_factors;
this.paint = function(ctx) {
var ctx = canvas.getContext('2d');
ctx.rotate(this.rotation);
ctx.lineWidth = this.petsa;
ctx.fillStyle = this.colorset[0];
ctx.beginPath();
ctx.arc(this.x + (this.width / 2), this.y, (this.width / 2), Math.PI, 0);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(this.x + (this.width / 2), this.y - (this.width / 2));
...