132 lines
2.5 KiB
JavaScript
132 lines
2.5 KiB
JavaScript
const km = kelvinUtil.math;
|
|
const width = 600;
|
|
const height = 600;
|
|
const bgColor = 'black';
|
|
const bgOpacity = .4;
|
|
const color = {
|
|
red1: '#E74C3C',
|
|
red2: '#C0392B',
|
|
orange1: '#E67E22',
|
|
orange2: '#D35400',
|
|
yellow1: '#F1C40F',
|
|
yellow2: '#F39C12',
|
|
green1: '#2ECC71',
|
|
green2: '#27AE60',
|
|
mint1: '#1ABC9C',
|
|
mint2: '#16A085',
|
|
blue1: '#3498DB',
|
|
blue2: '#2980B9',
|
|
purple1: '#9B59B6',
|
|
purple2: '#8E44AD',
|
|
light1: '#ECF0F1',
|
|
light2: '#BDC3C7',
|
|
grey1: '#95A5A6',
|
|
grey2: '#7F8C8D',
|
|
dark1: '#34495E',
|
|
dark2: '#2C3E50' };
|
|
|
|
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
let frameCount = 0;
|
|
let ss = [];
|
|
let ss2 = [];
|
|
|
|
let stage = new Konva.Stage({
|
|
container: 'container',
|
|
width: width,
|
|
height: height });
|
|
|
|
|
|
let layer = new Konva.FastLayer({
|
|
clearBeforeDraw: false });
|
|
|
|
stage.add(layer);
|
|
|
|
let bg = new Konva.Rect({
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
fill: bgColor,
|
|
opacity: bgOpacity });
|
|
|
|
layer.add(bg);
|
|
bg.moveToBottom();
|
|
|
|
// stats
|
|
let stats = new Stats();
|
|
stats.showPanel(0);
|
|
stats.domElement.className += ' stats';
|
|
document.body.appendChild(stats.domElement);
|
|
|
|
new Konva.Animation(frame => {
|
|
stats.begin();
|
|
|
|
let z = 0;
|
|
|
|
for (let x = -100; x <= 100; x += 10) {
|
|
for (let y = -100; y <= 100; y += 10) {
|
|
|
|
let s1;
|
|
let s2;
|
|
|
|
if (typeof ss[z] === 'undefined') {
|
|
s1 = new Konva.Line({
|
|
points: [0, 0, 10, 10],
|
|
stroke: 'rgb(0,150,255)',
|
|
strokeWidth: 2,
|
|
globalCompositeOperation: 'lighter' });
|
|
|
|
ss.push(s1);
|
|
layer.add(s1);
|
|
} else
|
|
{
|
|
s1 = ss[z];
|
|
}
|
|
|
|
if (typeof ss2[z] === 'undefined') {
|
|
s2 = new Konva.Line({
|
|
points: [0, 0, 10, 10],
|
|
stroke: 'rgb(0,150,255)',
|
|
strokeWidth: 2,
|
|
globalCompositeOperation: 'lighter' });
|
|
|
|
ss2.push(s2);
|
|
layer.add(s2);
|
|
} else
|
|
{
|
|
s2 = ss2[z];
|
|
}
|
|
|
|
let d = km.dist(x, y, 0, 0);
|
|
let op = km.map(d, 0, 150, 1, 0);
|
|
let r = km.floor(km.map(d, 0, 150, 255, 0));
|
|
let g = 50;
|
|
let b = km.floor(km.map(d, 0, 150, 0, 255));
|
|
let c = `rgb(${r},${g},${b})`;
|
|
let tx = x * 2 + width / 2;
|
|
let ty = y * 2 + height / 2;
|
|
|
|
s1.opacity(op);
|
|
s1.x(tx);
|
|
s1.y(ty);
|
|
s1.points([x * 2, y * 2, 0, 0]);
|
|
s1.rotation(frameCount * 1.5);
|
|
s1.stroke(c);
|
|
|
|
s2.opacity(op);
|
|
s2.x(tx);
|
|
s2.y(ty);
|
|
s2.points([x / 2, y / 2, 0, 0]);
|
|
s2.rotation(-frameCount * 2);
|
|
s2.stroke(c);
|
|
|
|
z++;
|
|
}
|
|
}
|
|
|
|
frameCount++;
|
|
|
|
stats.end();
|
|
}, layer).start(); |