Eduard Kuzmenko
3 years ago
19 changed files with 1055 additions and 188 deletions
@ -0,0 +1,393 @@
@@ -0,0 +1,393 @@
|
||||
import { animate } from "../../helpers/animation"; |
||||
import { hexToRgb } from "../../helpers/color"; |
||||
|
||||
const WIDTH = 50; |
||||
const HEIGHT = WIDTH; |
||||
|
||||
export default class ChatBackgroundGradientRenderer { |
||||
private readonly _width = WIDTH; |
||||
private readonly _height = HEIGHT; |
||||
private _phase: number; |
||||
private _tail: number; |
||||
private readonly _tails = 90; |
||||
private readonly _scrollTails = 50; |
||||
private _frames: ImageData[]; |
||||
private _colors: {r: number, g: number, b: number}[]; |
||||
/* private readonly _curve = [ |
||||
0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400, 500, 600, 700, 800, 900, |
||||
1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1830, 1860, 1890, 1920, |
||||
1950, 1980, 2010, 2040, 2070, 2100, 2130, 2160, 2190, 2220, 2250, 2280, 2310, |
||||
2340, 2370, 2400, 2430, 2460, 2490, 2520, 2550, 2580, 2610, 2630, 2640, 2650, |
||||
2660, 2670, 2680, 2690, 2700 |
||||
]; */ |
||||
private readonly _curve = [ |
||||
0 , 0.25 , 0.50 , 0.75 , 1 , 1.5 , 2 , 2.5 , 3 , 3.5 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , |
||||
13 , 14 , 15 , 16 , 17 , 18 , 18.3 , 18.6 , 18.9 , 19.2 , 19.5 , 19.8 , 20.1 , 20.4 , 20.7 , |
||||
21.0 , 21.3 , 21.6 , 21.9 , 22.2 , 22.5 , 22.8 , 23.1 , 23.4 , 23.7 , 24.0 , 24.3 , 24.6 , |
||||
24.9 , 25.2 , 25.5 , 25.8 , 26.1 , 26.3 , 26.4 , 26.5 , 26.6 , 26.7 , 26.8 , 26.9 , 27 , |
||||
]; |
||||
private readonly _incrementalCurve: number[]; |
||||
private readonly _positions = [ |
||||
{ x: 0.80, y: 0.10 }, |
||||
{ x: 0.60, y: 0.20 }, |
||||
{ x: 0.35, y: 0.25 }, |
||||
{ x: 0.25, y: 0.60 }, |
||||
{ x: 0.20, y: 0.90 }, |
||||
{ x: 0.40, y: 0.80 }, |
||||
{ x: 0.65, y: 0.75 }, |
||||
{ x: 0.75, y: 0.40 } |
||||
]; |
||||
private readonly _phases = this._positions.length; |
||||
private _onWheelRAF: number; |
||||
private _scrollDelta: number; |
||||
|
||||
// private _ts = 0;
|
||||
// private _fps = 15;
|
||||
// private _frametime = 1000 / this._fps;
|
||||
// private _raf: number;
|
||||
|
||||
private _canvas: HTMLCanvasElement; |
||||
private _ctx: CanvasRenderingContext2D; |
||||
private _hc: HTMLCanvasElement; |
||||
private _hctx: CanvasRenderingContext2D; |
||||
|
||||
private _addedScrollListener: boolean; |
||||
private _animatingToNextPosition: boolean; |
||||
|
||||
constructor() { |
||||
const diff = this._tails / this._curve[this._curve.length - 1]; |
||||
|
||||
for(let i = 0, length = this._curve.length; i < length; ++i) { |
||||
this._curve[i] = this._curve[i] * diff; |
||||
} |
||||
|
||||
this._incrementalCurve = this._curve.map((v, i, arr) => { |
||||
return v - (arr[i - 1] ?? 0); |
||||
}); |
||||
} |
||||
|
||||
private hexToRgb(hex: string) { |
||||
const result = hexToRgb(hex); |
||||
return {r: result[0], g: result[1], b: result[2]}; |
||||
} |
||||
|
||||
private getPositions(shift: number) { |
||||
const positions = this._positions.slice(); |
||||
while(shift > 0) { |
||||
positions.push(positions.shift()); |
||||
--shift; |
||||
} |
||||
|
||||
const result: typeof positions = []; |
||||
for(let i = 0; i < positions.length; i += 2) { |
||||
result.push(positions[i]); |
||||
} |
||||
return result; |
||||
} |
||||
|
||||
private getNextPositions(phase: number, curveMax: number, curve: number[]) { |
||||
const pos = this.getPositions(phase); |
||||
if(!curve[0] && curve.length === 1) { |
||||
return [pos]; |
||||
} |
||||
|
||||
const nextPos = this.getPositions(++phase % this._phases); |
||||
const distances = nextPos.map((nextPos, idx) => { |
||||
return { |
||||
x: (nextPos.x - pos[idx].x) / curveMax, |
||||
y: (nextPos.y - pos[idx].y) / curveMax, |
||||
}; |
||||
}); |
||||
|
||||
const positions = curve.map((value) => { |
||||
return distances.map((distance, idx) => { |
||||
return { |
||||
x: pos[idx].x + distance.x * value, |
||||
y: pos[idx].y + distance.y * value |
||||
}; |
||||
}); |
||||
}); |
||||
|
||||
return positions; |
||||
} |
||||
|
||||
private curPosition(phase: number, tail: number) { |
||||
const positions = this.getNextPositions(phase, this._tails, [tail]); |
||||
return positions[0]; |
||||
} |
||||
|
||||
private changeTail(diff: number) { |
||||
this._tail += diff; |
||||
|
||||
while(this._tail >= this._tails) { |
||||
this._tail -= this._tails; |
||||
if(++this._phase >= this._phases) { |
||||
this._phase -= this._phases; |
||||
} |
||||
} |
||||
|
||||
while(this._tail < 0) { |
||||
this._tail += this._tails; |
||||
if(--this._phase < 0) { |
||||
this._phase += this._phases; |
||||
} |
||||
} |
||||
} |
||||
|
||||
private onWheel = (e: {deltaY: number}) => { |
||||
if(this._animatingToNextPosition) { |
||||
return; |
||||
} |
||||
|
||||
this._scrollDelta += e.deltaY; |
||||
if(this._onWheelRAF === undefined) { |
||||
this._onWheelRAF = requestAnimationFrame(this.drawOnWheel); |
||||
} |
||||
}; |
||||
|
||||
private drawOnWheel = () => { |
||||
let diff = this._scrollDelta / this._scrollTails; |
||||
this._scrollDelta %= this._scrollTails; |
||||
diff = diff > 0 ? Math.floor(diff) : Math.ceil(diff); |
||||
if(diff) { |
||||
this.changeTail(diff); |
||||
const curPos = this.curPosition(this._phase, this._tail); |
||||
this.drawGradient(curPos); |
||||
} |
||||
this._onWheelRAF = undefined; |
||||
}; |
||||
|
||||
private drawNextPositionAnimated = () => { |
||||
const frames = this._frames; |
||||
const id = frames.shift(); |
||||
if(id) { |
||||
this.drawImageData(id); |
||||
} |
||||
|
||||
const leftLength = frames.length; |
||||
if(!leftLength) { |
||||
this._animatingToNextPosition = undefined; |
||||
} |
||||
|
||||
return !!leftLength; |
||||
}; |
||||
|
||||
private getGradientImageData(positions: {x: number, y: number}[]) { |
||||
const id = this._hctx.createImageData(this._width, this._height); |
||||
const pixels = id.data; |
||||
|
||||
let offset = 0; |
||||
for(let y = 0; y < this._height; ++y) { |
||||
const directPixelY = y / this._height; |
||||
const centerDistanceY = directPixelY - 0.5; |
||||
const centerDistanceY2 = centerDistanceY * centerDistanceY; |
||||
|
||||
for(let x = 0; x < this._width; ++x) { |
||||
const directPixelX = x / this._width; |
||||
|
||||
const centerDistanceX = directPixelX - 0.5; |
||||
const centerDistance = Math.sqrt(centerDistanceX * centerDistanceX + centerDistanceY2); |
||||
|
||||
const swirlFactor = 0.35 * centerDistance; |
||||
const theta = swirlFactor * swirlFactor * 0.8 * 8.0; |
||||
const sinTheta = Math.sin(theta); |
||||
const cosTheta = Math.cos(theta); |
||||
|
||||
const pixelX = Math.max(0.0, Math.min(1.0, 0.5 + centerDistanceX * cosTheta - centerDistanceY * sinTheta)); |
||||
const pixelY = Math.max(0.0, Math.min(1.0, 0.5 + centerDistanceX * sinTheta + centerDistanceY * cosTheta)); |
||||
|
||||
let distanceSum = 0.0; |
||||
|
||||
let r = 0.0; |
||||
let g = 0.0; |
||||
let b = 0.0; |
||||
|
||||
for(let i = 0; i < this._colors.length; i++) { |
||||
const colorX = positions[i].x; |
||||
const colorY = positions[i].y; |
||||
|
||||
const distanceX = pixelX - colorX; |
||||
const distanceY = pixelY - colorY; |
||||
|
||||
let distance = Math.max(0.0, 0.9 - Math.sqrt(distanceX * distanceX + distanceY * distanceY)); |
||||
distance = distance * distance * distance * distance; |
||||
distanceSum += distance; |
||||
|
||||
r += distance * this._colors[i].r / 255; |
||||
g += distance * this._colors[i].g / 255; |
||||
b += distance * this._colors[i].b / 255; |
||||
} |
||||
|
||||
pixels[offset++] = r / distanceSum * 255.0; |
||||
pixels[offset++] = g / distanceSum * 255.0; |
||||
pixels[offset++] = b / distanceSum * 255.0; |
||||
pixels[offset++] = 0xFF; |
||||
} |
||||
} |
||||
return id; |
||||
} |
||||
|
||||
private drawImageData(id: ImageData) { |
||||
this._hctx.putImageData(id, 0, 0); |
||||
this._ctx.drawImage(this._hc, 0, 0, this._width, this._height); |
||||
} |
||||
|
||||
private drawGradient(positions: {x: number, y: number}[]) { |
||||
this.drawImageData(this.getGradientImageData(positions)); |
||||
} |
||||
|
||||
// private doAnimate = () => {
|
||||
// const now = +Date.now();
|
||||
// if(!document.hasFocus() || (now - this._ts) < this._frametime) {
|
||||
// this._raf = requestAnimationFrame(this.doAnimate);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this._ts = now;
|
||||
// this.changeTail(1);
|
||||
// const cur_pos = this.curPosition(this._phase, this._tail);
|
||||
// this.drawGradient(cur_pos);
|
||||
// this._raf = requestAnimationFrame(this.doAnimate);
|
||||
// };
|
||||
|
||||
// public animate(start?: boolean) {
|
||||
// if(!start) {
|
||||
// cancelAnimationFrame(this._raf);
|
||||
// return;
|
||||
// }
|
||||
// this.doAnimate();
|
||||
// }
|
||||
|
||||
public init(el: HTMLCanvasElement) { |
||||
this._frames = []; |
||||
this._phase = 0; |
||||
this._tail = 0; |
||||
this._scrollDelta = 0; |
||||
if(this._onWheelRAF !== undefined) { |
||||
cancelAnimationFrame(this._onWheelRAF); |
||||
this._onWheelRAF = undefined; |
||||
} |
||||
|
||||
const colors = el.getAttribute('data-colors').split(',').reverse(); |
||||
this._colors = colors.map(color => { |
||||
return this.hexToRgb(color); |
||||
}); |
||||
|
||||
if(!this._hc) { |
||||
this._hc = document.createElement('canvas'); |
||||
this._hc.width = this._width; |
||||
this._hc.height = this._height; |
||||
this._hctx = this._hc.getContext('2d'); |
||||
} |
||||
|
||||
this._canvas = el; |
||||
this._ctx = this._canvas.getContext('2d'); |
||||
this.update(); |
||||
} |
||||
|
||||
public update() { |
||||
if(this._colors.length < 2) { |
||||
const color = this._colors[0]; |
||||
this._ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`; |
||||
this._ctx.fillRect(0, 0, this._width, this._height); |
||||
return; |
||||
} |
||||
|
||||
const pos = this.curPosition(this._phase, this._tail); |
||||
this.drawGradient(pos); |
||||
} |
||||
|
||||
public toNextPosition() { |
||||
if(this._colors.length < 2) { |
||||
return; |
||||
} |
||||
|
||||
const tail = this._tail; |
||||
const tails = this._tails; |
||||
|
||||
let nextPhaseOnIdx: number; |
||||
|
||||
const curve: number[] = []; |
||||
for(let i = 0, length = this._incrementalCurve.length; i < length; ++i) { |
||||
const inc = this._incrementalCurve[i]; |
||||
let value = (curve[i - 1] ?? tail) + inc; |
||||
|
||||
if(+value.toFixed(2) > tails && nextPhaseOnIdx === undefined) { |
||||
nextPhaseOnIdx = i; |
||||
value %= tails; |
||||
} |
||||
|
||||
curve.push(value); |
||||
} |
||||
|
||||
const currentPhaseCurve = curve.slice(0, nextPhaseOnIdx); |
||||
const nextPhaseCurve = nextPhaseOnIdx !== undefined ? curve.slice(nextPhaseOnIdx) : []; |
||||
|
||||
[currentPhaseCurve, nextPhaseCurve].forEach((curve, idx, curves) => { |
||||
const last = curve[curve.length - 1]; |
||||
if(last !== undefined && last > tails) { |
||||
curve[curve.length - 1] = +last.toFixed(2); |
||||
} |
||||
|
||||
this._tail = last ?? 0; |
||||
|
||||
if(!curve.length) { |
||||
return; |
||||
} |
||||
|
||||
const positions = this.getNextPositions(this._phase, tails, curve); |
||||
if(idx !== (curves.length - 1)) { |
||||
if(++this._phase >= this._phases) { |
||||
this._phase -= this._phases; |
||||
} |
||||
} |
||||
|
||||
const ids = positions.map((pos) => { |
||||
return this.getGradientImageData(pos); |
||||
}); |
||||
|
||||
this._frames.push(...ids); |
||||
}); |
||||
|
||||
this._animatingToNextPosition = true; |
||||
animate(this.drawNextPositionAnimated); |
||||
} |
||||
|
||||
public scrollAnimate(start?: boolean) { |
||||
if(this._colors.length < 2 && start) { |
||||
return; |
||||
} |
||||
|
||||
if(start && !this._addedScrollListener) { |
||||
document.addEventListener('wheel', this.onWheel); |
||||
this._addedScrollListener = true; |
||||
} else if(!start && this._addedScrollListener) { |
||||
document.removeEventListener('wheel', this.onWheel); |
||||
this._addedScrollListener = false; |
||||
} |
||||
} |
||||
|
||||
public cleanup() { |
||||
this.scrollAnimate(false); |
||||
// this.animate(false);
|
||||
} |
||||
|
||||
public static createCanvas(colors?: string) { |
||||
const canvas = document.createElement('canvas'); |
||||
canvas.width = WIDTH; |
||||
canvas.height = HEIGHT; |
||||
if(colors !== undefined) { |
||||
canvas.dataset.colors = colors; |
||||
} |
||||
|
||||
return canvas; |
||||
} |
||||
|
||||
public static create(colors?: string) { |
||||
const canvas = this.createCanvas(colors); |
||||
const gradientRenderer = new ChatBackgroundGradientRenderer(); |
||||
gradientRenderer.init(canvas); |
||||
|
||||
return {gradientRenderer, canvas}; |
||||
} |
||||
} |
||||
@ -0,0 +1,121 @@
@@ -0,0 +1,121 @@
|
||||
/* |
||||
* https://github.com/morethanwords/tweb
|
||||
* Copyright (C) 2019-2021 Eduard Kuzmenko |
||||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||||
*/ |
||||
|
||||
import { IS_SAFARI } from "../../environment/userAgent"; |
||||
import { indexOfAndSplice } from "../../helpers/array"; |
||||
import { renderImageFromUrlPromise } from "../../helpers/dom/renderImageFromUrl"; |
||||
import { deepEqual } from "../../helpers/object"; |
||||
|
||||
type ChatBackgroundPatternRendererInitOptions = { |
||||
url: string, |
||||
width: number, |
||||
height: number |
||||
}; |
||||
|
||||
export default class ChatBackgroundPatternRenderer { |
||||
private static INSTANCES: ChatBackgroundPatternRenderer[] = []; |
||||
|
||||
private pattern: CanvasPattern; |
||||
private objectUrl: string; |
||||
private options: ChatBackgroundPatternRendererInitOptions; |
||||
private canvases: Set<HTMLCanvasElement>; |
||||
private createCanvasPatternPromise: Promise<void>; |
||||
private exportCanvasPatternToImagePromise: Promise<string>; |
||||
// private img: HTMLImageElement;
|
||||
|
||||
constructor() { |
||||
this.canvases = new Set(); |
||||
} |
||||
|
||||
public static getInstance(options: ChatBackgroundPatternRendererInitOptions) { |
||||
let instance = this.INSTANCES.find((instance) => { |
||||
return deepEqual(instance.options, options); |
||||
}); |
||||
|
||||
if(!instance) { |
||||
instance = new ChatBackgroundPatternRenderer(); |
||||
instance.init(options); |
||||
this.INSTANCES.push(instance); |
||||
} |
||||
|
||||
return instance; |
||||
} |
||||
|
||||
public init(options: ChatBackgroundPatternRendererInitOptions) { |
||||
this.options = options; |
||||
} |
||||
|
||||
public renderToCanvas(canvas: HTMLCanvasElement) { |
||||
return this.createCanvasPattern(canvas).then(() => { |
||||
return this.fillCanvas(canvas); |
||||
}); |
||||
} |
||||
|
||||
private createCanvasPattern(canvas: HTMLCanvasElement) { |
||||
if(this.createCanvasPatternPromise) return this.createCanvasPatternPromise; |
||||
return this.createCanvasPatternPromise = new Promise((resolve) => { |
||||
const img = document.createElement('img'); |
||||
img.crossOrigin = 'anonymous'; |
||||
renderImageFromUrlPromise(img, this.options.url, false).then(() => { |
||||
let createPatternFrom: HTMLImageElement | HTMLCanvasElement; |
||||
if(IS_SAFARI) { |
||||
const canvas = createPatternFrom = document.createElement('canvas'); |
||||
canvas.width = img.naturalWidth; |
||||
canvas.height = img.naturalHeight; |
||||
const ctx = canvas.getContext('2d'); |
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); |
||||
} else { |
||||
createPatternFrom = img; |
||||
} |
||||
|
||||
// this.img = img;
|
||||
this.pattern = canvas.getContext('2d').createPattern(createPatternFrom, 'repeat-x'); |
||||
resolve(); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
public exportCanvasPatternToImage(canvas: HTMLCanvasElement) { |
||||
if(this.exportCanvasPatternToImagePromise) return this.exportCanvasPatternToImagePromise; |
||||
return this.exportCanvasPatternToImagePromise = new Promise<string>((resolve) => { |
||||
canvas.toBlob((blob) => { |
||||
const newUrl = this.objectUrl = URL.createObjectURL(blob); |
||||
resolve(newUrl); |
||||
}, 'image/png'); |
||||
}); |
||||
} |
||||
|
||||
public cleanup(canvas: HTMLCanvasElement) { |
||||
this.canvases.delete(canvas); |
||||
|
||||
if(!this.canvases.size) { |
||||
indexOfAndSplice(ChatBackgroundPatternRenderer.INSTANCES, this); |
||||
|
||||
if(this.objectUrl) { |
||||
URL.revokeObjectURL(this.objectUrl); |
||||
} |
||||
} |
||||
} |
||||
|
||||
public fillCanvas(canvas: HTMLCanvasElement) { |
||||
const context = canvas.getContext('2d'); |
||||
context.fillStyle = this.pattern; |
||||
context.fillRect(0, 0, canvas.width, canvas.height); |
||||
// context.drawImage(this.img, 0, 0, canvas.width, canvas.height);
|
||||
} |
||||
|
||||
public setCanvasDimensions(canvas: HTMLCanvasElement) { |
||||
canvas.width = this.options.width * window.devicePixelRatio; |
||||
canvas.height = this.options.height * window.devicePixelRatio * 1.5; |
||||
} |
||||
|
||||
public createCanvas() { |
||||
const canvas = document.createElement('canvas'); |
||||
this.canvases.add(canvas); |
||||
this.setCanvasDimensions(canvas); |
||||
return canvas; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue