-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
150 lines (130 loc) · 5.42 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("sunflowerCanvas");
const ctx = canvas.getContext("2d");
const petalColors = ["#f8c610", "#efbc09", "#dfa60c", "#ce9407"];
const centerColors = ["#2a0e00", "#4b2509", '#441507']
const textLines = [
"My life felt dull back then, just the same old routine every day.",
"It was okay, but kinda heavy.",
"Then you came along, reaching out to me, even when I hesitated.",
"You saw something beautiful in me, even when I couldn't see it myself.",
"You make every day feel like an adventure, full of happiness and new experiences.",
"You're like a teenage dream come true, making life exciting and fun.",
"So, I just want to say thank you.",
"Thank you for everything. ❤️"
];
let index = 0
document.getElementById("growButton").addEventListener("click", function () {
if (index < textLines.length){
const text = document.querySelector(".text");
text.classList.remove("show");
setTimeout(() => {
document.getElementById("text").innerHTML = textLines[index]
}, 1000);
setTimeout(() => {
text.classList.add("show");
index += 1
}, 1500);
}
const numberOfFlowers = Math.floor(Math.random() * 5) + 1;
let frameCount = 0;
function drawFlowers() {
frameCount++;
if (frameCount <= 1) {
requestAnimationFrame(drawFlowers);
}
for (let i = 0; i < numberOfFlowers; i++) {
drawSunflower();
}
}
requestAnimationFrame(drawFlowers);
});
function drawSunflower() {
const centerX = Math.random() * canvas.width;
const stemLength = Math.random() * 100 + 100;
let stemHeight = 0;
const centerY = canvas.height;
const radius = Math.random() * 30 + 20;
const petalCount = 20;
const petalWidth = 20;
// Animation for stem
function drawStem() {
if (stemHeight <= stemLength) {
requestAnimationFrame(drawStem);
}
ctx.beginPath();
ctx.moveTo(centerX, canvas.height);
ctx.lineTo(centerX, canvas.height - stemHeight);
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(54, 72, 34, 0.9)";
ctx.stroke();
ctx.closePath();
stemHeight += 5; // Speed
}
// Draw stem first
drawStem();
// Animation for leaves
function drawLeaves() {
if (stemHeight >= stemLength) {
// Calculate leaf position
const leafY = centerY - stemHeight + (stemLength * 3) / 6;
// Draw leaves
ctx.beginPath();
ctx.moveTo(centerX, leafY);
ctx.lineTo(centerX - 30, leafY - 20); // First leaf
ctx.lineTo(centerX - 40, leafY - 40);
ctx.lineTo(centerX, leafY - 20);
ctx.lineTo(centerX, leafY);
ctx.lineTo(centerX + 30, leafY - 20); // Second leaf
ctx.lineTo(centerX + 40, leafY - 40);
ctx.lineTo(centerX, leafY - 20);
ctx.lineTo(centerX, leafY);
ctx.fillStyle = "#446327";
ctx.fill();
ctx.closePath();
} else {
requestAnimationFrame(drawLeaves);
}
}
drawLeaves();
// Draw flower center after leaves
function drawFlowerCenter() {
let centerRadius = 0;
const randomCenterColor = centerColors[Math.floor(Math.random() * centerColors.length)];
function animateCenter() {
if (centerRadius <= radius / 2) {
requestAnimationFrame(animateCenter);
}
ctx.beginPath();
ctx.arc(centerX, centerY - stemHeight, centerRadius, 0, Math.PI * 2);
ctx.fillStyle = randomCenterColor;
ctx.fill();
ctx.closePath();
centerRadius += 1; // Speed
}
animateCenter();
}
setTimeout(() => {
drawFlowerCenter();
}, 1000);
// Draw petals after flower center
function drawPetals() {
const randomColor = petalColors[Math.floor(Math.random() * petalColors.length)];
for (let i = 0; i < petalCount; i++) {
const angle = (Math.PI * 2 / petalCount) * i;
const x = centerX + Math.cos(angle) * radius;
const y = centerY - stemHeight + Math.sin(angle) * radius;
ctx.beginPath();
ctx.moveTo(centerX, centerY - stemHeight);
ctx.quadraticCurveTo(x, y, x + petalWidth * Math.cos(angle + Math.PI / 2), y + petalWidth * Math.sin(angle + Math.PI / 2));
ctx.lineTo(centerX, centerY - stemHeight);
ctx.fillStyle = randomColor; // Use the randomly chosen color
ctx.fill();
ctx.closePath();
}
}
setTimeout(() => {
drawPetals();
}, 1000); // Delay
}
});