Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.5 KiB
116 lines
3.5 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
* |
|
* Originally from: |
|
* https://github.com/evgeny-nadymov/telegram-react |
|
* Copyright (C) 2018 Evgeny Nadymov |
|
* https://github.com/evgeny-nadymov/telegram-react/blob/master/LICENSE |
|
*/ |
|
|
|
export const MAX_SPEED = 8.2; |
|
export const MIN_SPEED = 0.8; |
|
|
|
// import { MIN_SPEED, MAX_SPEED } from './BlobDrawable'; |
|
|
|
type Radius = number[]; |
|
|
|
export default class LineBlobDrawable { |
|
public maxRadius: number; |
|
public minRadius: number; |
|
private N: number; |
|
private radius: Radius; |
|
private radiusNext: Radius; |
|
private progress: number[]; |
|
private speed: number[]; |
|
|
|
constructor(n: number) { |
|
this.maxRadius = 10; |
|
this.minRadius = 0; |
|
|
|
this.N = n; |
|
this.radius = new Array(n + 1); |
|
|
|
this.radiusNext = new Array(n + 1); |
|
this.progress = new Array(n + 1); |
|
this.speed = new Array(n + 1); |
|
|
|
for(let i = 0; i <= n; i++) { |
|
this.generateBlob(this.radius, i); |
|
this.generateBlob(this.radiusNext, i); |
|
this.progress[i] = 0; |
|
} |
|
} |
|
|
|
private generateBlob(radius: Radius, i: number) { |
|
const {maxRadius, minRadius, speed} = this; |
|
|
|
const radDif = maxRadius - minRadius; |
|
radius[i] = minRadius + Math.random() * radDif; |
|
speed[i] = 0.017 + 0.003 * Math.random(); |
|
} |
|
|
|
private generateNextBlob() { |
|
const {radius, radiusNext, progress, N} = this; |
|
for(let i = 0; i < N; i++) { |
|
this.generateBlob(radius, i); |
|
this.generateBlob(radiusNext, i); |
|
progress[i] = 0.0; |
|
} |
|
} |
|
|
|
public update(amplitude: number, speedScale: number) { |
|
const {N, progress, speed, radius, radiusNext} = this; |
|
for(let i = 0; i <= N; i++) { |
|
progress[i] += (speed[i] * MIN_SPEED) + amplitude * speed[i] * MAX_SPEED * speedScale; |
|
if(progress[i] >= 1.0) { |
|
progress[i] = 0.0; |
|
radius[i] = radiusNext[i]; |
|
this.generateBlob(radiusNext, i); |
|
} |
|
} |
|
} |
|
|
|
public draw(left: number, top: number, right: number, bottom: number, canvas: HTMLCanvasElement, paint: (ctx: CanvasRenderingContext2D) => void, pinnedTop: number, progressToPinned: number) { |
|
if(canvas.getContext) { |
|
const ctx = canvas.getContext('2d'); |
|
// ctx.globalAlpha = 0.5; |
|
// ctx.lineWidth = 1; |
|
|
|
ctx.beginPath(); |
|
ctx.moveTo(right, bottom); |
|
ctx.lineTo(left, bottom); |
|
|
|
const {radius, radiusNext, N} = this; |
|
for(let i = 0; i <= N; i++) { |
|
if(i === 0) { |
|
const progress = this.progress[i]; |
|
const r1 = radius[i] * (1.0 - progress) + radiusNext[i] * progress; |
|
const y = (top - r1) * progressToPinned + pinnedTop * (1.0 - progressToPinned); |
|
ctx.lineTo(left, y); |
|
} else { |
|
const progress = this.progress[i - 1]; |
|
const r1 = radius[i - 1] * (1.0 - progress) + radiusNext[i - 1] * progress; |
|
const progressNext = this.progress[i]; |
|
const r2 = radius[i] * (1.0 - progressNext) + radiusNext[i] * progressNext; |
|
const x1 = (right - left) / N * (i - 1); |
|
const x2 = (right - left) / N * i; |
|
const cx = x1 + (x2 - x1) / 2; |
|
|
|
const y1 = (top - r1) * progressToPinned + pinnedTop * (1.0 - progressToPinned); |
|
const y2 = (top - r2) * progressToPinned + pinnedTop * (1.0 - progressToPinned); |
|
ctx.bezierCurveTo(cx, y1, cx, y2, x2, y2); |
|
if(i === N) { |
|
ctx.lineTo(right, bottom); |
|
} |
|
} |
|
} |
|
|
|
// ctx.scale(1.0, 1.0); |
|
paint(ctx); |
|
ctx.fill(); |
|
ctx.closePath(); |
|
} |
|
} |
|
}
|
|
|