1 let currentScene = 0;
2 let totalScenes = 6;
3 let nextButton, prevButton;
4
5 let angle = 0; // for rotation
6 let xPos = 0; // for moving shapes
7 let bouncingY, speedY;
8 let xPos2;
9 let fastBallY, fastSpeed;
10 let diagX, diagY, diagSpeedX, diagSpeedY;
11
12 function setup()
13 {
14 createCanvas(600, 400);
15 textAlign(CENTER, CENTER);
16 textSize(20);
17
18 // Navigation buttons
19 nextButton = createButton("Next");
20 [Link](width - 100, height + 20);
21 [Link](nextScene);
22
23 prevButton = createButton("Previous");
24 [Link](20, height + 20);
25 [Link](prevScene);
26
27 bouncingY = height / 2;
28 speedY = 3;
29 xPos2 = width;
30 fastBallY = height / 2;
31 fastSpeed = 6;
32
33 diagX = width / 2;
34 diagY = height / 2;
35 diagSpeedX = 4;
36 diagSpeedY = 4;
37 }
38
39 // Draw
40 function draw()
41 {
42 background(30);
43
44 switch (currentScene)
45 {
46 case 0: titleScene(); break;
47 case 1: sceneOne(); break;
48 case 2: sceneTwo(); break;
49 case 3: sceneThree(); break;
50 case 4: sceneFour(); break;
51 case 5: sceneFive(); break;
52 }
53 }
54
55 function nextScene()
56 {
57 if (currentScene < totalScenes - 1) currentScene++;
58 }
59
60 function prevScene()
61 {
62 if (currentScene > 0) currentScene--;
63 }
64
65
66 // Title Scene
67 function titleScene()
68 {
69 background(50, 100, 200);
70 fill(255);
71 textSize(36);
72 text("Welcome to My Tutorial Project", width / 2, height / 2);
73
74 textSize(20);
75 text("Click Next to Begin", width / 2, height / 2 + 50);
76 }
77
78 // Scene 1
79 function sceneOne()
80 {
81 background(200, 80, 80);
82 fill(255);
83 text("Scene 1: Basic horizontal movement", width / 2, 30);
84
85 fill(255, 200, 0);
86 ellipse(xPos, height / 2, 50, 50);
87 xPos += 2;
88 if (xPos > width) xPos = 0;
89
90 fill(0, 200, 255);
91 ellipse(xPos2, height / 2 + 100, 50, 50);
92 xPos2 -= 2;
93 if (xPos2 < 0) xPos2 = width;
94
95 fill(255);
96 text("Circles can moves across the screen.", width / 2, height - 30);
97 }
98
99 // Scene 2
100 function sceneTwo() {
101 background(80, 180, 100);
102 fill(255);
103 text("Scene 2: Object Rotation", width / 2, 30);
104
105 push();
106 translate(width / 2, height / 2);
107 rotate(angle);
108 rectMode(CENTER);
109 fill(100, 200, 255);
110 rect(0, 0, 100, 100);
111 pop();
112
113 push();
114 translate(width / 3, height / 2);
115 rotate(-angle * 3.5);
116 rectMode(CENTER);
117 fill(255, 150, 100);
118 rect(0, 0, 70, 70);
119 pop();
120
121
122 push();
123 translate((2 * width) / 3, height / 2);
124 rotate(angle * 0.2);
125 rectMode(CENTER);
126 fill(150, 255, 150);
127 rect(0, 0, 50, 50);
128 pop();
129
130 angle += 0.05;
131
132 fill(255);
133 text("Three square rotates with different speed and direction", width / 2, height -
30);
134 }
135
136 // Scene 3
137 function sceneThree()
138 {
139 background(150, 80, 200);
140 fill(255);
141 text("Scene 3: Bouncing Ball", width / 2, 30);
142 //orange ball
143 fill(255, 100, 0);
144 ellipse(width / 2, bouncingY, 60, 60);
145 bouncingY += speedY;
146
147 if (bouncingY > height - 30 || bouncingY < 30)
148 {
149 speedY *= -1;
150 }
151 //blue ball
152 fill(0, 200, 255);
153 ellipse((2 * width) / 3, fastBallY, 60, 60);
154 fastBallY += fastSpeed;
155 if (fastBallY > height - 30 || fastBallY < 30)
156 {
157 fastSpeed *= -1;
158 }
159 //green ball
160 fill(200, 255, 100);
161 ellipse(diagX, diagY, 50, 50);
162 diagX += diagSpeedX;
163 diagY += diagSpeedY;
164
165
166 if (diagX > width - 25 || diagX < 25)
167 {
168 diagSpeedX *= -1;
169 }
170 if (diagY > height - 25 || diagY < 25)
171 {
172 diagSpeedY *= -1;
173 }
174 fill(255);
175 text("Balls can bounces off the edges in different ways ", width / 2, height - 30);
176 }
177
178 // Scene 4
179 function sceneFour()
180 {
181 background(0, 150, 200);
182 fill(255);
183 text("Scene 4: Mouse Interaction", width / 2, 30);
184
185 fill(255, 200, 100);
186 ellipse(mouseX, mouseY, 80, 80);
187
188 fill(255);
189 text("The circle follows your mouse.", width / 2, height - 30);
190 }
191
192 // Scene 5
193 function sceneFive()
194 {
195 background(20, 20, 20);
196 fill(255);
197 text("Scene 5: Text Animation", width / 2, 30);
198
199 fill(0, 200, 255);
200 textSize(28);
201 text("Hello this is Eiden Han. Nice to meet you!", width / 2, height / 2 + sin(
frameCount * 0.05) * 50);
202
203 textSize(20);
204 fill(255);
205 text("This text moves smoothly up and down", width / 2, height - 30);
206 }
207