Skip to content

Commit b15f6fe

Browse files
flokleiserflokleiser
committed
finished title animation
1 parent 3185121 commit b15f6fe

18 files changed

+176
-39
lines changed

‎README.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ ___
1919

2020
### General to do:
2121

22-
- [ ] Rethink buttons (big, in the middle)
23-
- [ ] Buttons use "innerHTML" instead of textcontent?
22+
- [ ] Better title image --> more down, plus description of "click a button"
2423

2524
#### Audio
2625
- [ ] soundscapes collection

‎canvas.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ imageDay.src = "images/test_day.png"
3333

3434
var imageClouds= new Image();
3535
imageClouds.onload = function() {
36-
drawImages(); drawTitle();
36+
drawImages(); toggleTitle();//drawTitle();
3737
}
3838
imageClouds.src = "images/test_clouds2.png"
3939

@@ -70,7 +70,7 @@ if (currentImage === null) {
7070
function drawImages() {
7171
// resetToggles;
7272
if (currentImage === 'clouds') {
73-
// $("link[rel*='icon']").attr("href", "images/test_clouds2.png");
73+
$("link[rel*='icon']").attr("href", "images/test_clouds2.png");
7474

7575
// if (raining) {
7676
// console.log('darker clouds')
@@ -89,7 +89,8 @@ function drawImages() {
8989
ctxFade.globalAlpha = currentOpacity;
9090
// console.log(currentOpacity);
9191
ctxFade.drawImage(imageClouds,0,0,canvasFade.width,canvasFade.height);
92-
}, 1000 / fps);
92+
// }, 1000 / fps);
93+
}, 700 / fps);
9394
}
9495
else {
9596
ctxBack.drawImage(imageClouds,0,0, canvasBack.width, canvasBack.height);
@@ -112,7 +113,8 @@ function drawImages() {
112113
ctxFade.globalAlpha = currentOpacity;
113114
// console.log(currentOpacity);
114115
ctxFade.drawImage(imageDay,0,0,canvasFade.width,canvasFade.height);
115-
}, 1000 / fps);
116+
// }, 1000 / fps);
117+
}, 700 / fps);
116118
}
117119
else {
118120
ctxBack.drawImage(imageDay,0,0, canvasBack.width, canvasBack.height);
@@ -133,7 +135,8 @@ function drawImages() {
133135
ctxFade.globalAlpha = currentOpacity;
134136
// console.log(currentOpacity);
135137
ctxFade.drawImage(imageHalfNight,0,0,canvasFade.width,canvasFade.height);
136-
}, 1000 / fps);
138+
// }, 1000 / fps);
139+
}, 700 / fps);
137140
}
138141
else {
139142
ctxBack.drawImage(imageHalfNight,0,0, canvasBack.width, canvasBack.height);
@@ -158,7 +161,8 @@ function drawImages() {
158161
ctxFade.globalAlpha = currentOpacity;
159162
// console.log(currentOpacity);
160163
ctxFade.drawImage(imageFullNight,0,0,canvasFade.width,canvasFade.height);
161-
}, 1000 / fps);
164+
// }, 1000 / fps);
165+
}, 700 / fps);
162166
}
163167
else {
164168
ctxBack.drawImage(imageFullNight,0,0, canvasBack.width, canvasBack.height);
@@ -205,6 +209,7 @@ function fullNight() {
205209
resetToggles();
206210
drawImages();
207211
toggleMoon();
212+
loadNightAmbienceSound();
208213
}
209214
function noImage() {
210215
currentImage = "none";

‎effects/buttons.js

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,19 @@ $(document).on('click', 'button2', function() {
1212
});
1313

1414
var cloudyButton= document.createElement('buttonSound');
15-
// cloudyButton.textContent ="🌫️"
16-
// cloudyButton.textContent = "☁"
17-
// cloudyButton.textContent = "⛆"
1815
// cloudyButton.innerHTML = "<i class='material-icons'>rainy</i>"
1916
cloudyButton.innerHTML = "<i class='material-icons'>filter_drama</i>"
20-
// cloudyButton.onclick = cloudImage;
2117
cloudyButton.onclick = function() {
22-
cloudImage(); toggleRain(); toggleClouds(); toggleTitle();
18+
cloudImage(); toggleRain(); toggleClouds(); toggleTitleBool();
2319
}
2420
document.body.appendChild(cloudyButton);
2521

2622
var dayButton= document.createElement('buttonSound');
27-
// dayButton.textContent = "🏙️"
28-
// dayButton.textContent = "☀"
2923
dayButton.innerHTML = "<i class='material-icons'>sunny</i>"
3024
// dayButton.onclick= dayImage;
3125
dayButton.onclick= function() {
3226
dayImage(); toggleBird();
33-
toggleTitle();
27+
toggleTitleBool();
3428
// toggleTitle();//toggleCloudsDay();
3529
}
3630
document.body.appendChild(dayButton);
@@ -40,7 +34,7 @@ var halfNightButton= document.createElement('buttonSound');
4034
// halfNightButton.onclick = halfNight;
4135
halfNightButton.innerHTML = "<i class='material-icons'>wb_twilight</i>"
4236
halfNightButton.onclick = function() {
43-
halfNight(); toggleTitle();
37+
halfNight(); toggleTitleBool();
4438
// toggleMoon();
4539
}
4640
document.body.appendChild(halfNightButton);
@@ -50,7 +44,7 @@ var fullNightButton= document.createElement('buttonSound');
5044
// fullNightButton.textContent = "🌌"
5145
fullNightButton.innerHTML = "<i class='material-icons'>nights_stay</i>"
5246
fullNightButton.onclick = function() {
53-
fullNight(); toggleStars();toggleTitle();
47+
fullNight(); toggleStars();toggleTitleBool();
5448
}
5549
document.body.appendChild(fullNightButton);
5650

@@ -127,7 +121,8 @@ document.body.appendChild(cometButton);
127121

128122
var titleButton = document.createElement('button2');
129123
titleButton.textContent = "Title"
130-
titleButton.onclick = toggleTitle;
124+
// titleButton.onclick = toggleTitle;
125+
titleButton.onclick = toggleTitleBool;
131126
document.body.appendChild(titleButton);
132127

133128
var resetButton = document.createElement('button2');

‎effects/sound.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,12 +239,12 @@ function loadNightAmbienceSound() {
239239
enableNightAmbience= !enableNightAmbience
240240
if (enableNightAmbience&& enableSound) {
241241
nightAmbienceSound.volume = 0;
242-
$(nightAmbienceSound).animate({volume: 1},1000);
242+
$(nightAmbienceSound).animate({volume: 0.9},1000);
243243
nightAmbienceSound.play();
244244
console.log('night sound',enableNightAmbience);
245245
}
246246
else if (!enableNightAmbience) {
247-
nightAmbienceSound.volume = 1;
247+
nightAmbienceSound.volume = 0.9;
248248
$(nightAmbienceSound).animate({volume: 0},1000, function(){
249249
nightAmbienceSound.pause();
250250
});

‎effects/title.js

Lines changed: 145 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,163 @@
11
var canvasTitle = document.getElementById('canvasTitle')
22
var ctxTitle = canvasTitle.getContext('2d')
3-
// var titleEnabled = false;
3+
4+
var canvasTitleFront = document.getElementById('canvasTitleFront')
5+
var ctxTitleFront = canvasTitleFront.getContext('2d')
6+
7+
// var titleActive = true;
8+
// var titleActive = false;
9+
var titleActive= true;
10+
var titleToggled= false;
411

512
canvasTitle.width = 1000
613
canvasTitle.height = 1000
14+
canvasTitleFront.width = 1000
15+
canvasTitleFront.height = 1000
16+
17+
// document.documentElement.style.setProperty('--resized-width', `${canvasTitle.width}px`);
18+
19+
// var titleImage = new Image()
20+
// // titleImage.src = "images/title test6.png"
21+
// // titleImage.src = "images/title test2.png"
22+
// // titleImage.src = "images/clouds6 test.png"
23+
24+
// var titleOpacity= 1;
725

8-
document.documentElement.style.setProperty('--resized-width', `${canvasTitle.width}px`);
26+
// function toggleTitle() {
27+
// if (titleOpacity > 0) {
28+
// ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height)
29+
// ctxTitle.globalAlpha = titleOpacity
30+
// titleOpacity-= 0.01;
31+
// ctxTitle.drawImage(titleImage,0,0,canvasTitle.width,canvasTitle.height);
32+
// requestAnimationFrame(toggleTitle)
33+
// }
34+
35+
// setTimeout(function() {
36+
// ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height);
37+
// titleOpacity= 0;
38+
// },3000)
39+
// };
40+
41+
42+
// function drawTitle() {
43+
// ctxTitle.drawImage(titleImage,0,0,canvasTitle.width,canvasTitle.height);
44+
// }
945

1046
var titleImage = new Image()
11-
titleImage.src = "images/title test6.png"
47+
titleImage.src = "images/clouds6.png"
48+
var titleImageFront = new Image()
49+
// titleImageFront.src = "images/titleclouds.png"
50+
// titleImageFront.src = "images/titleclouds2.png"
51+
// titleImageFront.src = "images/titleclouds2.png"
52+
titleImageFront.src = "images/titleclouds4.png"
1253

13-
function drawTitle() {
14-
ctxTitle.drawImage(titleImage,0,0,canvasTitle.width,canvasTitle.height);
54+
console.log('toggled',titleToggled)
55+
56+
function toggleTitleBool() {
57+
if (!titleToggled) {
58+
titleToggled = true;
59+
titleActive = false;
60+
toggleTitle();
61+
console.log('toggled',titleToggled)
62+
}
1563
}
1664

1765

18-
var titleOpacity= 1;
1966

2067
function toggleTitle() {
21-
if (titleOpacity > 0) {
22-
ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height)
23-
ctxTitle.globalAlpha = titleOpacity
24-
titleOpacity-= 0.01;
25-
ctxTitle.drawImage(titleImage,0,0,canvasTitle.width,canvasTitle.height);
26-
console.log(titleOpacity)
27-
requestAnimationFrame(toggleTitle)
28-
}
29-
68+
if (titleActive) {
69+
// ctxTitle.drawImage(titleImage,0,0,canvasTitle.width,canvasTitle.height)
70+
titleFadeIn = true;
71+
drawTitle();
72+
console.log('title', titleActive)
73+
}
74+
else {
75+
// ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height)
76+
titleFadeIn= false;
3077
setTimeout(function() {
3178
ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height);
79+
ctxTitleFront.clearRect(0,0,canvasTitle.width,canvasTitle.height);
3280
titleOpacity= 0;
81+
82+
// scrollSpeedTitle = 1;
83+
// scrollValTitle = 0;
84+
// scrollSpeedTitleFront = 1.5;
85+
// scrollValTitleFront = 0;
86+
scrollSpeedTitle = 0;
87+
scrollSpeedTitleFront = 0;
3388
},3000)
34-
};
89+
console.log('title', titleActive)
90+
}
91+
}
92+
93+
// var scrollSpeedTitle = 0.1;
94+
var scrollSpeedTitle = 0.5;
95+
var scrollValTitle = 0;
96+
97+
// var scrollSpeedTitleFront = 0.15;
98+
var scrollSpeedTitleFront = 0.9;
99+
var scrollValTitleFront = 0;
100+
101+
var titleOpacity= 0;
102+
var titleFadeIn= false;
103+
104+
function drawTitle() {
105+
if (titleActive) {
106+
107+
ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height)
108+
109+
ctxTitle.drawImage(titleImage, canvasTitle.width - scrollValTitle,0,scrollValTitle, canvasTitle.height,0,0,scrollValTitle, canvasTitle.height)
110+
ctxTitle.drawImage(titleImage, 0,0,canvasTitle.width - scrollValTitle, canvasTitle.height, scrollValTitle,0, canvasTitle.width - scrollValTitle, canvasTitle.height)
111+
112+
ctxTitleFront.clearRect(0,0,canvasTitle.width,canvasTitle.height)
113+
114+
ctxTitleFront.drawImage(titleImageFront, canvasTitle.width - scrollValTitleFront,0,scrollValTitleFront, canvasTitle.height,0,0,scrollValTitleFront, canvasTitle.height)
115+
ctxTitleFront.drawImage(titleImageFront, 0,0,canvasTitle.width - scrollValTitleFront, canvasTitle.height, scrollValTitleFront,0, canvasTitle.width - scrollValTitleFront, canvasTitle.height)
116+
117+
scrollValTitle += scrollSpeedTitle;
118+
if (scrollValTitle >= canvasTitle.width) {
119+
scrollValTitle = 0;
120+
}
121+
122+
scrollValTitleFront += scrollSpeedTitleFront;
123+
if (scrollValTitleFront >= canvasTitle.width) {
124+
scrollValTitleFront = 0;
125+
}
126+
127+
if (titleOpacity< 1) {
128+
ctxTitle.globalAlpha = titleOpacity;
129+
ctxTitleFront.globalAlpha = titleOpacity;
130+
titleOpacity+= 0.005;
131+
}
132+
133+
requestAnimationFrame(drawTitle);
134+
135+
}
136+
else {
137+
ctxTitle.clearRect(0,0,canvasTitle.width,canvasTitle.height)
138+
139+
ctxTitle.drawImage(titleImage, canvasTitle.width - scrollValTitle,0,scrollValTitle, canvasTitle.height,0,0,scrollValTitle, canvasTitle.height)
140+
ctxTitle.drawImage(titleImage, 0,0,canvasTitle.width - scrollValTitle, canvasTitle.height, scrollValTitle,0, canvasTitle.width - scrollValTitle, canvasTitle.height)
141+
scrollValTitle += scrollSpeedTitle;
142+
143+
ctxTitleFront.clearRect(0,0,canvasTitle.width,canvasTitle.height)
144+
145+
ctxTitleFront.drawImage(titleImageFront, canvasTitle.width - scrollValTitleFront,0,scrollValTitleFront, canvasTitle.height,0,0,scrollValTitleFront, canvasTitle.height)
146+
ctxTitleFront.drawImage(titleImageFront, 0,0,canvasTitle.width - scrollValTitleFront, canvasTitle.height, scrollValTitleFront,0, canvasTitle.width - scrollValTitleFront, canvasTitle.height)
147+
scrollValTitleFront += scrollSpeedTitleFront;
148+
149+
150+
if (scrollValTitle >= canvasTitle.width) {
151+
scrollValTitle = 0;
152+
}
153+
154+
if (!titleFadeIn) {
155+
if (titleOpacity> 0) {
156+
ctxTitle.globalAlpha = titleOpacity
157+
ctxTitleFront.globalAlpha = titleOpacity
158+
titleOpacity-= 0.01;
159+
}
160+
}
161+
requestAnimationFrame(drawTitle);
162+
}
163+
}

‎images/title mask.png

8.93 KB
Loading

‎images/title test.png

-11.5 KB
Binary file not shown.

‎images/title test1.png

26.7 KB
Loading

‎images/title test2.png

-11.7 KB
Loading

‎images/title test3.png

-25.9 KB
Binary file not shown.

‎images/title test4.png

-51.6 KB
Binary file not shown.

‎images/title test5.png

-67 KB
Binary file not shown.

‎images/titleclouds.png

13.8 KB
Loading

‎images/titleclouds2.png

12.8 KB
Loading

‎images/titleclouds3.png

12.8 KB
Loading

‎images/titleclouds4.png

12.7 KB
Loading

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,13 @@
5757

5858

5959
<canvas id="canvasTitle" > </canvas>
60+
<canvas id="canvasTitleFront" > </canvas>
6061

6162

6263
</div>
6364

6465
<script src="effects/bird.js"> </script>
66+
<script src="effects/title.js"> </script>
6567
<script src="canvas.js"> </script>
6668
<script src="effects/clouds.js"> </script>
6769
<script src="effects/clouds2.js"> </script>
@@ -73,7 +75,6 @@
7375
<script src="effects/nightPlane.js"> </script>
7476
<script src="effects/moon.js"> </script>
7577
<script src="effects/comet.js"> </script>
76-
<script src="effects/title.js"> </script>
7778
<!-- <script src="effects/animationTest.js"></script> -->
7879

7980
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

‎style.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,18 @@
109109
mask-mode: alpha;
110110
mask-size: cover;
111111
mask-repeat: no-repeat;
112-
mask-image: url(images/test\ mask3.png);
112+
mask-image: url(images/title\ mask.png);
113113
overflow: hidden;
114114
}
115115

116+
#canvasTitleFront{
117+
margin:0;
118+
height: 100vh;
119+
/* width:100%; */
120+
aspect-ratio: 1/1;
121+
position:absolute;
122+
}
123+
116124
#canvasPlane{
117125
margin:0;
118126
height: 100vh;

0 commit comments

Comments
 (0)