🎨 style: code format
This commit is contained in:
parent
e0f4461fe5
commit
219bb6db37
@ -18,134 +18,134 @@ let pointerX = 0;
|
|||||||
let pointerY = 0;
|
let pointerY = 0;
|
||||||
|
|
||||||
let tap =
|
let tap =
|
||||||
"ontouchstart" in window || navigator.msMaxTouchPoints
|
"ontouchstart" in window || navigator.msMaxTouchPoints
|
||||||
? "touchstart"
|
? "touchstart"
|
||||||
: "mousedown";
|
: "mousedown";
|
||||||
|
|
||||||
// sea blue
|
// sea blue
|
||||||
let colors = ["127, 180, 226", "157, 209, 243", "204, 229, 255"];
|
let colors = ["127, 180, 226", "157, 209, 243", "204, 229, 255"];
|
||||||
|
|
||||||
function setCanvasSize() {
|
function setCanvasSize() {
|
||||||
canvasEl.width = window.innerWidth;
|
canvasEl.width = window.innerWidth;
|
||||||
canvasEl.height = window.innerHeight;
|
canvasEl.height = window.innerHeight;
|
||||||
canvasEl.style.width = window.innerWidth + "px";
|
canvasEl.style.width = window.innerWidth + "px";
|
||||||
canvasEl.style.height = window.innerHeight + "px";
|
canvasEl.style.height = window.innerHeight + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateCoords(e) {
|
function updateCoords(e) {
|
||||||
pointerX = e.clientX || e.touches[0].clientX;
|
pointerX = e.clientX || e.touches[0].clientX;
|
||||||
pointerY = e.clientY || e.touches[0].clientY;
|
pointerY = e.clientY || e.touches[0].clientY;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setParticuleDirection(p) {
|
function setParticuleDirection(p) {
|
||||||
let angle = (anime.random(0, 360) * Math.PI) / 180;
|
let angle = (anime.random(0, 360) * Math.PI) / 180;
|
||||||
let value = anime.random(minDiffuseRadius, maxDiffuseRadius);
|
let value = anime.random(minDiffuseRadius, maxDiffuseRadius);
|
||||||
let radius = [-1, 1][anime.random(0, 1)] * value;
|
let radius = [-1, 1][anime.random(0, 1)] * value;
|
||||||
return {
|
return {
|
||||||
x: p.x + radius * Math.cos(angle),
|
x: p.x + radius * Math.cos(angle),
|
||||||
y: p.y + radius * Math.sin(angle)
|
y: p.y + radius * Math.sin(angle),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function createParticule(x, y) {
|
function createParticule(x, y) {
|
||||||
let p = {};
|
let p = {};
|
||||||
p.x = x;
|
p.x = x;
|
||||||
p.y = y;
|
p.y = y;
|
||||||
p.color =
|
p.color =
|
||||||
"rgba(" +
|
"rgba(" +
|
||||||
colors[anime.random(0, colors.length - 1)] +
|
colors[anime.random(0, colors.length - 1)] +
|
||||||
"," +
|
"," +
|
||||||
anime.random(0.2, 0.8) +
|
anime.random(0.2, 0.8) +
|
||||||
")";
|
")";
|
||||||
p.radius = anime.random(minCircleRadius, maxCircleRadius);
|
p.radius = anime.random(minCircleRadius, maxCircleRadius);
|
||||||
p.endPos = setParticuleDirection(p);
|
p.endPos = setParticuleDirection(p);
|
||||||
p.draw = function () {
|
p.draw = function () {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
||||||
ctx.fillStyle = p.color;
|
ctx.fillStyle = p.color;
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
};
|
};
|
||||||
return p;
|
return p;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createCircle(x, y) {
|
function createCircle(x, y) {
|
||||||
let p = {};
|
let p = {};
|
||||||
p.x = x;
|
p.x = x;
|
||||||
p.y = y;
|
p.y = y;
|
||||||
p.color = "#000";
|
p.color = "#000";
|
||||||
p.radius = 0.1;
|
p.radius = 0.1;
|
||||||
p.alpha = 0.5;
|
p.alpha = 0.5;
|
||||||
p.lineWidth = 6;
|
p.lineWidth = 6;
|
||||||
p.draw = function () {
|
p.draw = function () {
|
||||||
ctx.globalAlpha = p.alpha;
|
ctx.globalAlpha = p.alpha;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
||||||
ctx.lineWidth = p.lineWidth;
|
ctx.lineWidth = p.lineWidth;
|
||||||
ctx.strokeStyle = p.color;
|
ctx.strokeStyle = p.color;
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.globalAlpha = 1;
|
ctx.globalAlpha = 1;
|
||||||
};
|
};
|
||||||
return p;
|
return p;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderParticule(anim) {
|
function renderParticule(anim) {
|
||||||
for (let i = 0; i < anim.animatables.length; i++) {
|
for (let i = 0; i < anim.animatables.length; i++) {
|
||||||
anim.animatables[i].target.draw();
|
anim.animatables[i].target.draw();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function animateParticules(x, y) {
|
function animateParticules(x, y) {
|
||||||
let circle = createCircle(x, y);
|
let circle = createCircle(x, y);
|
||||||
let particules = [];
|
let particules = [];
|
||||||
for (let i = 0; i < numberOfParticules; i++) {
|
for (let i = 0; i < numberOfParticules; i++) {
|
||||||
particules.push(createParticule(x, y));
|
particules.push(createParticule(x, y));
|
||||||
}
|
}
|
||||||
anime
|
anime
|
||||||
.timeline()
|
.timeline()
|
||||||
.add({
|
.add({
|
||||||
targets: particules,
|
targets: particules,
|
||||||
x: function (p) {
|
x: function (p) {
|
||||||
return p.endPos.x;
|
return p.endPos.x;
|
||||||
},
|
},
|
||||||
y: function (p) {
|
y: function (p) {
|
||||||
return p.endPos.y;
|
return p.endPos.y;
|
||||||
},
|
},
|
||||||
radius: 0.1,
|
radius: 0.1,
|
||||||
duration: anime.random(minAnimeDuration, maxAnimeDuration),
|
duration: anime.random(minAnimeDuration, maxAnimeDuration),
|
||||||
easing: "easeOutExpo",
|
easing: "easeOutExpo",
|
||||||
update: renderParticule
|
update: renderParticule,
|
||||||
})
|
})
|
||||||
.add({
|
.add({
|
||||||
targets: circle,
|
targets: circle,
|
||||||
radius: anime.random(minOrbitRadius, maxOrbitRadius),
|
radius: anime.random(minOrbitRadius, maxOrbitRadius),
|
||||||
lineWidth: 0,
|
lineWidth: 0,
|
||||||
alpha: {
|
alpha: {
|
||||||
value: 0,
|
value: 0,
|
||||||
easing: "linear",
|
easing: "linear",
|
||||||
duration: anime.random(600, 800)
|
duration: anime.random(600, 800),
|
||||||
},
|
},
|
||||||
duration: anime.random(1200, 1800),
|
duration: anime.random(1200, 1800),
|
||||||
easing: "easeOutExpo",
|
easing: "easeOutExpo",
|
||||||
update: renderParticule,
|
update: renderParticule,
|
||||||
offset: 0
|
offset: 0,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let render = anime({
|
let render = anime({
|
||||||
duration: Infinity,
|
duration: Infinity,
|
||||||
update: function () {
|
update: function () {
|
||||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener(
|
document.addEventListener(
|
||||||
tap,
|
tap,
|
||||||
function (e) {
|
function (e) {
|
||||||
render.play();
|
render.play();
|
||||||
updateCoords(e);
|
updateCoords(e);
|
||||||
animateParticules(pointerX, pointerY);
|
animateParticules(pointerX, pointerY);
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
setCanvasSize();
|
setCanvasSize();
|
||||||
|
@ -1,154 +1,180 @@
|
|||||||
class Circle {
|
class Circle {
|
||||||
constructor({ origin, speed, color, angle, context }) {
|
constructor({ origin, speed, color, angle, context }) {
|
||||||
this.origin = origin
|
this.origin = origin;
|
||||||
this.position = { ...this.origin }
|
this.position = { ...this.origin };
|
||||||
this.color = color
|
this.color = color;
|
||||||
this.speed = speed
|
this.speed = speed;
|
||||||
this.angle = angle
|
this.angle = angle;
|
||||||
this.context = context
|
this.context = context;
|
||||||
this.renderCount = 0
|
this.renderCount = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw() {
|
||||||
this.context.fillStyle = this.color
|
this.context.fillStyle = this.color;
|
||||||
this.context.beginPath()
|
this.context.beginPath();
|
||||||
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
|
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
|
||||||
this.context.fill()
|
this.context.fill();
|
||||||
}
|
}
|
||||||
|
|
||||||
move() {
|
move() {
|
||||||
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
|
this.position.x = Math.sin(this.angle) * this.speed + this.position.x;
|
||||||
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
|
this.position.y =
|
||||||
this.renderCount++
|
Math.cos(this.angle) * this.speed +
|
||||||
|
this.position.y +
|
||||||
|
this.renderCount * 0.3;
|
||||||
|
this.renderCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Boom {
|
||||||
|
constructor({ origin, context, circleCount = 10, area }) {
|
||||||
|
this.origin = origin;
|
||||||
|
this.context = context;
|
||||||
|
this.circleCount = circleCount;
|
||||||
|
this.area = area;
|
||||||
|
this.stop = false;
|
||||||
|
this.circles = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
randomArray(range) {
|
||||||
|
const length = range.length;
|
||||||
|
const randomIndex = Math.floor(length * Math.random());
|
||||||
|
return range[randomIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
randomColor() {
|
||||||
|
const range = ["8", "9", "A", "B", "C", "D", "E", "F"];
|
||||||
|
return (
|
||||||
|
"#" +
|
||||||
|
this.randomArray(range) +
|
||||||
|
this.randomArray(range) +
|
||||||
|
this.randomArray(range) +
|
||||||
|
this.randomArray(range) +
|
||||||
|
this.randomArray(range) +
|
||||||
|
this.randomArray(range)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
randomRange(start, end) {
|
||||||
|
return (end - start) * Math.random() + start;
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
for (let i = 0; i < this.circleCount; i++) {
|
||||||
|
const circle = new Circle({
|
||||||
|
context: this.context,
|
||||||
|
origin: this.origin,
|
||||||
|
color: this.randomColor(),
|
||||||
|
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
|
||||||
|
speed: this.randomRange(1, 6),
|
||||||
|
});
|
||||||
|
this.circles.push(circle);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Boom {
|
move() {
|
||||||
constructor ({ origin, context, circleCount = 10, area }) {
|
this.circles.forEach((circle, index) => {
|
||||||
this.origin = origin
|
if (
|
||||||
this.context = context
|
circle.position.x > this.area.width ||
|
||||||
this.circleCount = circleCount
|
circle.position.y > this.area.height
|
||||||
this.area = area
|
) {
|
||||||
this.stop = false
|
return this.circles.splice(index, 1);
|
||||||
this.circles = []
|
|
||||||
}
|
|
||||||
|
|
||||||
randomArray(range) {
|
|
||||||
const length = range.length
|
|
||||||
const randomIndex = Math.floor(length * Math.random())
|
|
||||||
return range[randomIndex]
|
|
||||||
}
|
|
||||||
|
|
||||||
randomColor() {
|
|
||||||
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
|
|
||||||
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
|
|
||||||
}
|
|
||||||
|
|
||||||
randomRange(start, end) {
|
|
||||||
return (end - start) * Math.random() + start
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
for(let i = 0; i < this.circleCount; i++) {
|
|
||||||
const circle = new Circle({
|
|
||||||
context: this.context,
|
|
||||||
origin: this.origin,
|
|
||||||
color: this.randomColor(),
|
|
||||||
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
|
|
||||||
speed: this.randomRange(1, 6)
|
|
||||||
})
|
|
||||||
this.circles.push(circle)
|
|
||||||
}
|
}
|
||||||
}
|
circle.move();
|
||||||
|
});
|
||||||
move() {
|
if (this.circles.length == 0) {
|
||||||
this.circles.forEach((circle, index) => {
|
this.stop = true;
|
||||||
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
|
|
||||||
return this.circles.splice(index, 1)
|
|
||||||
}
|
|
||||||
circle.move()
|
|
||||||
})
|
|
||||||
if (this.circles.length == 0) {
|
|
||||||
this.stop = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
draw() {
|
|
||||||
this.circles.forEach(circle => circle.draw())
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class CursorSpecialEffects {
|
draw() {
|
||||||
constructor() {
|
this.circles.forEach((circle) => circle.draw());
|
||||||
this.computerCanvas = document.createElement('canvas')
|
|
||||||
this.renderCanvas = document.createElement('canvas')
|
|
||||||
|
|
||||||
this.computerContext = this.computerCanvas.getContext('2d')
|
|
||||||
this.renderContext = this.renderCanvas.getContext('2d')
|
|
||||||
|
|
||||||
this.globalWidth = window.innerWidth
|
|
||||||
this.globalHeight = window.innerHeight
|
|
||||||
|
|
||||||
this.booms = []
|
|
||||||
this.running = false
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseDown(e) {
|
|
||||||
const boom = new Boom({
|
|
||||||
origin: { x: e.clientX, y: e.clientY },
|
|
||||||
context: this.computerContext,
|
|
||||||
area: {
|
|
||||||
width: this.globalWidth,
|
|
||||||
height: this.globalHeight
|
|
||||||
}
|
|
||||||
})
|
|
||||||
boom.init()
|
|
||||||
this.booms.push(boom)
|
|
||||||
this.running || this.run()
|
|
||||||
}
|
|
||||||
|
|
||||||
handlePageHide() {
|
|
||||||
this.booms = []
|
|
||||||
this.running = false
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
const style = this.renderCanvas.style
|
|
||||||
style.position = 'fixed'
|
|
||||||
style.top = style.left = 0
|
|
||||||
style.zIndex = '99999'
|
|
||||||
style.pointerEvents = 'none'
|
|
||||||
|
|
||||||
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
|
|
||||||
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
|
|
||||||
|
|
||||||
document.body.append(this.renderCanvas)
|
|
||||||
|
|
||||||
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
|
|
||||||
window.addEventListener('pagehide', this.handlePageHide.bind(this))
|
|
||||||
}
|
|
||||||
|
|
||||||
run() {
|
|
||||||
this.running = true
|
|
||||||
if (this.booms.length == 0) {
|
|
||||||
return this.running = false
|
|
||||||
}
|
|
||||||
|
|
||||||
requestAnimationFrame(this.run.bind(this))
|
|
||||||
|
|
||||||
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
|
|
||||||
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
|
|
||||||
|
|
||||||
this.booms.forEach((boom, index) => {
|
|
||||||
if (boom.stop) {
|
|
||||||
return this.booms.splice(index, 1)
|
|
||||||
}
|
|
||||||
boom.move()
|
|
||||||
boom.draw()
|
|
||||||
})
|
|
||||||
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
const cursorSpecialEffects = new CursorSpecialEffects()
|
|
||||||
cursorSpecialEffects.init()
|
class CursorSpecialEffects {
|
||||||
|
constructor() {
|
||||||
|
this.computerCanvas = document.createElement("canvas");
|
||||||
|
this.renderCanvas = document.createElement("canvas");
|
||||||
|
|
||||||
|
this.computerContext = this.computerCanvas.getContext("2d");
|
||||||
|
this.renderContext = this.renderCanvas.getContext("2d");
|
||||||
|
|
||||||
|
this.globalWidth = window.innerWidth;
|
||||||
|
this.globalHeight = window.innerHeight;
|
||||||
|
|
||||||
|
this.booms = [];
|
||||||
|
this.running = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseDown(e) {
|
||||||
|
const boom = new Boom({
|
||||||
|
origin: { x: e.clientX, y: e.clientY },
|
||||||
|
context: this.computerContext,
|
||||||
|
area: {
|
||||||
|
width: this.globalWidth,
|
||||||
|
height: this.globalHeight,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
boom.init();
|
||||||
|
this.booms.push(boom);
|
||||||
|
this.running || this.run();
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePageHide() {
|
||||||
|
this.booms = [];
|
||||||
|
this.running = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
const style = this.renderCanvas.style;
|
||||||
|
style.position = "fixed";
|
||||||
|
style.top = style.left = 0;
|
||||||
|
style.zIndex = "99999";
|
||||||
|
style.pointerEvents = "none";
|
||||||
|
|
||||||
|
style.width =
|
||||||
|
this.renderCanvas.width =
|
||||||
|
this.computerCanvas.width =
|
||||||
|
this.globalWidth;
|
||||||
|
style.height =
|
||||||
|
this.renderCanvas.height =
|
||||||
|
this.computerCanvas.height =
|
||||||
|
this.globalHeight;
|
||||||
|
|
||||||
|
document.body.append(this.renderCanvas);
|
||||||
|
|
||||||
|
window.addEventListener("mousedown", this.handleMouseDown.bind(this));
|
||||||
|
window.addEventListener("pagehide", this.handlePageHide.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
run() {
|
||||||
|
this.running = true;
|
||||||
|
if (this.booms.length == 0) {
|
||||||
|
return (this.running = false);
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(this.run.bind(this));
|
||||||
|
|
||||||
|
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
|
||||||
|
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
|
||||||
|
|
||||||
|
this.booms.forEach((boom, index) => {
|
||||||
|
if (boom.stop) {
|
||||||
|
return this.booms.splice(index, 1);
|
||||||
|
}
|
||||||
|
boom.move();
|
||||||
|
boom.draw();
|
||||||
|
});
|
||||||
|
this.renderContext.drawImage(
|
||||||
|
this.computerCanvas,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
this.globalWidth,
|
||||||
|
this.globalHeight
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cursorSpecialEffects = new CursorSpecialEffects();
|
||||||
|
cursorSpecialEffects.init();
|
||||||
|
Loading…
Reference in New Issue
Block a user