serpinski2.html
<html>
<head>
<script type="text/javascript" src="Canvas2.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
<h1>A Serpinski Gasket</h1>
<script>
var WIDTH = 500;
var HEIGHT = 500;
var canvas = new Canvas(WIDTH, HEIGHT);
canvas.Redisplay();
</script>
<p>
<button type="button" onclick=" canvas.Redisplay()">Redraw</button>
<p>
<button type="button" onclick="canvas.Reset(); canvas.Redisplay()">Reset</button>
<p>
<select id="Color" onchange="canvas.SetColor(this.value); canvas.Redisplay()">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="black">black</option>
<option value="white">white</option>
</select>
<p>
Canvas2.js
function Canvas(width, height, locID) {
if (width == undefined || width < 0) {
width = 300;
}
if (height == undefined || height < 0) {
height = 300;
}
var canvas = document.createElement('canvas')
canvas.height = height;
canvas.width = width;
if(locID == undefined) {
document.body.appendChild(canvas);
} else {
div = document.getElementById(locID);
if (null == div) {
document.body.appendChild(canvas);
} else {
div.appendChild(canvas);
}
}
document.body.appendChild(canvas);
this.width = width;
this.height = height;
this.ctx = canvas.getContext("2d");
this.count = 2000;
this.Init();
this.Reset();
return this;
}
Canvas.prototype = {
Init: function() {
this.clearColor = "white";
this.start = 0;
this.color = "red";
},
Reset: function() {
switch (this.start) {
default:
case 0:
var p1 = [this.width/2.0, 20];
var p2 = [20, this.height-20];
var p3 = [this.width-20, this.height-20];
this.tri = [p1, p2, p3]
break;
}
this.MakePoints();
},
Clear: function() {
this.ctx.fillStyle=this.clearColor;
this.ctx.fillRect(0,0,this.width,this.height);
return;
},
Interp: function(a,b,s) {
return a*s + b*(1-s);
},
RandPoint: function(p1, p2) {
var s = Math.random();
var x = this.Interp(p1[0],p2[0],s);
var y = this.Interp(p1[1],p2[1],s);
return [x,y];
},
HalfPoint: function(p1,p2) {
var x = this.Interp(p1[0],p2[0],.5);
var y = this.Interp(p1[1],p2[1],.5);
return [x,y];
},
SetColor: function(color) {
this.color = color;
},
MakePoints: function() {
var p, q, v;
var t1 = this.RandPoint(this.tri[0], this.tri[1]);
p = this.RandPoint(t1, this.tri[2]);
this.list= [];
for (var i=0; i<this.count; i++) {
var c = Math.floor(Math.random()*3);
v = this.tri[c]
q = this.HalfPoint(p,v);
this.list.push(q);
p = q;
}
return;
},
Redisplay: function() {
this.Clear();
this.ctx.fillStyle = this.color;
for (var i=0; i<this.list.length; i++) {
q = this.list[i];
this.ctx.fillRect(q[0],q[1],2,2);
}
return;
}
};