73 lines
1.5 KiB
JavaScript
73 lines
1.5 KiB
JavaScript
|
// The Canvas Board
|
||
|
|
const board = document.getElementById('board');
|
||
|
|
const ctx = board.getContext('2d');
|
||
|
|
board.width = 900;
|
||
|
|
board.height = 500;
|
||
|
|
|
||
|
|
|
||
|
|
// Complex number representation
|
||
|
|
class Complex {
|
||
|
|
constructor(x, y) {
|
||
|
|
this.x = x;
|
||
|
|
this.y = y;
|
||
|
|
}
|
||
|
|
|
||
|
|
multiply(other) {
|
||
|
|
return new Complex(this.x * other.x - this.y * other.y,
|
||
|
|
this.x * other.y + this.y * other.x);
|
||
|
|
}
|
||
|
|
|
||
|
|
add(other) {
|
||
|
|
return new Complex(this.x + other.x, this.y + other.y);
|
||
|
|
}
|
||
|
|
|
||
|
|
squaredAbsolute() {
|
||
|
|
return this.x*this.x + this.y*this.y;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Take a number from one range to another
|
||
|
|
const rangeTransform = (v, oldMin, oldMax, newMin, newMax) =>
|
||
|
|
(((v - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin
|
||
|
|
|
||
|
|
// Get index in ImageData from coordinates
|
||
|
|
const coordinatesToDataIndex = (x, y) => 4 * (y * board.width + x);
|
||
|
|
|
||
|
|
// Put color in ImageData
|
||
|
|
const paintPixel = (image, x, y, color) => {
|
||
|
|
const i = coordinatesToDataIndex(x, y);
|
||
|
|
|
||
|
|
image.data[i] = color.r;
|
||
|
|
image.data[i + 1] = color.g;
|
||
|
|
image.data[i + 2] = color.b;
|
||
|
|
image.data[i + 3] = color.a;
|
||
|
|
}
|
||
|
|
|
||
|
|
class Color {
|
||
|
|
constructor(r, g, b, a) {
|
||
|
|
this.r = r;
|
||
|
|
this.g = g;
|
||
|
|
this.b = b;
|
||
|
|
this.a = a;
|
||
|
|
}
|
||
|
|
|
||
|
|
static random() {
|
||
|
|
return new Color(Math.random() * 255, Math.random() * 255, Math.random() * 255, Math.random() * 255);
|
||
|
|
}
|
||
|
|
|
||
|
|
hue(value) {
|
||
|
|
const hsl = rgbToHsl(this.r, this.g, this.b);
|
||
|
|
hsl[0] = value % 1;
|
||
|
|
const rgb = hslToRgb.apply(null, hsl);
|
||
|
|
|
||
|
|
this.r = rgb[0];
|
||
|
|
this.g = rgb[1];
|
||
|
|
this.b = rgb[2];
|
||
|
|
}
|
||
|
|
|
||
|
|
clone() {
|
||
|
|
return new Color(this.r, this.g, this.b, this.a);
|
||
|
|
}
|
||
|
|
}
|