ambient-cbg-ts
Version:
A React.js webpage backgrounds created using the HTML5 Canvas API and jwagner's Simplex Noise library
164 lines (163 loc) • 6.37 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import CanvasBackground from "./CanvasBackground";
import { HALF_PI, TAU, TO_RAD, rand, fadeInOut } from "../utils/Math";
var cos = Math.cos, sin = Math.sin, round = Math.round;
var pipeCount = 30;
var pipePropCount = 8;
var pipePropsLength = pipeCount * pipePropCount;
var turnCount = 8;
var turnAmount = (360 / turnCount) * TO_RAD;
var turnChanceRange = 58;
var baseSpeed = 0.5;
var rangeSpeed = 1;
var baseTTL = 100;
var rangeTTL = 300;
var baseWidth = 2;
var rangeWidth = 4;
var baseHue = 180;
var rangeHue = 60;
var Pipeline = /** @class */ (function (_super) {
__extends(Pipeline, _super);
function Pipeline(props) {
var _this = _super.call(this, props) || this;
_this.tick = 0;
_this.pipeProps = null;
return _this;
}
Pipeline.prototype.init = function () {
this.initPipes();
};
Pipeline.prototype.draw = function () {
this.updatePipes();
this.renderPipeline();
};
Pipeline.prototype.initPipes = function () {
this.pipeProps = new Float32Array(pipePropsLength);
for (var i = 0; i < pipePropsLength; i += pipePropCount) {
this.initPipe(i);
}
};
Pipeline.prototype.initPipe = function (i) {
var x, y, direction, speed, life, ttl, width, hue;
var ca = this.canvasA.current;
if (ca && this.pipeProps) {
x = rand(ca.width);
y = this.center[1];
direction = round(rand(1)) ? HALF_PI : TAU - HALF_PI;
speed = baseSpeed + rand(rangeSpeed);
life = 0;
ttl = baseTTL + rand(rangeTTL);
width = baseWidth + rand(rangeWidth);
hue = baseHue + rand(rangeHue);
this.pipeProps.set([x, y, direction, speed, life, ttl, width, hue], i);
}
};
Pipeline.prototype.updatePipes = function () {
this.tick++;
var i;
for (i = 0; i < pipePropsLength; i += pipePropCount) {
this.updatePipe(i);
}
};
Pipeline.prototype.updatePipe = function (i) {
if (this.pipeProps) {
var i2 = 1 + i, i3 = 2 + i, i4 = 3 + i, i5 = 4 + i, i6 = 5 + i, i7 = 6 + i, i8 = 7 + i;
var x = void 0, y = void 0, direction = void 0, speed = void 0, life = void 0, ttl = void 0, width = void 0, hue = void 0, turnChance = void 0, turnBias = void 0;
x = this.pipeProps[i];
y = this.pipeProps[i2];
direction = this.pipeProps[i3];
speed = this.pipeProps[i4];
life = this.pipeProps[i5];
ttl = this.pipeProps[i6];
width = this.pipeProps[i7];
hue = this.pipeProps[i8];
this.drawPipe(x, y, life, ttl, width, hue);
life++;
x += cos(direction) * speed;
y += sin(direction) * speed;
turnChance =
!(this.tick % round(rand(turnChanceRange))) &&
(!(round(x) % 6) || !(round(y) % 6));
turnBias = round(rand(1)) ? -1 : 1;
direction += turnChance ? turnAmount * turnBias : 0;
this.pipeProps[i] = x;
this.pipeProps[i2] = y;
this.pipeProps[i3] = direction;
this.pipeProps[i5] = life;
this.checkBounds(x, y);
life > ttl && this.initPipe(i);
}
};
Pipeline.prototype.drawPipe = function (x, y, life, ttl, width, hue) {
var _a;
if ((_a = this.ctx) === null || _a === void 0 ? void 0 : _a.a) {
this.ctx.a.save();
this.ctx.a.strokeStyle = "hsla(" + hue + ",75%,50%," + fadeInOut(life, ttl) * 0.125 + ")";
this.ctx.a.beginPath();
this.ctx.a.arc(x, y, width, 0, TAU);
this.ctx.a.stroke();
this.ctx.a.closePath();
this.ctx.a.restore();
}
};
Pipeline.prototype.checkBounds = function (x, y) {
if (this.canvasA.current) {
if (x > this.canvasA.current.width) {
x = 0;
}
if (x < 0) {
x = this.canvasA.current.width;
}
if (y > this.canvasA.current.height) {
y = 0;
}
if (y < 0) {
y = this.canvasA.current.height;
}
}
};
Pipeline.prototype.renderPipeline = function () {
var _a;
if (((_a = this.ctx) === null || _a === void 0 ? void 0 : _a.b) && this.canvasA.current && this.canvasB.current) {
this.ctx.b.save();
this.ctx.b.fillStyle = this.props.backgroundColor;
this.ctx.b.fillRect(0, 0, this.canvasB.current.width, this.canvasB.current.height);
this.ctx.b.restore();
this.ctx.b.save();
this.ctx.b.filter = "blur(12px)";
this.ctx.b.drawImage(this.canvasA.current, 0, 0);
this.ctx.b.restore();
this.ctx.b.save();
this.ctx.b.drawImage(this.canvasA.current, 0, 0);
this.ctx.b.restore();
}
};
Pipeline.defaultProps = __assign(__assign({}, CanvasBackground.defaultProps), { backgroundColor: "hsla(150,80%,1%,1)" });
return Pipeline;
}(CanvasBackground));
export default Pipeline;