craters
by jcubed111
HTML
<canvas id="main" width=500 height=800></canvas>
CSS
canvas{
border: 1px solid #ccc;
}
JavaScript
let ctx = document.getElementById('main').getContext('2d');
let craters = [];
function probRound(f) {
// take a float and return an integer, where we round by taking the
// fraction part as the chance that we round up
// so: 1.2 will return 1 80% of the time, and 2 20% of the time.
const intPart = Math.floor(f);
const fractPart = f - intPart;
if(Math.random() < fractPart) {
return intPart + 1;
}
return intPart;
}
class Center{
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Drawable{
constructor(ts, te) {
this.ts = ts;
this.te = te;
}
drawRange(rangeLeft, rangeRight) {
if(this.ts > rangeRight) return;
if(this.te < rangeLeft) return;
const dt = this.te - this.ts;
if(dt == 0) {
return this.drawFactors(0, 1);
}
const startF = (Math.max(this.ts, rangeLeft) - this.ts) / dt;
const endF = (Math.min(this.te, rangeRight) - this.ts) / dt;
return this.drawFactors(startF, endF);
}
}
class Arc extends Drawable{
constructor(center, radius, angle1, angle2, ts, te) {
super(ts, te);
this.center = center;
this.radius = radius;
this.angle1 = angle1;
this.angle2 = angle2;
}
drawFactors(startF, endF) {
const da = this.angle2 - this.angle1;
const a1 = this.angle1 + da * startF;
const a2 = this.angle1 + da * endF;
const cos = Math.cos(a1);
const sin = Math.sin(a1);
ctx.moveTo(this.center.x + cos*this.radius, this.center.y + sin*this.radius);
ctx.arc(this.center.x, this.center.y, this.radius, a1, a2, a2 < a1);
}
size() {
return Math.abs(this.angle2 - this.angle1);
}
getOuterRadius() {
return this.radius;
}
}
class Line extends Drawable{
constructor(center, angle, radius1, radius2, ts, te) {
super(ts, te);
this.center = center;
this.angle = angle;
...