├── .DS_Store
├── .gitignore
├── LICENSE
├── README.md
├── audio
    ├── space.mp3
    └── underwater.mp3
├── cat.html
├── eyes.html
├── images
    ├── device1.png
    ├── device1_cat.png
    ├── device1_eyes.png
    ├── device2_notion.png
    └── device2_plant.png
├── index.html
├── notion.html
├── plant.html
└── resource
    ├── eyes.css
    ├── eyes.js
    ├── notion.css
    ├── notion.js
    ├── plant.css
    └── plant.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Byte-compiled / optimized / DLL files
  2 | __pycache__/
  3 | *.py[cod]
  4 | *$py.class
  5 | 
  6 | # C extensions
  7 | *.so
  8 | 
  9 | # Distribution / packaging
 10 | .Python
 11 | build/
 12 | develop-eggs/
 13 | dist/
 14 | downloads/
 15 | eggs/
 16 | .eggs/
 17 | lib/
 18 | lib64/
 19 | parts/
 20 | sdist/
 21 | var/
 22 | wheels/
 23 | share/python-wheels/
 24 | *.egg-info/
 25 | .installed.cfg
 26 | *.egg
 27 | MANIFEST
 28 | 
 29 | # PyInstaller
 30 | #  Usually these files are written by a python script from a template
 31 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 32 | *.manifest
 33 | *.spec
 34 | 
 35 | # Installer logs
 36 | pip-log.txt
 37 | pip-delete-this-directory.txt
 38 | 
 39 | # Unit test / coverage reports
 40 | htmlcov/
 41 | .tox/
 42 | .nox/
 43 | .coverage
 44 | .coverage.*
 45 | .cache
 46 | nosetests.xml
 47 | coverage.xml
 48 | *.cover
 49 | *.py,cover
 50 | .hypothesis/
 51 | .pytest_cache/
 52 | cover/
 53 | 
 54 | # Translations
 55 | *.mo
 56 | *.pot
 57 | 
 58 | # Django stuff:
 59 | *.log
 60 | local_settings.py
 61 | db.sqlite3
 62 | db.sqlite3-journal
 63 | 
 64 | # Flask stuff:
 65 | instance/
 66 | .webassets-cache
 67 | 
 68 | # Scrapy stuff:
 69 | .scrapy
 70 | 
 71 | # Sphinx documentation
 72 | docs/_build/
 73 | 
 74 | # PyBuilder
 75 | .pybuilder/
 76 | target/
 77 | 
 78 | # Jupyter Notebook
 79 | .ipynb_checkpoints
 80 | 
 81 | # IPython
 82 | profile_default/
 83 | ipython_config.py
 84 | 
 85 | # pyenv
 86 | #   For a library or package, you might want to ignore these files since the code is
 87 | #   intended to run in multiple environments; otherwise, check them in:
 88 | # .python-version
 89 | 
 90 | # pipenv
 91 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 92 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
 93 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
 94 | #   install all needed dependencies.
 95 | #Pipfile.lock
 96 | 
 97 | # poetry
 98 | #   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
 99 | #   This is especially recommended for binary packages to ensure reproducibility, and is more
100 | #   commonly ignored for libraries.
101 | #   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
102 | #poetry.lock
103 | 
104 | # pdm
105 | #   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
106 | #pdm.lock
107 | #   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
108 | #   in version control.
109 | #   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
110 | .pdm.toml
111 | .pdm-python
112 | .pdm-build/
113 | 
114 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
115 | __pypackages__/
116 | 
117 | # Celery stuff
118 | celerybeat-schedule
119 | celerybeat.pid
120 | 
121 | # SageMath parsed files
122 | *.sage.py
123 | 
124 | # Environments
125 | .env
126 | .venv
127 | env/
128 | venv/
129 | ENV/
130 | env.bak/
131 | venv.bak/
132 | 
133 | # Spyder project settings
134 | .spyderproject
135 | .spyproject
136 | 
137 | # Rope project settings
138 | .ropeproject
139 | 
140 | # mkdocs documentation
141 | /site
142 | 
143 | # mypy
144 | .mypy_cache/
145 | .dmypy.json
146 | dmypy.json
147 | 
148 | # Pyre type checker
149 | .pyre/
150 | 
151 | # pytype static type analyzer
152 | .pytype/
153 | 
154 | # Cython debug symbols
155 | cython_debug/
156 | 
157 | # PyCharm
158 | #  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
159 | #  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
160 | #  and can be added to the global gitignore or merged into this file.  For a more nuclear
161 | #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
162 | #.idea/
163 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 github.com/Barqawiz/
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tamagotchi
 2 | 
 3 | This project is inspired by the classic Tamagotchi device, featuring a virtual character drawn with JavaScript. The character can be controlled through various buttons, or it can dynamically change based on interactions with an AI assistant.
 4 | 
 5 | 
 6 | ## How to Use:
 7 | 
 8 | 1. **Manual Mode**: Click on the buttons to perform actions.
 9 | 2. **AI-Controlled Mode**: Connect this with an AI assistant to automatically update the character.
10 | 
11 | 
12 | Feel free to customize the project, or expand it for AI assistant interaction.
13 | 
14 | ## AI Characters:
15 | 
16 | ### Eyes
17 | <img src="images/device1_eyes.png" width="400px" />
18 | 
19 | 
20 | ### Notion
21 | <img src="images/device2_notion.png" width="400px" />
22 | 
23 | 
24 | ### Cat
25 | <img src="images/device1_cat.png" width="400px" />
26 | 
27 | ## Plant
28 | <img src="images/device2_plant.png" width="400px" />
29 | 
30 | ## How to Connect to Chatbot:
31 | 
32 | Call `setAction` based on the AI model’s status or reactions. For example:
33 | 
34 | - `setAction('curious')` if the AI’s response includes a question.
35 | - `setAction('excited')` if the response shows excitement.
36 | - `setAction('speaking')` for general replies.
37 | 
38 | Check the [demo](https://barqawiz.github.io/Tamagotchi/) for more action details.
39 | 
40 | 


--------------------------------------------------------------------------------
/audio/space.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/audio/space.mp3


--------------------------------------------------------------------------------
/audio/underwater.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/audio/underwater.mp3


--------------------------------------------------------------------------------
/cat.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Interactive Pixel Cat</title>
  6 |     <style>
  7 |         body {
  8 |             text-align: center;
  9 |             background-color: #f0f0f0;
 10 |             font-family: Arial, sans-serif;
 11 |             margin: 0;
 12 |             overflow: hidden;
 13 |         }
 14 |         #controls {
 15 |             position: absolute;
 16 |             bottom: 20px;
 17 |             width: 100%;
 18 |             text-align: center;
 19 |             z-index: 1;
 20 |         }
 21 |         #controls button {
 22 |             margin: 5px;
 23 |             padding: 10px 20px;
 24 |             font-size: 16px;
 25 |             background-color: #2196F3;
 26 |             color: #ffffff;
 27 |             border: none;
 28 |             cursor: pointer;
 29 |             border-radius: 5px;
 30 |         }
 31 |         #controls button:hover {
 32 |             background-color: #1976D2;
 33 |         }
 34 |     </style>
 35 |     <!-- Include p5.js library -->
 36 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
 37 | </head>
 38 | <body>
 39 | 
 40 |     <div id="controls">
 41 |         <button onclick="setAction('idle')">Idle</button>
 42 |         <button onclick="setAction('walk')">Walk</button>
 43 |         <button onclick="setAction('jump')">Jump</button>
 44 |         <button onclick="setAction('sleep')">Sleep</button>
 45 |         <button onclick="setAction('eat')">Eat</button>
 46 |         <button onclick="setAction('play')">Play</button>
 47 |         <button onclick="setAction('bored')">Bored</button>
 48 |         <button onclick="setAction('surprised')">Surprised</button>
 49 |         <button onclick="setAction('happy')">Happy</button>
 50 |         <button onclick="setAction('dance')">Dance</button>
 51 |         <button onclick="setAction('fish')">Fish</button>
 52 |         <button onclick="setAction('talk')">Talk</button>
 53 |         <button onclick="setAction('cute')">Cute</button>
 54 |         <!--<button onclick="toggleColor()">Switch Color</button> -->
 55 |         <button onclick="setTheme('clear')">Original Theme</button>
 56 |         <button onclick="setTheme('space')">Space Theme</button>
 57 |         <button onclick="setTheme('underwater')">Underwater Theme</button>
 58 |     </div>
 59 | 
 60 |     <script>
 61 |         let cat;
 62 |         let ball;
 63 |         let fish;
 64 |         let currentAction = 'idle';
 65 |         let catColors = ['#ffcc99', '#ff9966']; // cat colors
 66 |         let colorIndex = 0;
 67 |         let catColor = catColors[colorIndex]; // default cat color
 68 | 
 69 |         function setup() {
 70 |             // canvas size with padding
 71 |             createCanvas(300, 300).parent(document.body); 
 72 |             noSmooth();
 73 |             frameRate(10);
 74 | 
 75 |             // define the cat character
 76 |             cat = new Cat();
 77 | 
 78 |             // define the ball for the 'play' action
 79 |             ball = new Ball();
 80 | 
 81 |             // define the fish for the 'fish' action
 82 |             fish = new Fish();
 83 |         }
 84 | 
 85 |         function draw() {
 86 |             background('#f0f0f0');
 87 | 
 88 |             // update and draw the cat
 89 |             cat.update();
 90 |             cat.draw();
 91 | 
 92 |             // if the action is 'play', update and draw the ball
 93 |             if (cat.currentAction === 'play') {
 94 |                 ball.update();
 95 |                 ball.draw();
 96 |             }
 97 | 
 98 |             // if the action is 'fish', update and draw the fish
 99 |             if (cat.currentAction === 'fish') {
100 |                 fish.update();
101 |                 fish.draw();
102 |             }
103 |         }
104 | 
105 |         function setAction(action) {
106 |             cat.setAction(action);
107 |             if (action === 'play') {
108 |                 ball.reset();
109 |             }
110 |             if (action === 'fish') {
111 |                 fish.reset();
112 |             }
113 |         }
114 | 
115 |         function toggleColor() {
116 |             colorIndex = (colorIndex + 1) % catColors.length;
117 |             catColor = catColors[colorIndex];
118 |         }
119 | 
120 |         class Cat {
121 |             constructor() {
122 |                 this.x = width / 2;
123 |                 this.y = height / 2 + 20; // centered vertically with padding
124 |                 this.scale = 8; // cat scale
125 |                 this.frameIndex = 0;
126 |                 this.frameCounter = 0;
127 |                 this.direction = 1; // 1 for right, -1 for left
128 |                 this.idleFrames = [this.drawIdleFrame1, this.drawIdleFrame2];
129 |                 this.walkFrames = [this.drawWalkFrame1, this.drawWalkFrame2];
130 |                 this.actions = {
131 |                     'idle': this.idleFrames,
132 |                     'walk': this.walkFrames,
133 |                     'jump': [this.drawJump],
134 |                     'sleep': [this.drawSleep],
135 |                     'eat': [this.drawEatFrame1, this.drawEatFrame2],
136 |                     'play': [this.drawPlayFrame1, this.drawPlayFrame2],
137 |                     'bored': [this.drawBored],
138 |                     'surprised': [this.drawSurprised],
139 |                     'happy': [this.drawHappy],
140 |                     'dance': [this.drawDanceFrame1, this.drawDanceFrame2],
141 |                     'fish': [this.drawFishChase],
142 |                     'talk': [this.drawTalk],
143 |                     'cute': [this.drawCuteFrame1, this.drawCuteFrame2]
144 |                 };
145 |                 this.currentAction = 'idle';
146 |                 this.frames = this.actions[this.currentAction];
147 |                 // default text for 'talk' action
148 |                 this.randomText = "Meow"; 
149 |                 this.jumpFrame = 0;
150 |                 // frames for jump action
151 |                 this.jumpDuration = 20; 
152 |                 this.jumpYOffset = 0;
153 |                 // to prevent unwanted centering
154 |                 this.autoIdle = false; 
155 |             }
156 | 
157 |             setAction(action) {
158 |                 if (this.actions[action]) {
159 |                     // only reset position when 'idle' is explicitly called
160 |                     if (action === 'idle' && !this.autoIdle) {
161 |                         this.x = width / 2;
162 |                         this.y = height / 2 + 20;
163 |                     }
164 |                     this.currentAction = action;
165 |                     this.frames = this.actions[this.currentAction];
166 |                     this.frameIndex = 0;
167 |                     this.frameCounter = 0;
168 |                     this.autoIdle = false; // reset autoIdle flag
169 | 
170 |                     if (action === 'jump') {
171 |                         this.jumpFrame = 0;
172 |                     }
173 |                     if (action === 'talk') {
174 |                         //let userText = prompt("What should the cat say?");
175 |                         //if (userText !== null && userText.trim() !== "") {
176 |                         //    this.randomText = userText;
177 |                         //} else {
178 |                         //}
179 |                         this.randomText = "Meow!";
180 |                     }
181 |                 }
182 |             }
183 | 
184 |             update() {
185 |                 this.frameCounter++;
186 |                 if (this.frameCounter >= 10) {
187 |                     this.frameCounter = 0;
188 |                     this.frameIndex = (this.frameIndex + 1) % this.frames.length;
189 |                     if (['jump', 'sleep', 'bored', 'surprised', 'happy', 'dance', 'talk', 'cute'].includes(this.currentAction)) {
190 |                         if (this.frameIndex === 0) {
191 |                             this.currentAction = 'idle';
192 |                             this.frames = this.actions[this.currentAction];
193 |                             // indicate automatic idle
194 |                             this.autoIdle = true; 
195 |                         }
196 |                     }
197 |                 }
198 | 
199 |                 // For 'jump' action, simulate jump movement
200 |                 if (this.currentAction === 'jump') {
201 |                     let progress = this.jumpFrame / this.jumpDuration;
202 |                     this.jumpYOffset = -20 * Math.sin(Math.PI * progress);
203 |                     this.jumpFrame++;
204 |                     if (this.jumpFrame >= this.jumpDuration) {
205 |                         this.jumpYOffset = 0;
206 |                         this.currentAction = 'idle';
207 |                         this.frames = this.actions[this.currentAction];
208 |                         this.frameIndex = 0;
209 |                         this.frameCounter = 0;
210 |                         this.autoIdle = true;
211 |                     }
212 |                 }
213 | 
214 |                 // ensure the cat stays within the canvas
215 |                 this.x = constrain(this.x, 20, width - 20);
216 |                 this.y = constrain(this.y, 20, height - 20);
217 | 
218 |                 // for 'walk' action, move the cat left and right
219 |                 if (this.currentAction === 'walk') {
220 |                     this.x += this.direction * 2;
221 |                     if (this.x >= width - 20 || this.x <= 20) {
222 |                         this.direction *= -1; // Change direction at edges
223 |                     }
224 |                 }
225 | 
226 |                 // 'play' action, make the cat follow the ball
227 |                 if (this.currentAction === 'play') {
228 |                     this.x += (ball.x - this.x) * 0.05;
229 |                     this.y += (ball.y - this.y) * 0.05;
230 | 
231 |                     // collision detection with the ball
232 |                     let d = dist(this.x, this.y, ball.x, ball.y);
233 |                     if (d < 20) {
234 |                         ball.reset(); // Reset the ball when caught
235 |                     }
236 |                 }
237 | 
238 |                 // for 'fish' action, make the cat chase the fish
239 |                 if (this.currentAction === 'fish') {
240 |                     this.x += (fish.x - this.x) * 0.05;
241 |                     this.y += (fish.y - this.y) * 0.05;
242 |                 }
243 |             }
244 | 
245 |             draw() {
246 |                 push();
247 |                 translate(this.x, this.y + this.jumpYOffset);
248 |                 scale(this.scale);
249 |                 this.frames[this.frameIndex]();
250 |                 pop();
251 | 
252 |                 // draw the speech bubble if needed
253 |                 if (this.currentAction === 'talk') {
254 |                     this.drawSpeechBubble(this.randomText);
255 |                 }
256 |             }
257 | 
258 |             // drawing functions for each frame
259 |             drawIdleFrame1 = () => {
260 |                 this.drawCatBase();
261 |                 this.drawEyes();
262 |             }
263 | 
264 |             drawIdleFrame2 = () => {
265 |                 this.drawCatBase();
266 |                 this.drawEyes(true);
267 |             }
268 | 
269 |             drawWalkFrame1 = () => {
270 |                 this.drawCatBase();
271 |                 this.drawEyes();
272 |                 this.drawLegs();
273 |             }
274 | 
275 |             drawWalkFrame2 = () => {
276 |                 this.drawCatBase();
277 |                 this.drawEyes();
278 |                 this.drawLegs(true);
279 |             }
280 | 
281 |             drawJump = () => {
282 |                 this.drawCatBase();
283 |                 this.drawEyes();
284 |             }
285 | 
286 |             drawSleep = () => {
287 |                 this.drawCatBase();
288 |                 this.drawClosedEyes();
289 |                 this.drawZzz();
290 |             }
291 | 
292 |             drawEatFrame1 = () => {
293 |                 this.drawCatBase();
294 |                 this.drawMouth();
295 |             }
296 | 
297 |             drawEatFrame2 = () => {
298 |                 this.drawCatBase();
299 |                 this.drawMouth(true);
300 |             }
301 | 
302 |             drawEatFrame3 = () => {
303 |                 this.drawCatBase();
304 |                 this.drawSadMouth();
305 |             }
306 | 
307 |             drawPlayFrame1 = () => {
308 |                 this.drawCatBase();
309 |                 this.drawEyes();
310 |                 this.drawLegs();
311 |             }
312 | 
313 |             drawPlayFrame2 = () => {
314 |                 this.drawCatBase();
315 |                 this.drawEyes();
316 |                 this.drawLegs(true);
317 |             }
318 | 
319 |             drawBored = () => {
320 |                 this.drawCatBase();
321 |                 this.drawEyes();
322 |                 this.drawSpeechBubble('...');
323 |             }
324 | 
325 |             drawSurprised = () => {
326 |                 this.drawCatBase();
327 |                 this.drawSurprisedEyes();
328 |                 this.drawMouth();
329 |             }
330 | 
331 |             drawHappy = () => {
332 |                 this.drawCatBase();
333 |                 this.drawEyes();
334 |                 this.drawSmile();
335 |             }
336 | 
337 |             drawDanceFrame1 = () => {
338 |                 rotate(-0.1);
339 |                 this.drawCatBase();
340 |                 this.drawEyes();
341 |             }
342 | 
343 |             drawDanceFrame2 = () => {
344 |                 rotate(0.1);
345 |                 this.drawCatBase();
346 |                 this.drawEyes();
347 |             }
348 | 
349 |             drawFishChase = () => {
350 |                 this.drawCatBase();
351 |                 this.drawEyes();
352 |             }
353 | 
354 |             drawTalk = () => {
355 |                 this.drawCatBase();
356 |                 this.drawEyes();
357 |                 this.drawSpeechBubble(this.randomText);
358 |             }
359 | 
360 |             drawCuteFrame1 = () => {
361 |                 this.drawCatBase();
362 |                 this.drawEyes();
363 |                 this.drawHeart();
364 |             }
365 | 
366 |             drawCuteFrame2 = () => {
367 |                 this.drawCatBase();
368 |                 this.drawEyes();
369 |                 this.drawHeart();
370 |             }
371 | 
372 |             // base cat drawing
373 |             drawCatBase = () => {
374 |                 stroke(0);
375 |                 fill(catColor); // Dynamic cat color
376 |                 rect(-8, -8, 16, 16); // Body
377 |                 // Ears
378 |                 triangle(-6, -8, -4, -12, -2, -8);
379 |                 triangle(6, -8, 4, -12, 2, -8);
380 |             }
381 | 
382 |             drawEyes = (blink = false) => {
383 |                 fill(0); // Eye color
384 |                 noStroke();
385 |                 if (blink) {
386 |                     rect(-4, -4, 2, 1); // left eye closed
387 |                     rect(2, -4, 2, 1); // right eye closed
388 |                 } else {
389 |                     rect(-4, -5, 2, 2); // left eye
390 |                     rect(2, -5, 2, 2); // right eye
391 |                 }
392 |             }
393 | 
394 |             drawClosedEyes = () => {
395 |                 fill(0);
396 |                 noStroke();
397 |                 rect(-4, -3, 2, 1); // left eye closed
398 |                 rect(2, -3, 2, 1); // right eye closed
399 |             }
400 | 
401 |             drawMouth = (open = false) => {
402 |                 fill(0);
403 |                 noStroke();
404 |                 if (open) {
405 |                     rect(-2, 0, 4, 2);
406 |                 } else {
407 |                     rect(-2, 1, 4, 1);
408 |                 }
409 |             }
410 | 
411 |             drawSadMouth = () => {
412 |                 noFill();
413 |                 stroke(0);
414 |                 strokeWeight(1 / this.scale);
415 |                 arc(0, 3, 4, 2, PI, TWO_PI);
416 |             }
417 | 
418 |             drawSmile = () => {
419 |                 noFill();
420 |                 stroke(0);
421 |                 strokeWeight(1 / this.scale);
422 |                 arc(0, 2, 4, 2, 0, PI);
423 |             }
424 | 
425 |             drawSurprisedEyes = () => {
426 |                 fill(0);
427 |                 noStroke();
428 |                 ellipse(-3, -4, 2, 3);
429 |                 ellipse(3, -4, 2, 3);
430 |             }
431 | 
432 |             drawLegs = (alternate = false) => {
433 |                 fill(catColor);
434 |                 noStroke();
435 |                 if (alternate) {
436 |                     rect(-6, 8, 4, 2); // left leg
437 |                     rect(2, 8, 4, 2); // right leg
438 |                 } else {
439 |                     rect(-6, 8, 4, 2); // left leg
440 |                     rect(0, 8, 4, 2); // right leg
441 |                 }
442 |             }
443 | 
444 |             drawZzz = () => {
445 |                 fill(0);
446 |                 noStroke();
447 |                 textSize(2);
448 |                 // adjusted position to prevent cropping
449 |                 text('Z', -10, -15); 
450 |             }
451 | 
452 |             drawSpeechBubble = (textContent) => {
453 |                 push();
454 |                 // adjust position as needed
455 |                 translate(this.x, this.y + this.jumpYOffset - 80); 
456 |                 fill(255);
457 |                 stroke(0);
458 |                 let bubbleWidth = textContent.length * 8 + 20;
459 |                 let bubbleHeight = 30;
460 |                 rect(-bubbleWidth / 2, -bubbleHeight / 2, bubbleWidth, bubbleHeight, 5);
461 |                 fill(0);
462 |                 noStroke();
463 |                 textSize(12);
464 |                 textAlign(CENTER, CENTER);
465 |                 text(textContent, 0, 0);
466 |                 pop();
467 |             }
468 | 
469 |             drawHeart = () => {
470 |                 push();
471 |                 // position above the cat
472 |                 translate(0, -12); 
473 |                 fill('#ff3366');
474 |                 noStroke();
475 |                 beginShape();
476 |                 vertex(0, -2);
477 |                 bezierVertex(-2, -5, -6, -5, -6, -1);
478 |                 bezierVertex(-6, 2, -3, 4, 0, 6);
479 |                 bezierVertex(3, 4, 6, 2, 6, -1);
480 |                 bezierVertex(6, -5, 2, -5, 0, -2);
481 |                 endShape(CLOSE);
482 |                 pop();
483 |             }
484 |         }
485 | 
486 |         class Ball {
487 |             constructor() {
488 |                 // ball size
489 |                 this.radius = 10; 
490 |                 this.reset();
491 |             }
492 | 
493 |             reset() {
494 |                 this.x = random(this.radius, width - this.radius);
495 |                 this.y = random(this.radius, height - this.radius);
496 |                 this.vx = random(-2, 2);
497 |                 this.vy = random(-2, 2);
498 |             }
499 | 
500 |             update() {
501 |                 this.x += this.vx;
502 |                 this.y += this.vy;
503 | 
504 |                 // bounce off the edges
505 |                 if (this.x < this.radius || this.x > width - this.radius) {
506 |                     this.vx *= -1;
507 |                 }
508 |                 if (this.y < this.radius || this.y > height - this.radius) {
509 |                     this.vy *= -1;
510 |                 }
511 |             }
512 | 
513 |             draw() {
514 |                 push();
515 |                 fill('#ff5722');
516 |                 noStroke();
517 |                 ellipse(this.x, this.y, this.radius * 2);
518 |                 pop();
519 |             }
520 |         }
521 | 
522 |         class Fish {
523 |             constructor() {
524 |                 this.reset();
525 |             }
526 | 
527 |             reset() {
528 |                 this.x = -20;
529 |                 this.y = random(50, height - 50);
530 |                 this.vx = 2;
531 |             }
532 | 
533 |             update() {
534 |                 this.x += this.vx;
535 | 
536 |                 // reset position if off-screen
537 |                 if (this.x > width + 20) {
538 |                     this.reset();
539 |                 }
540 |             }
541 | 
542 |             draw() {
543 |                 push();
544 |                 translate(this.x, this.y);
545 |                 scale(2);
546 |                 fill('#00bcd4');
547 |                 stroke(0);
548 |                 triangle(0, 0, -10, -5, -10, 5); // tail
549 |                 ellipse(0, 0, 15, 10); // body
550 |                 fill(255);
551 |                 noStroke();
552 |                 ellipse(5, -2, 3, 3); // eye
553 |                 fill(0);
554 |                 ellipse(5, -2, 1, 1); // pupil
555 |                 pop();
556 |             }
557 |         }
558 | 
559 | 
560 |         // theme area
561 |         let currentAudio = null;
562 | 
563 |         let themes = {
564 |             'space': { backgroundColor: '#1a1a1a', catColor: '#ffffff', backgroundMusic: 'audio/space.mp3' },
565 |             'underwater': { backgroundColor: '#00bcd4', catColor: '#ffcc99', backgroundMusic: 'audio/underwater.mp3' },
566 |             'clear': { backgroundColor: '#f0f0f0', catColor: catColors[0], backgroundMusic: null }
567 |         };
568 | 
569 |         function setTheme(themeName) {
570 |             let theme = themes[themeName];
571 |             document.body.style.backgroundColor = theme.backgroundColor;
572 |             catColor = theme.catColor;
573 |             playMusic(theme.backgroundMusic);
574 |         }
575 | 
576 |         function playMusic(musicFile) {
577 |             if (currentAudio) {
578 |                 currentAudio.pause();
579 |                 currentAudio.currentTime = 0;
580 |             }
581 |             if (musicFile) {
582 |                 currentAudio = new Audio(musicFile);
583 |                 currentAudio.loop = true;
584 |                 currentAudio.play();
585 |             }
586 |         }
587 |     </script>
588 | 
589 | </body>
590 | </html>
591 | 
592 | 


--------------------------------------------------------------------------------
/eyes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Interactive Eye Character</title>
 6 |     <link rel="stylesheet" href="resource/eyes.css">
 7 | </head>
 8 | <body>
 9 |     <div id="container">
10 |         <canvas id="eyesCanvas" width="500" height="400"></canvas>
11 |         <div id="controls">
12 |             <button id="idle">Idle Mode</button>
13 |             <button id="followMouse">Follow Mouse</button>
14 |             <button id="blink">Blink</button>
15 |             <button id="surprised">Surprised</button>
16 |             <button id="sleepy">Sleepy</button>
17 |             <button id="bored">Bored</button>
18 |             <button id="wtf">wtf</button>
19 |             <button id="lookAround">Look Left and Right</button>
20 |         </div>
21 |     </div>
22 | 
23 |     <script src="resource/eyes.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/images/device1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/images/device1.png


--------------------------------------------------------------------------------
/images/device1_cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/images/device1_cat.png


--------------------------------------------------------------------------------
/images/device1_eyes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/images/device1_eyes.png


--------------------------------------------------------------------------------
/images/device2_notion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/images/device2_notion.png


--------------------------------------------------------------------------------
/images/device2_plant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Barqawiz/Tamagotchi/260f5236103834a6734a4d5c59201bdc91341fe6/images/device2_plant.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Give Identity to Your AI</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 10 |             background: linear-gradient(135deg, #e0eafc, #cfdef3); /* Soft blue gradient */
 11 |             margin: 0;
 12 |             padding: 0;
 13 |             display: flex;
 14 |             flex-direction: column;
 15 |             align-items: center;
 16 |             justify-content: center;
 17 |             min-height: 100vh;
 18 |             position: relative;
 19 |         }
 20 | 
 21 |         h1 {
 22 |             color: #333;
 23 |             text-align: center;
 24 |             margin-bottom: 5px;
 25 |         }
 26 | 
 27 |         h2 {
 28 |             color: #333;
 29 |             text-align: center;
 30 |             margin-bottom: 50px;
 31 |         }
 32 | 
 33 |         .dashboard {
 34 |             display: flex;
 35 |             flex-wrap: wrap;
 36 |             justify-content: center;
 37 |             max-width: 800px;
 38 |             width: 100%;
 39 |             gap: 20px;
 40 |         }
 41 | 
 42 |         .dashboard button {
 43 |             flex: 1 1 calc(50% - 40px);
 44 |             padding: 20px;
 45 |             font-size: 20px;
 46 |             font-weight: bold;
 47 |             color: #ffffff;
 48 |             background-color: #2980b9; /* Attractive blue */
 49 |             border: none;
 50 |             border-radius: 12px;
 51 |             cursor: pointer;
 52 |             position: relative;
 53 |             overflow: hidden;
 54 |             transition: all 0.4s ease;
 55 |             max-width: 300px;
 56 |             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 57 |         }
 58 | 
 59 |         .dashboard button:hover {
 60 |             background-color: #3498db; /* Lighter blue on hover */
 61 |             transform: translateY(-5px);
 62 |             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 63 |         }
 64 | 
 65 |         .dashboard button:active {
 66 |             transform: translateY(0);
 67 |             box-shadow: none;
 68 |         }
 69 | 
 70 |         .dashboard button span {
 71 |             position: relative;
 72 |             z-index: 2;
 73 |         }
 74 | 
 75 |         /* github star */
 76 |         .github-star {
 77 |             position: absolute;
 78 |             top: 20px;
 79 |             right: 20px;
 80 |         }
 81 | 
 82 |         @media(max-width: 600px) {
 83 |             .dashboard button {
 84 |                 flex: 1 1 100%;
 85 |             }
 86 |         }
 87 | 
 88 |     </style>
 89 | </head>
 90 | <body>
 91 | 
 92 |     <!-- github button -->
 93 |     <div class="github-star">
 94 |         <a class="github-button" href="https://github.com/Barqawiz/Tamagotchi" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Barqawiz/Tamagotchi on GitHub">Star</a>
 95 |     </div>
 96 | 
 97 |     <h1>Tamagotchi</h1>
 98 |     <h2>Give Identity to Your AI</h2>
 99 | 
100 |     <div class="dashboard">
101 |         <button onclick="window.location.href='cat.html'"><span>Cat</span></button>
102 |         <button onclick="window.location.href='plant.html'"><span>Plant</span></button>
103 |         <button onclick="window.location.href='eyes.html'"><span>Eyes</span></button>
104 |         <button onclick="window.location.href='notion.html'"><span>Notion</span></button>
105 |         <!-- add more buttons -->
106 |     </div>
107 | 
108 |     <!-- github script -->
109 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
110 | 
111 | </body>
112 | </html>
113 | 


--------------------------------------------------------------------------------
/notion.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Notion AI Assistant</title>
 6 |     <!-- main style -->
 7 |     <link rel="stylesheet" type="text/css" href="resource/notion.css">
 8 |     <!-- p5.js -->
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
10 |     <!-- google Fonts -->
11 |     <link rel="preconnect" href="https://fonts.googleapis.com">
12 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13 |     <link href="https://fonts.googleapis.com/css2?family=Whisper&display=swap" rel="stylesheet">
14 |     <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
15 | </head>
16 | <body>
17 | 
18 |     <div id="controls">
19 |         <button onclick="setAction('idle')">Idle</button>
20 |         <button onclick="setAction('thinking')">Thinking</button>
21 |         <button onclick="setAction('typing')">Typing</button>
22 |         <button onclick="setAction('error')">Error</button>
23 |         <button onclick="setAction('satisfaction')">Satisfaction</button>
24 |         <button onclick="setAction('curious')">Curious</button>
25 |         <button onclick="setAction('surprised')">Surprised</button>
26 |         <button onclick="setAction('uncertain')">Uncertain</button>
27 |         <button onclick="setAction('confident')">Confident</button>
28 |         <button onclick="setAction('excited')">Excited</button>
29 |     </div>
30 | 
31 |     <!-- github dev -->
32 |     <div style="position: absolute; top: 20px; right: 20px;">
33 |         <a class="github-button" href="https://github.com/Barqawiz/Tamagotchi" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Barqawiz/Tamagotchi on GitHub">Star</a>
34 |     </div>
35 | 
36 |     <!-- main js -->
37 |     <script src="resource/notion.js"></script>
38 |     <!-- github js -->
39 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
40 | 
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/plant.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Interactive Plant Character</title>
 6 |     <link rel="stylesheet" href="resource/plant.css">
 7 | </head>
 8 | <body>
 9 |     <div id="container">
10 |         <canvas id="plantCanvas" width="400" height="400"></canvas>
11 |         <div id="controls">
12 |             <button id="dayNightMode">Toggle Day/Night Mode</button>
13 |             <button id="growthStage">Change Growth Stage</button>
14 |             <button id="waterPlant">Water Plant</button>
15 |             <button id="giveSun">Provide Sunlight</button>
16 |             <button id="fertilizePlant">Fertilize Plant</button>
17 |             <button id="playMusic">Play Music</button>
18 |             <button id="talkPlant">Talk to Plant</button>
19 |             <button id="showText">Show Text</button>
20 |             <button id="cuteButton">Cute</button>
21 |             <button id="showButterfly">Show Butterfly</button>
22 |             <button id="sleeping">Sleeping</button>
23 |             <button id="showNeedWater">Show "I need water"</button>
24 |             <button id="showNeedSun">Show "I need sun"</button>
25 |             <button id="idealButton">Ideal</button>
26 |         </div>
27 |         <div id="message"></div>
28 |         <div id="textDisplay"></div>
29 |     </div>
30 | 
31 | 
32 |     <script src="resource/plant.js"></script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/resource/eyes.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     background-color: #ffffff;
 5 |     color: #000000;
 6 |     font-family: Arial, sans-serif;
 7 | }
 8 | 
 9 | #container {
10 |     text-align: center;
11 |     padding-top: 50px;
12 | }
13 | 
14 | #eyesCanvas {
15 |     background-color: #eeeeee;
16 |     border: 2px solid #000;
17 |     border-radius: 10px;
18 | }
19 | 
20 | #controls {
21 |     margin-top: 20px;
22 | }
23 | 
24 | button {
25 |     background-color: #ff66cc;
26 |     border: none;
27 |     color: white;
28 |     padding: 10px 15px;
29 |     margin: 5px;
30 |     border-radius: 10px;
31 |     font-size: 14px;
32 |     cursor: pointer;
33 |     transition: background-color 0.3s;
34 | }
35 | 
36 | button:hover {
37 |     background-color: #ff85d5;
38 | }
39 | 


--------------------------------------------------------------------------------
/resource/eyes.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * MIT License
  3 |  * Copyright (c) 2024 github.com/Barqawiz/
  4 |  * **/
  5 | 
  6 | // get the canvas and context
  7 | const canvas = document.getElementById('eyesCanvas');
  8 | const ctx = canvas.getContext('2d');
  9 | 
 10 | // eye parameters
 11 | const eyeRadius = 80;
 12 | const irisRadiusDefault = 30;
 13 | const pupilRadiusDefault = 12;
 14 | const eyeOffsetX = 120; // distance from center for each eye
 15 | const eyeCenterY = canvas.height / 2;
 16 | const leftEyeCenterX = canvas.width / 2 - eyeOffsetX;
 17 | const rightEyeCenterX = canvas.width / 2 + eyeOffsetX;
 18 | 
 19 | // mouse position
 20 | let mouseX = canvas.width / 2;
 21 | let mouseY = canvas.height / 2;
 22 | 
 23 | // state variables
 24 | let isBlinking = false;
 25 | let blinkProgress = 0;
 26 | let isSurprised = false;
 27 | let isSleepy = false;
 28 | let isBored = false;
 29 | let isFollowingMouse = false;
 30 | let isIdle = true;
 31 | let isLookingAround = false;
 32 | let isWTF = false;
 33 | 
 34 | // idle blink timer
 35 | let idleBlinkInterval;
 36 | 
 37 | // look around variables
 38 | let lookPause = false;
 39 | let lookDirection = 1; // 1 for right, -1 for left
 40 | let lookAngle = 0;
 41 | 
 42 | // animation parameters
 43 | let lastTime = 0;
 44 | 
 45 | function draw(timestamp) {
 46 |     const deltaTime = timestamp - lastTime;
 47 |     lastTime = timestamp;
 48 | 
 49 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
 50 | 
 51 |     // update lookAngle globally
 52 |     if (isLookingAround && !lookPause) {
 53 |          // speed
 54 |         lookAngle += 0.01 * lookDirection;
 55 |         if (Math.abs(lookAngle) > Math.PI / 4) { 
 56 |             // limit angle to ±45 degrees
 57 |             lookPause = true;
 58 |             setTimeout(() => {
 59 |                 lookPause = false;
 60 |                 // change direction after pause
 61 |                 lookDirection *= -1; 
 62 |             }, 500 /*shorter pause for smoother movement*/); 
 63 |         }
 64 |     }
 65 | 
 66 |     // draw left eye
 67 |     drawEye(leftEyeCenterX, eyeCenterY);
 68 | 
 69 |     // draw right eye
 70 |     drawEye(rightEyeCenterX, eyeCenterY);
 71 | 
 72 |     requestAnimationFrame(draw);
 73 | }
 74 | 
 75 | function drawEye(centerX, centerY) {
 76 |     ctx.save();
 77 | 
 78 |     let currentEyeRadius = eyeRadius;
 79 |     let currentIrisRadius = irisRadiusDefault;
 80 |     let currentPupilRadius = pupilRadiusDefault;
 81 | 
 82 |     // adjust eye size if surprised
 83 |     if (isSurprised) {
 84 |         currentEyeRadius = eyeRadius * 1.2;
 85 |         currentIrisRadius = irisRadiusDefault * 1.2;
 86 |         currentPupilRadius = pupilRadiusDefault * 1.2;
 87 |     }
 88 | 
 89 |     // draw eye outline
 90 |     ctx.beginPath();
 91 |     ctx.arc(centerX, centerY, currentEyeRadius, 0, Math.PI * 2);
 92 |     ctx.fillStyle = '#FFFFFF';
 93 |     ctx.fill();
 94 |     ctx.strokeStyle = '#000000';
 95 |     ctx.lineWidth = 5;
 96 |     ctx.stroke();
 97 | 
 98 |     // calculate iris position
 99 |     let irisX = centerX;
100 |     let irisY = centerY;
101 |     if (isFollowingMouse) {
102 |         let dx = mouseX - centerX;
103 |         let dy = mouseY - centerY;
104 |         let distance = Math.sqrt(dx * dx + dy * dy);
105 |         let maxDistance = currentEyeRadius - currentIrisRadius - 5;
106 |         if (distance > maxDistance) {
107 |             let ratio = maxDistance / distance;
108 |             dx *= ratio;
109 |             dy *= ratio;
110 |         }
111 |         irisX = centerX + dx;
112 |         irisY = centerY + dy;
113 |     } else if (isLookingAround) {
114 |         let maxOffset = currentEyeRadius - currentIrisRadius - 10;
115 |         irisX = centerX + Math.sin(lookAngle) * maxOffset;
116 |     } else if (isIdle) {
117 |         // slightly offset iris position for a natural gaze
118 |         irisX = centerX + (currentEyeRadius - currentIrisRadius - 15) * 0.1;
119 |     }
120 | 
121 |     // draw iris
122 |     ctx.beginPath();
123 |     ctx.arc(irisX, irisY, currentIrisRadius, 0, Math.PI * 2);
124 |     ctx.fillStyle = '#1E90FF'; // blue iris
125 |     ctx.fill();
126 | 
127 |     // draw pupil
128 |     ctx.beginPath();
129 |     ctx.arc(irisX, irisY, currentPupilRadius, 0, Math.PI * 2);
130 |     ctx.fillStyle = '#000000';
131 |     ctx.fill();
132 | 
133 |     // add light reflection
134 |     ctx.beginPath();
135 |     ctx.arc(irisX - currentPupilRadius / 2.5, irisY - currentPupilRadius / 2.5, currentPupilRadius / 3, 0, Math.PI * 2);
136 |     ctx.fillStyle = '#FFFFFF';
137 |     ctx.fill();
138 | 
139 |     // draw expressions
140 |     if (isBlinking) {
141 |         drawBlink(centerX, centerY, currentEyeRadius);
142 |     } else if (isSleepy) {
143 |         drawSleepyEyelid(centerX, centerY, currentEyeRadius);
144 |     } else if (isBored) {
145 |         drawBoredEyelid(centerX, centerY, currentEyeRadius);
146 |     } else if (isWTF) {
147 |         drawwtfEyebrows(centerX, centerY, currentEyeRadius);
148 |     }
149 | 
150 |     ctx.restore();
151 | }
152 | 
153 | function drawBlink(centerX, centerY, radius) {
154 |     let blinkAmount = blinkProgress / 100;
155 | 
156 |     ctx.save();
157 | 
158 |     // create clipping region within the eye circle
159 |     ctx.beginPath();
160 |     ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
161 |     ctx.closePath();
162 |     ctx.clip();
163 | 
164 |     // eyelid color (light gray)
165 |     ctx.fillStyle = '#cccccc';
166 | 
167 |     // upper eyelid moving down
168 |     ctx.beginPath();
169 |     ctx.rect(centerX - radius, centerY - radius, radius * 2, radius * blinkAmount * 2);
170 |     ctx.fill();
171 | 
172 |     ctx.restore();
173 | }
174 | 
175 | function drawSleepyEyelid(centerX, centerY, radius) {
176 |     ctx.save();
177 | 
178 |     // create clipping region within the eye circle
179 |     ctx.beginPath();
180 |     ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
181 |     ctx.closePath();
182 |     ctx.clip();
183 | 
184 |     // eyelid color (light gray)
185 |     ctx.fillStyle = '#cccccc';
186 | 
187 |     // sleepy upper eyelid
188 |     ctx.beginPath();
189 |     ctx.moveTo(centerX - radius, centerY + radius / 3);
190 |     ctx.quadraticCurveTo(centerX, centerY + radius / 2, centerX + radius, centerY + radius / 3);
191 |     ctx.lineTo(centerX + radius, centerY + radius + 1);
192 |     ctx.lineTo(centerX - radius, centerY + radius + 1);
193 |     ctx.closePath();
194 |     ctx.fill();
195 | 
196 |     ctx.restore();
197 | }
198 | 
199 | function drawBoredEyelid(centerX, centerY, radius) {
200 |     ctx.save();
201 | 
202 |     // create clipping region within the eye circle
203 |     ctx.beginPath();
204 |     ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
205 |     ctx.closePath();
206 |     ctx.clip();
207 | 
208 |     // eyelid color (light gray)
209 |     ctx.fillStyle = '#cccccc';
210 | 
211 |     // bored upper eyelid
212 |     ctx.beginPath();
213 |     ctx.moveTo(centerX - radius, centerY + radius / 5);
214 |     ctx.quadraticCurveTo(centerX, centerY + radius / 4, centerX + radius, centerY + radius / 5);
215 |     ctx.lineTo(centerX + radius, centerY + radius + 1);
216 |     ctx.lineTo(centerX - radius, centerY + radius + 1);
217 |     ctx.closePath();
218 |     ctx.fill();
219 | 
220 |     ctx.restore();
221 | }
222 | 
223 | function drawwtfEyebrows(centerX, centerY, radius) {
224 |     ctx.save();
225 | 
226 |     // draw wtf eyebrow above the eye
227 |     ctx.strokeStyle = '#000000';
228 |     ctx.lineWidth = 5;
229 | 
230 |     ctx.beginPath();
231 |     // eyebrow slanting down towards center for wtf expression
232 |     ctx.moveTo(centerX - radius / 1.5, centerY - radius * 1.1);
233 |     ctx.lineTo(centerX + radius / 1.5, centerY - radius * 0.9);
234 |     ctx.stroke();
235 | 
236 |     ctx.restore();
237 | }
238 | 
239 | function startBlink() {
240 |     if (isBlinking) return;
241 |     isBlinking = true;
242 |     blinkProgress = 0;
243 |     let closing = true;
244 |     let blinkInterval = setInterval(() => {
245 |         if (closing) {
246 |             blinkProgress += 10;
247 |             if (blinkProgress >= 100) {
248 |                 blinkProgress = 100;
249 |                 closing = false;
250 |             }
251 |         } else {
252 |             blinkProgress -= 10;
253 |             if (blinkProgress <= 0) {
254 |                 blinkProgress = 0;
255 |                 isBlinking = false;
256 |                 clearInterval(blinkInterval);
257 |             }
258 |         }
259 |     }, 30); // adjusted speed for smoother blink
260 | }
261 | 
262 | canvas.addEventListener('mousemove', function (event) {
263 |     if (!isFollowingMouse) return;
264 |     let rect = canvas.getBoundingClientRect();
265 |     mouseX = event.clientX - rect.left;
266 |     mouseY = event.clientY - rect.top;
267 | });
268 | 
269 | function setMode(mode) {
270 |     // reset all modes
271 |     isFollowingMouse = false;
272 |     isSurprised = false;
273 |     isSleepy = false;
274 |     isBored = false;
275 |     isIdle = false;
276 |     isLookingAround = false;
277 |     isWTF = false;
278 |     lookPause = false;
279 | 
280 |     clearInterval(idleBlinkInterval);
281 | 
282 |     switch (mode) {
283 |         case 'idle':
284 |             isIdle = true;
285 |             idleBlink();
286 |             idleBlinkInterval = setInterval(idleBlink, 4000 + Math.random() * 2000);
287 |             break;
288 |         case 'followMouse':
289 |             isFollowingMouse = true;
290 |             break;
291 |         case 'surprised':
292 |             isSurprised = true;
293 |             break;
294 |         case 'sleepy':
295 |             isSleepy = true;
296 |             break;
297 |         case 'bored':
298 |             isBored = true;
299 |             break;
300 |         case 'wtf':
301 |             isWTF = true;
302 |             break;
303 |         case 'lookAround':
304 |             isLookingAround = true;
305 |             lookAngle = 0; // reset angle
306 |             break;
307 |         default:
308 |             break;
309 |     }
310 | }
311 | 
312 | function idleBlink() {
313 |     startBlink();
314 | }
315 | 
316 | document.getElementById('idle').addEventListener('click', function () {
317 |     setMode('idle');
318 | });
319 | 
320 | document.getElementById('followMouse').addEventListener('click', function () {
321 |     setMode('followMouse');
322 | });
323 | 
324 | document.getElementById('blink').addEventListener('click', function () {
325 |     startBlink();
326 | });
327 | 
328 | document.getElementById('surprised').addEventListener('click', function () {
329 |     setMode('surprised');
330 | });
331 | 
332 | document.getElementById('sleepy').addEventListener('click', function () {
333 |     setMode('sleepy');
334 | });
335 | 
336 | document.getElementById('bored').addEventListener('click', function () {
337 |     setMode('bored');
338 | });
339 | 
340 | document.getElementById('wtf').addEventListener('click', function () {
341 |     setMode('wtf');
342 | });
343 | 
344 | document.getElementById('lookAround').addEventListener('click', function () {
345 |     setMode('lookAround');
346 | });
347 | 
348 | requestAnimationFrame(draw);
349 | setMode('idle');
350 | 


--------------------------------------------------------------------------------
/resource/notion.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     text-align: center;
 3 |     background-color: #ffffff;
 4 |     font-family: Arial, sans-serif;
 5 |     margin: 0;
 6 |     overflow: hidden;
 7 | }
 8 | 
 9 | #controls {
10 |     position: absolute;
11 |     bottom: 20px;
12 |     width: 100%;
13 |     text-align: center;
14 |     z-index: 1;
15 | }
16 | 
17 | #controls button {
18 |     margin: 5px;
19 |     padding: 10px 20px;
20 |     font-size: 16px;
21 |     background-color: #000000;
22 |     color: #ffffff;
23 |     border: none;
24 |     cursor: pointer;
25 |     border-radius: 5px;
26 | }
27 | 
28 | #controls button:hover {
29 |     background-color: #333333;
30 | }
31 | 


--------------------------------------------------------------------------------
/resource/notion.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * MIT License
  3 |  * Copyright (c) 2024 github.com/Barqawiz/
  4 |  * **/
  5 | let notionAI;
  6 | let sketchStarted = false;
  7 | 
  8 | // Whisper font
  9 | WebFont.load({
 10 |     google: {
 11 |         families: ['Whisper']
 12 |     },
 13 |     active: function() {
 14 |         if (!sketchStarted) {
 15 |             new p5(sketch);
 16 |             sketchStarted = true;
 17 |         }
 18 |     }
 19 | });
 20 | 
 21 | function sketch(p) {
 22 |     p.setup = function() {
 23 |         p.createCanvas(400, 400).parent(document.body);
 24 |         p.frameRate(24);
 25 |         notionAI = new NotionAI(p);
 26 |     };
 27 | 
 28 |     p.draw = function() {
 29 |         p.background(255);
 30 |         notionAI.update();
 31 |         notionAI.draw();
 32 |     };
 33 | 
 34 |     // expose setAction to the global scope
 35 |     window.setAction = function(action) {
 36 |         notionAI.setAction(action);
 37 |     };
 38 | 
 39 |     class NotionAI {
 40 |         constructor(p) {
 41 |             this.p = p;
 42 |             this.x = p.width / 2;
 43 |             this.y = p.height / 2;
 44 |             this.scaleFactor = 2;
 45 |             this.frameCount = 0;
 46 |             this.blinkTimer = 0;
 47 |             this.blinkInterval = p.random(100, 200);
 48 |             this.currentAction = 'idle';
 49 |             this.browWaveOffset = 0;
 50 |             this.browWaveDirection = 1;
 51 |             this.eyeBlink = false;
 52 |             this.typingText = '';
 53 |             this.typingIndex = 0;
 54 |             this.typingTimer = 0;
 55 |             this.faceTilt = 0;
 56 |             this.errorTranslateY = 0;
 57 |             this.errorRotation = 0;
 58 |         }
 59 | 
 60 |         setAction(action) {
 61 |             this.currentAction = action;
 62 |             this.frameCount = 0;
 63 |             this.browWaveOffset = 0;
 64 |             this.blinkTimer = 0;
 65 |             this.eyeBlink = false;
 66 |             this.typingText = '';
 67 |             this.typingIndex = 0;
 68 |             this.typingTimer = 0;
 69 |             this.faceTilt = 0;
 70 |             this.errorTranslateY = 0;
 71 |             this.errorRotation = 0;
 72 |         }
 73 | 
 74 |         update() {
 75 |             this.frameCount++;
 76 | 
 77 |             if (this.currentAction === 'idle') {
 78 |                 this.blinkTimer++;
 79 |                 if (this.blinkTimer > this.blinkInterval) {
 80 |                     this.eyeBlink = true;
 81 |                     if (this.blinkTimer > this.blinkInterval + 5) {
 82 |                         this.eyeBlink = false;
 83 |                         this.blinkTimer = 0;
 84 |                         this.blinkInterval = this.p.random(100, 200);
 85 |                     }
 86 |                 }
 87 |             }
 88 | 
 89 |             if (this.currentAction === 'thinking') {
 90 |                 this.browWaveOffset += 0.1 * this.browWaveDirection;
 91 |                 if (this.browWaveOffset > this.p.PI / 4 || this.browWaveOffset < -this.p.PI / 4) {
 92 |                     this.browWaveDirection *= -1;
 93 |                 }
 94 |             }
 95 | 
 96 |             if (this.currentAction === 'typing') {
 97 |                 this.typingTimer++;
 98 |                 if (this.typingTimer % 5 === 0 && this.typingIndex < 10) {
 99 |                     this.typingText += String.fromCharCode(97 + Math.floor(this.p.random(0, 26)));
100 |                     this.typingIndex++;
101 |                 }
102 |                 if (this.typingIndex >= 10) {
103 |                     this.typingText = '';
104 |                     this.typingIndex = 0;
105 |                 }
106 |             }
107 | 
108 |             if (this.currentAction === 'uncertain') {
109 |                 if (this.frameCount < 30) {
110 |                     this.faceTilt = this.p.map(this.frameCount, 0, 30, 0, -0.2);
111 |                 } else {
112 |                     this.faceTilt = -0.2;
113 |                 }
114 |             } else {
115 |                 this.faceTilt = 0;
116 |             }
117 | 
118 |             if (this.currentAction === 'error') {
119 |                 if (this.frameCount < 30) {
120 |                     this.errorTranslateY = this.frameCount;
121 |                     this.errorRotation = this.p.radians(this.frameCount * 5);
122 |                 } else if (this.frameCount < 60) {
123 |                     this.errorTranslateY = 60 - this.frameCount;
124 |                     this.errorRotation = this.p.radians((60 - this.frameCount) * 5);
125 |                 } else {
126 |                     this.errorTranslateY = 0;
127 |                     this.errorRotation = 0;
128 |                     this.setAction('idle');
129 |                 }
130 |             } else {
131 |                 this.errorTranslateY = 0;
132 |                 this.errorRotation = 0;
133 |             }
134 |         }
135 | 
136 |         draw() {
137 |             this.p.push();
138 |             this.p.translate(this.x, this.y);
139 |             this.p.scale(this.scaleFactor);
140 |             this.p.rotate(this.faceTilt);
141 | 
142 |             this.p.translate(0, this.errorTranslateY);
143 |             this.p.rotate(this.errorRotation);
144 | 
145 |             this.p.stroke(0);
146 |             this.p.strokeWeight(2);
147 |             this.p.noFill();
148 | 
149 |             this.drawNose();
150 |             this.drawEyes();
151 |             this.drawEyebrows();
152 |             this.drawMouth();
153 | 
154 |             if (this.currentAction === 'typing') {
155 |                 this.drawTypingAnimation();
156 |             }
157 | 
158 |             this.p.pop();
159 |         }
160 | 
161 |         drawNose() {
162 |             this.p.push();
163 |             this.p.strokeWeight(4);
164 |             this.p.beginShape();
165 |             this.p.vertex(0, -10);
166 |             this.p.quadraticVertex(10, -5, 0, 10);
167 |             this.p.endShape();
168 |             this.p.pop();
169 |         }
170 | 
171 |         drawEyes() {
172 |             this.p.fill(0);
173 |             this.p.noStroke();
174 |             let eyeOffsetX = 20;
175 |             let eyeOffsetY = -15;
176 | 
177 |             if (this.eyeBlink) {
178 |                 this.p.rect(-eyeOffsetX - 5, eyeOffsetY, 10, 2);
179 |                 this.p.rect(eyeOffsetX - 5, eyeOffsetY, 10, 2);
180 |             } else {
181 |                 this.p.ellipse(-eyeOffsetX, eyeOffsetY, 5, 5);
182 |                 this.p.ellipse(eyeOffsetX, eyeOffsetY, 5, 5);
183 |             }
184 |         }
185 | 
186 |         drawEyebrows() {
187 |             this.p.stroke(0);
188 |             this.p.strokeWeight(2);
189 |             let browOffsetX = 18;
190 |             let browOffsetY = -25;
191 | 
192 |             if (this.currentAction === 'thinking') {
193 |                 let offset = this.p.sin(this.frameCount * 0.2) * 5;
194 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY + offset, -10, -35 + offset);
195 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY - offset, 10, -35 - offset);
196 |             } else if (this.currentAction === 'curious') {
197 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY - 5, -10, browOffsetY - 15);
198 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY + 5, 10, browOffsetY + 5);
199 |             } else if (this.currentAction === 'surprised') {
200 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY - 10, -10, browOffsetY - 10);
201 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY - 10, 10, browOffsetY - 10);
202 |             } else if (this.currentAction === 'uncertain') {
203 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY + 5, -10, browOffsetY);
204 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY + 5, 10, browOffsetY);
205 |             } else if (this.currentAction === 'confident') {
206 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY - 5, -10, browOffsetY - 15);
207 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY - 5, 10, browOffsetY - 15);
208 |             } else if (this.currentAction === 'excited') {
209 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY - 15, -10, browOffsetY - 25);
210 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY - 15, 10, browOffsetY - 25);
211 |             } else {
212 |                 this.drawCurvedEyebrow(-browOffsetX, browOffsetY, -10, browOffsetY);
213 |                 this.drawCurvedEyebrow(browOffsetX, browOffsetY, 10, browOffsetY);
214 |             }
215 |         }
216 | 
217 |         drawCurvedEyebrow(startX, startY, endX, endY) {
218 |             this.p.beginShape();
219 |             this.p.curveVertex(startX - 5, startY);
220 |             this.p.curveVertex(startX, startY);
221 |             this.p.curveVertex(endX, endY);
222 |             this.p.curveVertex(endX + 5, endY);
223 |             this.p.endShape();
224 |         }
225 | 
226 |         drawMouth() {
227 |             this.p.noFill();
228 |             this.p.stroke(0);
229 |             this.p.strokeWeight(2);
230 | 
231 |             if (this.currentAction === 'satisfaction') {
232 |                 this.p.arc(0, 20, 20, 10, 0, this.p.PI);
233 |             } else if (this.currentAction === 'surprised') {
234 |                 this.p.ellipse(0, 20, 5, 5);
235 |             } else if (this.currentAction === 'uncertain') {
236 |                 this.p.arc(0, 25, 20, 10, this.p.PI, this.p.TWO_PI);
237 |             } else if (this.currentAction === 'confident') {
238 |                 // No mouth
239 |             } else if (this.currentAction === 'excited') {
240 |                 this.p.arc(0, 20, 20, 15, 0, this.p.PI);
241 |             } else {
242 |                 // No mouth for other states
243 |             }
244 |         }
245 | 
246 |         drawTypingAnimation() {
247 |             this.p.push();
248 |             this.p.translate(0, 30); // reduced vertical offset
249 |             this.p.fill(0);
250 |             this.p.noStroke();
251 |             this.p.textSize(16); // increased font size
252 |             this.p.textAlign(this.p.CENTER);
253 | 
254 |             this.p.textFont('Whisper');
255 | 
256 |             this.p.text(this.typingText + '_', 0, 0);
257 |             this.p.pop();
258 |         }
259 |     }
260 | }
261 | 


--------------------------------------------------------------------------------
/resource/plant.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     background-color: #ffffff; /* start with day background */
 5 |     color: #000000;
 6 |     font-family: Arial, sans-serif;
 7 |     transition: background-color 0.5s, color 0.5s;
 8 | }
 9 | 
10 | #container {
11 |     text-align: center;
12 |     padding-top: 50px;
13 | }
14 | 
15 | #plantCanvas {
16 |     background-color: #87CEEB; /* sky blue for day */
17 |     border: 2px solid #000;
18 |     border-radius: 10px;
19 | }
20 | 
21 | #controls {
22 |     margin-top: 20px;
23 | }
24 | 
25 | button {
26 |     background-color: #ff66cc; /* cute button color */
27 |     border: none;
28 |     color: white;
29 |     padding: 10px 15px;
30 |     margin: 5px;
31 |     border-radius: 10px;
32 |     font-size: 14px;
33 |     cursor: pointer;
34 |     transition: background-color 0.3s;
35 | }
36 | 
37 | button:hover {
38 |     background-color: #ff85d5;
39 | }
40 | 
41 | #message {
42 |     margin-top: 20px;
43 |     font-size: 18px;
44 | }
45 | 
46 | #textDisplay {
47 |     margin-top: 20px;
48 |     font-size: 18px;
49 |     color: #ffcc00; /* yellowish color for text */
50 | }
51 | 


--------------------------------------------------------------------------------
/resource/plant.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * MIT License
  3 |  * Copyright (c) 2024 github.com/Barqawiz/
  4 |  * **/
  5 | const canvas = document.getElementById('plantCanvas');
  6 | const ctx = canvas.getContext('2d');
  7 | 
  8 | let isDayMode = true; // start with day mode
  9 | let growthStage = 1; // 0: seed, 1: seedling, 2: growing, 3: mature
 10 | let needsWater = false;
 11 | let needsSun = false;
 12 | 
 13 | let textTimeout;
 14 | let animationAngle = 0;
 15 | 
 16 | function drawPlant() {
 17 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
 18 | 
 19 |     // draw background
 20 |     if (isDayMode) {
 21 |         drawDayBackground();
 22 |     } else {
 23 |         drawNightBackground();
 24 |     }
 25 | 
 26 |     // save the context
 27 |     ctx.save();
 28 |     // move to the bottom center of the canvas
 29 |     ctx.translate(canvas.width / 2, canvas.height);
 30 | 
 31 |     // apply idle animation sway
 32 |     ctx.rotate(Math.sin(animationAngle) * 0.05); // sway angle
 33 | 
 34 |     // draw plant based on growth stage
 35 |     if (growthStage >= 0) {
 36 |         // seed stage
 37 |         drawSeed();
 38 |     }
 39 | 
 40 |     if (growthStage >= 1) {
 41 |         // seedling stage
 42 |         drawStem(1);
 43 |         drawLeaves(1);
 44 |     }
 45 | 
 46 |     if (growthStage >= 2) {
 47 |         // growing stage
 48 |         drawStem(2); // taller stem
 49 |         drawLeaves(2); // more leaves
 50 |     }
 51 | 
 52 |     if (growthStage >= 3) {
 53 |         // mature stage
 54 |         drawStem(3);
 55 |         drawLeaves(3);
 56 |         drawFlower();
 57 |     }
 58 | 
 59 |     ctx.restore();
 60 | 
 61 |     // display needs
 62 |     if (needsWater && needsSun) {
 63 |         document.getElementById('message').innerText = 'I need water and sun!';
 64 |     } else if (needsWater) {
 65 |         document.getElementById('message').innerText = 'I need water!';
 66 |         // draw "I need water" text next to plant
 67 |         ctx.save();
 68 |         ctx.translate(canvas.width / 2 + 50, canvas.height - 100);
 69 |         ctx.fillStyle = '#0000ff';
 70 |         ctx.font = '16px Arial';
 71 |         ctx.fillText('I need water!', 0, 0);
 72 |         ctx.restore();
 73 |     } else if (needsSun) {
 74 |         document.getElementById('message').innerText = 'I need sun!';
 75 |         // draw "I need sun" text next to plant
 76 |         ctx.save();
 77 |         ctx.translate(canvas.width / 2 + 50, canvas.height - 130);
 78 |         ctx.fillStyle = '#FFA500';
 79 |         ctx.font = '16px Arial';
 80 |         ctx.fillText('I need sun!', 0, 0);
 81 |         ctx.restore();
 82 | 
 83 |         // draw cloud over sun
 84 |         if (isDayMode) {
 85 |             drawCloud(30, 50); // adjusted position
 86 |         }
 87 |     } else {
 88 |         document.getElementById('message').innerText = '';
 89 |     }
 90 | }
 91 | 
 92 | function drawSeed() {
 93 |     ctx.fillStyle = '#8B4513'; // brown color for seed
 94 |     ctx.beginPath();
 95 |     ctx.ellipse(0, 0, 10, 10, 0, 0, Math.PI * 2);
 96 |     ctx.fill();
 97 | }
 98 | 
 99 | function drawStem(stage) {
100 |     ctx.strokeStyle = '#228B22'; // forestGreen color
101 |     ctx.lineWidth = 5;
102 | 
103 |     ctx.beginPath();
104 |     ctx.moveTo(0, 0);
105 | 
106 |     if (stage === 1) {
107 |         // short stem
108 |         ctx.bezierCurveTo(0, -20, 10, -40, 0, -60);
109 |     } else if (stage === 2) {
110 |         // medium stem
111 |         ctx.bezierCurveTo(0, -50, 20, -100, 0, -150);
112 |     } else if (stage === 3) {
113 |         // tall stem
114 |         ctx.bezierCurveTo(0, -70, 30, -140, 0, -210);
115 |     }
116 | 
117 |     ctx.stroke();
118 | }
119 | 
120 | function drawLeaves(stage) {
121 |     if (stage >= 1) {
122 |         // left leaf
123 |         drawLeaf(ctx, -15, -60, 1, -Math.PI / 4);
124 |         // right leaf
125 |         drawLeaf(ctx, 15, -80, 1, Math.PI / 4);
126 |     }
127 |     if (stage >= 2) {
128 |         // additional leaves
129 |         drawLeaf(ctx, -20, -110, 0.8, -Math.PI / 3);
130 |         drawLeaf(ctx, 20, -130, 0.8, Math.PI / 3);
131 |     }
132 |     if (stage >= 3) {
133 |         // more leaves
134 |         drawLeaf(ctx, -25, -160, 0.6, -Math.PI / 2.5);
135 |         drawLeaf(ctx, 25, -180, 0.6, Math.PI / 2.5);
136 |     }
137 | }
138 | 
139 | function drawLeaf(ctx, x, y, scale, angle) {
140 |     ctx.save();
141 |     ctx.translate(x, y);
142 |     ctx.rotate(angle);
143 |     ctx.scale(scale, scale);
144 |     ctx.fillStyle = '#32CD32'; // limeGreen color
145 |     ctx.beginPath();
146 |     ctx.moveTo(0, 0);
147 |     ctx.bezierCurveTo(15, -10, 15, -30, 0, -40);
148 |     ctx.bezierCurveTo(-15, -30, -15, -10, 0, 0);
149 |     ctx.fill();
150 |     ctx.restore();
151 | }
152 | 
153 | function drawFlower() {
154 |     ctx.save();
155 |     ctx.translate(0, -210); // move to the top of the stem
156 |     // draw petals
157 |     for (let i = 0; i < 5; i++) {
158 |         ctx.fillStyle = '#FF69B4'; // hot pink
159 |         ctx.beginPath();
160 |         ctx.rotate((Math.PI * 2) / 5);
161 |         ctx.moveTo(0, 0);
162 |         ctx.lineTo(0, -20);
163 |         ctx.arc(0, -30, 10, 0, Math.PI);
164 |         ctx.lineTo(0, -20);
165 |         ctx.fill();
166 |     }
167 |     // draw center of the flower
168 |     ctx.fillStyle = '#FFD700'; // gold
169 |     ctx.beginPath();
170 |     ctx.arc(0, 0, 7, 0, Math.PI * 2);
171 |     ctx.fill();
172 |     ctx.restore();
173 | }
174 | 
175 | function drawDayBackground() {
176 |     // sky blue background
177 |     ctx.fillStyle = '#87CEEB';
178 |     ctx.fillRect(0, 0, canvas.width, canvas.height);
179 | 
180 |     // draw sun
181 |     ctx.fillStyle = '#FFD700';
182 |     ctx.beginPath();
183 |     ctx.arc(50, 50, 30, 0, Math.PI * 2);
184 |     ctx.fill();
185 | 
186 |     // if needs sun, draw cloud over part of sun
187 |     if (needsSun) {
188 |         drawCloud(30, 50);
189 |     }
190 | }
191 | 
192 | function drawCloud(x, y) {
193 |     ctx.fillStyle = '#ffffff';
194 |     ctx.beginPath();
195 |     ctx.arc(x, y, 20, Math.PI * 0.5, Math.PI * 1.5);
196 |     ctx.arc(x + 20, y - 20, 20, Math.PI, Math.PI * 2);
197 |     ctx.arc(x + 40, y - 20, 20, Math.PI, Math.PI * 2);
198 |     ctx.arc(x + 60, y, 20, Math.PI * 1.5, Math.PI * 0.5);
199 |     ctx.moveTo(x + 60, y + 20);
200 |     ctx.lineTo(x, y + 20);
201 |     ctx.fill();
202 | }
203 | 
204 | function drawNightBackground() {
205 |     ctx.fillStyle = '#0a0a2a'; // dark blue
206 |     ctx.fillRect(0, 0, canvas.width, canvas.height);
207 | 
208 |     // draw stars
209 |     for (let i = 0; i < 50; i++) {
210 |         ctx.fillStyle = '#ffffff';
211 |         ctx.beginPath();
212 |         const x = Math.random() * canvas.width;
213 |         const y = Math.random() * canvas.height;
214 |         ctx.arc(x, y, 1, 0, Math.PI * 2);
215 |         ctx.fill();
216 |     }
217 | }
218 | 
219 | function toggleDayNightMode() {
220 |     isDayMode = !isDayMode;
221 | 
222 |     // change the background color of the body
223 |     if (isDayMode) {
224 |         document.body.style.backgroundColor = '#ffffff';
225 |         document.body.style.color = '#000000';
226 |         document.getElementById('plantCanvas').style.backgroundColor = '#87CEEB';
227 |         document.getElementById('plantCanvas').style.borderColor = '#000';
228 |     } else {
229 |         document.body.style.backgroundColor = '#0a0a2a';
230 |         document.body.style.color = '#ffffff';
231 |         document.getElementById('plantCanvas').style.backgroundColor = '#1a1a3d';
232 |         document.getElementById('plantCanvas').style.borderColor = '#fff';
233 |     }
234 | 
235 |     drawPlant();
236 | }
237 | 
238 | function waterPlant() {
239 |     // keep the animation as it with drops
240 |     playWateringAnimation();
241 | 
242 |     needsWater = false;
243 |     drawPlant();
244 | }
245 | 
246 | function giveSun() {
247 |     if (needsSun) {
248 |         needsSun = false;
249 |         // play sun animation
250 |         playSunAnimation();
251 |     } else {
252 |         playSunAnimation();
253 |     }
254 | }
255 | 
256 | function changeGrowthStage() {
257 |     growthStage = (growthStage + 1) % 4; // now 4 stages
258 |     drawPlant();
259 | }
260 | 
261 | function showRandomText() {
262 |     const messages = [
263 |         "Plants make people happy!",
264 |         "Don't forget to water me!",
265 |         "I'm growing strong!",
266 |         "I love sunlight!",
267 |         "Thank you for taking care of me!"
268 |     ];
269 |     const randomMessage = messages[Math.floor(Math.random() * messages.length)];
270 |     // display the message in the textDisplay div
271 |     document.getElementById('textDisplay').innerText = randomMessage;
272 | 
273 |     // hide the text after some time
274 |     clearTimeout(textTimeout);
275 |     textTimeout = setTimeout(() => {
276 |         document.getElementById('textDisplay').innerText = '';
277 |     }, 5000); // hide after 5 seconds
278 | }
279 | 
280 | function playWateringAnimation() {
281 |     let dropletY = -150;
282 |     function animateDroplet() {
283 |         drawPlant();
284 |         ctx.save();
285 |         ctx.translate(canvas.width / 2, dropletY);
286 |         ctx.fillStyle = '#0000ff';
287 |         ctx.beginPath();
288 |         ctx.arc(0, 0, 5, 0, Math.PI * 2);
289 |         ctx.fill();
290 |         ctx.restore();
291 |         dropletY += 5;
292 |         if (dropletY <= canvas.height) {
293 |             requestAnimationFrame(animateDroplet);
294 |         } else {
295 |             drawPlant();
296 |         }
297 |     }
298 |     animateDroplet();
299 | }
300 | 
301 | function playSunAnimation() {
302 |     // show the cloud moving away
303 |     let cloudX = 30;
304 |     function animateSun() {
305 |         drawPlant();
306 |         ctx.save();
307 |         ctx.translate(cloudX, 50);
308 |         ctx.fillStyle = '#ffffff';
309 |         ctx.beginPath();
310 |         ctx.arc(0, 0, 20, Math.PI * 0.5, Math.PI * 1.5);
311 |         ctx.arc(20, -20, 20, Math.PI, Math.PI * 2);
312 |         ctx.arc(40, -20, 20, Math.PI, Math.PI * 2);
313 |         ctx.arc(60, 0, 20, Math.PI * 1.5, Math.PI * 0.5);
314 |         ctx.moveTo(60, 20);
315 |         ctx.lineTo(0, 20);
316 |         ctx.fill();
317 |         ctx.restore();
318 | 
319 |         cloudX += 2;
320 |         if (cloudX < canvas.width) {
321 |             requestAnimationFrame(animateSun);
322 |         } else {
323 |             drawPlant();
324 |         }
325 |     }
326 |     animateSun();
327 | }
328 | 
329 | function showCuteReaction() {
330 |     let heartY = canvas.height / 2;
331 |     function animateHeart() {
332 |         drawPlant();
333 |         ctx.save();
334 |         ctx.translate(canvas.width / 2, heartY);
335 |         ctx.fillStyle = '#ff69b4'; // hot pink color
336 |         ctx.beginPath();
337 |         ctx.moveTo(0, -10);
338 |         ctx.bezierCurveTo(-25, -35, -50, 0, 0, 30);
339 |         ctx.bezierCurveTo(50, 0, 25, -35, 0, -10);
340 |         ctx.fill();
341 |         ctx.restore();
342 |         heartY -= 5;
343 |         if (heartY > 0) {
344 |             requestAnimationFrame(animateHeart);
345 |         } else {
346 |             drawPlant();
347 |         }
348 |     }
349 |     animateHeart();
350 | }
351 | 
352 | function fertilizePlant() {
353 |     // improved fertilize animation without bag moving down
354 |     let particles = [];
355 |     // start sprinkling particles
356 |     for (let i = 0; i < 20; i++) {
357 |         particles.push({
358 |             x: canvas.width / 2 - 10 + Math.random() * 20,
359 |             y: canvas.height / 2,
360 |             vy: 2 + Math.random() * 2
361 |         });
362 |     }
363 |     function animateParticles() {
364 |         drawPlant();
365 | 
366 |         // draw particles
367 |         ctx.fillStyle = '#8B4513'; // brown color for particles
368 |         particles.forEach((p, index) => {
369 |             ctx.beginPath();
370 |             ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
371 |             ctx.fill();
372 |             p.y += p.vy;
373 |             if (p.y > canvas.height) {
374 |                 particles.splice(index, 1);
375 |             }
376 |         });
377 | 
378 |         if (particles.length > 0) {
379 |             requestAnimationFrame(animateParticles);
380 |         } else {
381 |             drawPlant();
382 |         }
383 |     }
384 |     animateParticles();
385 | }
386 | 
387 | function playMusic() {
388 |     // show moving musical notes
389 |     let notes = [];
390 |     for (let i = 0; i < 5; i++) {
391 |         notes.push({
392 |             x: canvas.width / 2 + Math.random() * 100 - 50,
393 |             y: canvas.height - 100,
394 |             vy: -2 - Math.random() * 2
395 |         });
396 |     }
397 |     function animateNotes() {
398 |         drawPlant();
399 |         ctx.save();
400 |         // set music note color based on day/night mode
401 |         if (isDayMode) {
402 |             ctx.fillStyle = '#000000'; // black in day
403 |         } else {
404 |             ctx.fillStyle = '#ffffff'; // white in night
405 |         }
406 |         notes.forEach(note => {
407 |             ctx.font = '20px Arial';
408 |             ctx.fillText('♪', note.x, note.y);
409 |             note.y += note.vy;
410 |         });
411 |         ctx.restore();
412 |         if (notes[0].y > 0) {
413 |             requestAnimationFrame(animateNotes);
414 |         } else {
415 |             drawPlant();
416 |         }
417 |     }
418 |     animateNotes();
419 | }
420 | 
421 | function talkToPlant() {
422 |     let opacity = 1;
423 |     function animateSpeechBubble() {
424 |         drawPlant();
425 |         ctx.save();
426 |         ctx.globalAlpha = opacity;
427 |         ctx.fillStyle = '#ffffff';
428 |         ctx.fillRect(canvas.width / 2 - 60, canvas.height / 2 - 150, 120, 50);
429 |         ctx.fillStyle = '#000000';
430 |         ctx.font = '14px Arial';
431 |         ctx.fillText('Hello, friend!', canvas.width / 2 - 50, canvas.height / 2 - 120);
432 |         ctx.restore();
433 |         opacity -= 0.02;
434 |         if (opacity > 0) {
435 |             requestAnimationFrame(animateSpeechBubble);
436 |         } else {
437 |             drawPlant();
438 |         }
439 |     }
440 |     animateSpeechBubble();
441 | }
442 | 
443 | function showButterfly() {
444 |     // show butterfly animation
445 |     let butterflyX = 0;
446 |     let butterflyY = canvas.height / 2;
447 | 
448 |     function animateButterfly() {
449 |         drawPlant();
450 |         ctx.save();
451 |         ctx.translate(butterflyX, butterflyY);
452 |         ctx.fillStyle = '#ff00ff'; // magenta color for butterfly
453 |         // draw simple butterfly wings
454 |         ctx.beginPath();
455 |         ctx.ellipse(0, 0, 10, 5, 0, 0, Math.PI * 2);
456 |         ctx.fill();
457 |         ctx.beginPath();
458 |         ctx.ellipse(15, 0, 10, 5, 0, 0, Math.PI * 2);
459 |         ctx.fill();
460 |         // draw body
461 |         ctx.fillStyle = '#000000';
462 |         ctx.fillRect(5, -5, 5, 10);
463 |         ctx.restore();
464 | 
465 |         butterflyX += 5;
466 |         butterflyY += Math.sin(butterflyX / 20) * 5;
467 | 
468 |         if (butterflyX < canvas.width) {
469 |             requestAnimationFrame(animateButterfly);
470 |         } else {
471 |             drawPlant();
472 |         }
473 |     }
474 |     animateButterfly();
475 | }
476 | 
477 | function sleepingPlant() {
478 |     // show animated Z's next to the plant
479 |     let zY = canvas.height - 150;
480 |     function animateZ() {
481 |         drawPlant();
482 |         ctx.save();
483 |         ctx.fillStyle = '#0000ff';
484 |         ctx.font = '30px Arial';
485 |         ctx.fillText('Z', canvas.width / 2 + 20, zY);
486 |         ctx.restore();
487 |         zY -= 2;
488 |         if (zY > 0) {
489 |             requestAnimationFrame(animateZ);
490 |         } else {
491 |             drawPlant();
492 |         }
493 |     }
494 |     animateZ();
495 | }
496 | 
497 | function showNeedWater() {
498 |     needsWater = true;
499 |     drawPlant();
500 | }
501 | 
502 | function showNeedSun() {
503 |     needsSun = true;
504 |     drawPlant();
505 | }
506 | 
507 | function resetToIdeal() {
508 |     // clear any messages or flags
509 |     document.getElementById('message').innerText = '';
510 |     document.getElementById('textDisplay').innerText = '';
511 |     needsWater = false;
512 |     needsSun = false;
513 |     drawPlant();
514 | }
515 | 
516 | function animate() {
517 |     animationAngle += 0.02; // increase the angle
518 |     drawPlant();
519 |     requestAnimationFrame(animate);
520 | }
521 | 
522 | // event listeners for buttons
523 | document.getElementById('dayNightMode').addEventListener('click', toggleDayNightMode);
524 | document.getElementById('growthStage').addEventListener('click', changeGrowthStage);
525 | document.getElementById('waterPlant').addEventListener('click', waterPlant);
526 | document.getElementById('giveSun').addEventListener('click', giveSun);
527 | document.getElementById('fertilizePlant').addEventListener('click', fertilizePlant);
528 | document.getElementById('playMusic').addEventListener('click', playMusic);
529 | document.getElementById('talkPlant').addEventListener('click', talkToPlant);
530 | document.getElementById('showText').addEventListener('click', showRandomText);
531 | document.getElementById('cuteButton').addEventListener('click', showCuteReaction);
532 | document.getElementById('showButterfly').addEventListener('click', showButterfly);
533 | document.getElementById('sleeping').addEventListener('click', sleepingPlant);
534 | document.getElementById('showNeedWater').addEventListener('click', showNeedWater);
535 | document.getElementById('showNeedSun').addEventListener('click', showNeedSun);
536 | document.getElementById('idealButton').addEventListener('click', resetToIdeal);
537 | 
538 | // initial draw and start animation
539 | animate();
540 | 


--------------------------------------------------------------------------------