diff --git a/_notebooks/2023-09-22-dogsprite.ipynb b/_notebooks/2023-09-22-dogsprite.ipynb
new file mode 100644
index 0000000..dfeecfe
--- /dev/null
+++ b/_notebooks/2023-09-22-dogsprite.ipynb
@@ -0,0 +1,164 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "---\n",
+    "toc: true\n",
+    "comments: true\n",
+    "layout: post\n",
+    "title: Dog Sprite Example\n",
+    "description: Lil Dog\n",
+    "courses: { compsci: {week: 5} }\n",
+    "type: hacks\n",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "\n",
+    "\n",
+    "<body>\n",
+    "    <div>\n",
+    "        <canvas id=\"spriteContainer\"> <!-- Within the base div is a canvas. An HTML canvas is used only for graphics. It allows the user to access some basic functions related to the image created on the canvas (including animation) -->\n",
+    "            <img id=\"dogSprite\" src=\"{{site.baseurl}}/images/dogSprite.png\">  \n",
+    "        </canvas>\n",
+    "        <div id=\"controls\"> <!--basic radio buttons which can be used to check whether each individual animaiton works -->\n",
+    "            <input type=\"radio\" name=\"animation\" id=\"idle\" checked>\n",
+    "            <label for=\"idle\">Idle</label><br>\n",
+    "            <input type=\"radio\" name=\"animation\" id=\"barking\">\n",
+    "            <label for=\"barking\">Barking</label><br>\n",
+    "            <input type=\"radio\" name=\"animation\" id=\"walking\">\n",
+    "            <label for=\"walking\">Walking</label><br>\n",
+    "        </div>\n",
+    "    </div>\n",
+    "</body>\n",
+    "\n",
+    "<script>\n",
+    "    // start on page load\n",
+    "    window.addEventListener('load', function () {\n",
+    "        const canvas = document.getElementById('spriteContainer');\n",
+    "        const ctx = canvas.getContext('2d');\n",
+    "        const SPRITE_WIDTH = 160;  // matches sprite pixel width\n",
+    "        const SPRITE_HEIGHT = 144; // matches sprite pixel height\n",
+    "        const SCALE_FACTOR = 2;  // control size of sprite on canvas\n",
+    "        const FRAME_LIMIT = 48;  // number of frames per row, this code assume each row is same\n",
+    "        // const FRAME_RATE = 15;  // not used\n",
+    "\n",
+    "        canvas.width = SPRITE_WIDTH * SCALE_FACTOR;\n",
+    "        canvas.height = SPRITE_HEIGHT * SCALE_FACTOR;\n",
+    "\n",
+    "        class Dog {\n",
+    "            constructor() {\n",
+    "                this.image = document.getElementById(\"dogSprite\");\n",
+    "                this.spriteWidth = SPRITE_WIDTH;\n",
+    "                this.spriteHeight = SPRITE_HEIGHT;\n",
+    "                this.width = this.spriteWidth;\n",
+    "                this.height = this.spriteHeight;\n",
+    "                this.x = 0;\n",
+    "                this.y = 0;\n",
+    "                this.scale = SCALE_FACTOR;\n",
+    "                this.minFrame = 0;\n",
+    "                this.maxFrame = FRAME_LIMIT;\n",
+    "                this.frameX = 0;\n",
+    "                this.frameY = 0;\n",
+    "            }\n",
+    "\n",
+    "            // draw dog object\n",
+    "            draw(context) {\n",
+    "                context.drawImage(\n",
+    "                    this.image,\n",
+    "                    this.frameX * this.spriteWidth,\n",
+    "                    this.frameY * this.spriteHeight,\n",
+    "                    this.spriteWidth,\n",
+    "                    this.spriteHeight,\n",
+    "                    this.x,\n",
+    "                    this.y,\n",
+    "                    this.width * this.scale,\n",
+    "                    this.height * this.scale\n",
+    "                );\n",
+    "            }\n",
+    "\n",
+    "            // update frameX of object\n",
+    "            update() {\n",
+    "                if (this.frameX < this.maxFrame) {\n",
+    "                    this.frameX++;\n",
+    "                } else {\n",
+    "                    this.frameX = 0;\n",
+    "                }\n",
+    "            }\n",
+    "        }\n",
+    "\n",
+    "        // dog object\n",
+    "        const dog = new Dog();\n",
+    "\n",
+    "        // update frameY of dog object, action from idle, bark, walk radio control\n",
+    "        const controls = document.getElementById('controls');\n",
+    "        controls.addEventListener('click', function (event) {\n",
+    "            if (event.target.tagName === 'INPUT') {\n",
+    "                const selectedAnimation = event.target.id;\n",
+    "                switch (selectedAnimation) {\n",
+    "                    case 'idle':\n",
+    "                        dog.frameY = 0;\n",
+    "                        break;\n",
+    "                    case 'barking':\n",
+    "                        dog.frameY = 1;\n",
+    "                        break;\n",
+    "                    case 'walking':\n",
+    "                        dog.frameY = 2;\n",
+    "                        break;\n",
+    "                    default:\n",
+    "                        break;\n",
+    "                }\n",
+    "            }\n",
+    "        });\n",
+    "\n",
+    "        // Animation recursive control function\n",
+    "        function animate() {\n",
+    "            // Clears the canvas to remove the previous frame.\n",
+    "            ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
+    "\n",
+    "            // Draws the current frame of the sprite.\n",
+    "            dog.draw(ctx);\n",
+    "\n",
+    "            // Updates the `frameX` property to prepare for the next frame in the sprite sheet.\n",
+    "            dog.update();\n",
+    "\n",
+    "            // Uses `requestAnimationFrame` to synchronize the animation loop with the display's refresh rate,\n",
+    "            // ensuring smooth visuals.\n",
+    "            requestAnimationFrame(animate);\n",
+    "        }\n",
+    "\n",
+    "        // run 1st animate\n",
+    "        animate();\n",
+    "    });\n",
+    "</script>"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.4"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/images/dogSprite.png b/images/dogSprite.png
new file mode 100644
index 0000000..3cdcfa1
Binary files /dev/null and b/images/dogSprite.png differ
