enricobuehler
b228f3cd8d
All checks were successful
continuous-integration/drone/push Build is passing
improve landing bg
127 lines
2.6 KiB
TypeScript
127 lines
2.6 KiB
TypeScript
interface Point {
|
|
x: number;
|
|
y: number;
|
|
color: string;
|
|
radius: number;
|
|
}
|
|
|
|
const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
|
|
|
|
const initialPoints: Array<Point> = [{
|
|
x: 500,
|
|
y: 400,
|
|
color: "purple",
|
|
radius: Math.random() * 200
|
|
},
|
|
{
|
|
x: 900,
|
|
y: 500,
|
|
color: "#326CCC",
|
|
radius: Math.random() * 200
|
|
},
|
|
{
|
|
x: 1600,
|
|
y: 400,
|
|
color: "#95B2F5",
|
|
radius: Math.random() * 200
|
|
},
|
|
{
|
|
x: 1200,
|
|
y: 600,
|
|
color: "#32C3E3",
|
|
radius: Math.random() * 200
|
|
|
|
},
|
|
{
|
|
x: 600,
|
|
y: 500,
|
|
color: "#8AFFAD",
|
|
radius: Math.random() * 200
|
|
|
|
},
|
|
{
|
|
x: 900,
|
|
y: 300,
|
|
color: "purple",
|
|
radius: Math.random() * 200
|
|
|
|
},
|
|
]
|
|
|
|
export class GradientBackground {
|
|
context: CanvasRenderingContext2D;
|
|
|
|
constructor(context: CanvasRenderingContext2D) {
|
|
this.context = context;
|
|
this.draw = this.draw.bind(this);
|
|
|
|
}
|
|
|
|
draw(time: number) {
|
|
const { width, height } = this.context.canvas;
|
|
|
|
this.context.clearRect(0, 0, width, height * 2);
|
|
|
|
|
|
this.context.save();
|
|
|
|
this.context.translate(width * 0.5, height * 0.5);
|
|
|
|
|
|
const angle = (time * 0.01) % 360;
|
|
const radian = angle * (Math.PI / 180);
|
|
|
|
this.context.rotate(radian);
|
|
|
|
this.context.translate(width * -0.5, height * -0.5);
|
|
|
|
|
|
initialPoints.forEach((point, index) => {
|
|
const { color, radius } = point;
|
|
|
|
|
|
// Calculate the position/angle on a circle by the time
|
|
const angle = time * 0.05 + index * 10 % 360;
|
|
|
|
// Convert the angle to radian
|
|
const radian = angle * (Math.PI / 180);
|
|
|
|
// Calculate the offset based on the radius
|
|
const offsetX = Math.cos(radian) * radius;
|
|
const offsetY = Math.sin(radian) * radius;
|
|
|
|
// Calculate the position based on offset and initial position
|
|
const x = offsetX + point.x;
|
|
const y = offsetY + point.y;
|
|
|
|
// Create the gradient
|
|
const gradient = this.context.createRadialGradient(x, y, 0, x, y, 500);
|
|
|
|
gradient.addColorStop(0, color);
|
|
gradient.addColorStop(1, "rgba(0,0,0,0)");
|
|
|
|
this.context.fillStyle = gradient;
|
|
this.context.globalCompositeOperation = "lighten";
|
|
|
|
|
|
// Draw a rect with the gradient
|
|
this.context.fillRect(0, 0, width, height);
|
|
|
|
|
|
})
|
|
|
|
this.context.restore();
|
|
|
|
return requestAnimationFrame(this.draw);
|
|
}
|
|
}
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
if (ctx) {
|
|
const bg = new GradientBackground(ctx);
|
|
|
|
requestAnimationFrame(bg.draw);
|
|
}
|
|
|