ambient-cbg-ts
Version:
A React.js webpage backgrounds created using the HTML5 Canvas API and jwagner's Simplex Noise library
113 lines (112 loc) • 4.32 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 React, { Component } from "react";
var InitialStyles = {
position: "fixed",
zIndex: -1,
top: 0,
left: 0,
width: 100 + "vw",
height: 100 + "vh",
};
var CanvasBackground = /** @class */ (function (_super) {
__extends(CanvasBackground, _super);
function CanvasBackground(props) {
var _this = _super.call(this, props) || this;
_this.canvasA = React.createRef();
_this.canvasB = React.createRef();
_this.ctx = null;
_this.center = [];
_this.frameId = null;
_this.tick = 0;
return _this;
}
CanvasBackground.prototype.componentDidMount = function () {
this.createCanvas();
this.resize();
this.init();
this.startLoop();
window.addEventListener("resize", this.resize.bind(this));
};
CanvasBackground.prototype.componentWillUnmount = function () {
if (this.frameId) {
window.cancelAnimationFrame(this.frameId);
}
};
CanvasBackground.prototype.init = function () { };
CanvasBackground.prototype.draw = function () { };
CanvasBackground.prototype.render = function () {
var userStyles = this.props.styles;
return (React.createElement(React.Fragment, null,
React.createElement("canvas", { ref: this.canvasA, style: __assign(__assign({}, InitialStyles), userStyles) }),
React.createElement("canvas", { ref: this.canvasB, style: __assign(__assign({}, InitialStyles), userStyles) })));
};
CanvasBackground.prototype.createCanvas = function () {
if (this.canvasA.current && this.canvasB.current) {
this.ctx = {
a: this.canvasA.current.getContext("2d"),
b: this.canvasB.current.getContext("2d"),
};
}
this.center = [];
this.tick = 0;
};
CanvasBackground.prototype.resize = function () {
var _a, _b;
var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
var ca = this.canvasA.current;
var cb = this.canvasB.current;
var ctxa = (_a = this.ctx) === null || _a === void 0 ? void 0 : _a.a;
var ctxb = (_b = this.ctx) === null || _b === void 0 ? void 0 : _b.b;
if (ca && cb && ctxa && ctxb) {
// Canvas A
ca.width = innerWidth;
ca.height = innerHeight;
ctxa.drawImage(cb, 0, 0);
// Canvas B
cb.width = innerWidth;
cb.height = innerHeight;
ctxb.drawImage(ca, 0, 0);
this.center[0] = 0.5 * ca.width;
this.center[1] = 0.5 * ca.height;
}
};
CanvasBackground.prototype.startLoop = function () {
if (this.frameId == null) {
this.frameId = window.requestAnimationFrame(this.initDraw.bind(this));
}
};
CanvasBackground.prototype.initDraw = function () {
this.draw();
this.frameId = window.requestAnimationFrame(this.initDraw.bind(this));
};
CanvasBackground.defaultProps = {
styles: InitialStyles,
};
return CanvasBackground;
}(Component));
export default CanvasBackground;