diff --git a/assets/cats.jpg b/assets/cats.jpg
new file mode 100644
index 0000000..3ace187
Binary files /dev/null and b/assets/cats.jpg differ
diff --git a/assets/hiss.wav b/assets/hiss.wav
new file mode 100644
index 0000000..6092346
Binary files /dev/null and b/assets/hiss.wav differ
diff --git a/assets/meow.mp3 b/assets/meow.mp3
new file mode 100644
index 0000000..f082966
Binary files /dev/null and b/assets/meow.mp3 differ
diff --git a/assets/purr.mp3 b/assets/purr.mp3
new file mode 100644
index 0000000..31eeea6
Binary files /dev/null and b/assets/purr.mp3 differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d01f146
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wallpaper by Vecteezy
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sketch.js b/sketch.js
new file mode 100644
index 0000000..82c3dd7
--- /dev/null
+++ b/sketch.js
@@ -0,0 +1,82 @@
+let video;
+let poseNet;
+let pose;
+
+function meow(){
+ const meow = document.getElementById('meow');
+ meow.play();
+}
+
+function purr(){
+ const purr = document.getElementById('purr');
+ purr.play();
+}
+
+function hiss(){
+ const hiss = document.getElementById('hiss');
+ hiss.play();
+}
+
+
+function setup() {
+ createCanvas(640, 480);
+ video = createCapture(VIDEO);
+ video.hide();
+ poseNet = ml5.poseNet(video, modelLoaded);
+ poseNet.on('pose', gotPoses);
+
+}
+
+function gotPoses(poses) {
+ if (poses.length > 0) {
+ pose = poses[0].pose;
+ }
+}
+
+
+function modelLoaded() {
+ console.log('poseNet ready');
+}
+
+function draw() {
+ image(video, 0, 0);
+ if (pose) {
+ let eyeR = pose.rightEye;
+ let eyeL = pose.leftEye;
+ let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);
+
+ //Outer Eye
+ fill(0);
+ ellipse(eyeR.x,eyeR.y,d/1.5, (d/2.5));
+ ellipse(eyeL.x,eyeR.y,d/1.5, d/2.5);
+
+ // Inner Eye
+ fill('#00ff80');
+ ellipse(eyeR.x - 1,eyeR.y, d/10, d/4);
+ ellipse(eyeL.x - 1,eyeR.y, d/10, d/4);
+
+ // Nose
+ fill(0);
+ triangle(pose.nose.x - (d/3), pose.nose.y - (d/10), pose.nose.x + (d/3), pose.nose.y -(d/10), pose.nose.x, pose.nose.y + (d/3));
+
+ //Outer Ear
+ triangle(pose.nose.x + d, pose.nose.y - (d*1.2), pose.nose.x + (d/1.2), pose.nose.y -(d*2), pose.nose.x + (d/5), pose.nose.y - (d*1.5));
+ triangle(pose.nose.x - d, pose.nose.y - (d*1.2), pose.nose.x - (d/1.2), pose.nose.y -(d*2), pose.nose.x - (d/5), pose.nose.y - (d*1.5));
+
+ // Inner Ear
+ fill('#FA8072');
+ triangle(pose.nose.x + (d*.9), pose.nose.y - (d*1.3), pose.nose.x + (d/1.3), pose.nose.y - (d*1.8), pose.nose.x + (d/3.33), pose.nose.y - (d*1.5));
+ triangle(pose.nose.x - (d*.9), pose.nose.y - (d*1.3), pose.nose.x - (d/1.3), pose.nose.y - (d*1.8), pose.nose.x - (d/3.33), pose.nose.y - (d*1.5));
+
+ // Whiskers
+ line(pose.nose.x + (d/2.5), pose.nose.y - (d/20), pose.nose.x + (d), pose.nose.y - (d/4));
+ line(pose.nose.x + (d/2.5), pose.nose.y + (d/20), pose.nose.x + d, pose.nose.y + (d/4));
+ line(pose.nose.x + (d/2.5), pose.nose.y, pose.nose.x + d, pose.nose.y);
+
+ line(pose.nose.x - (d/2.5), pose.nose.y - (d/20), pose.nose.x - d, pose.nose.y - (d/4));
+ line(pose.nose.x - (d/2.5), pose.nose.y + (d/20), pose.nose.x - d, pose.nose.y + (d/4));
+ line(pose.nose.x - (d/2.5), pose.nose.y, pose.nose.x - d, pose.nose.y);
+
+ }
+}
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..0dddfe1
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,54 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Lato', sans-serif;
+}
+
+body{
+ background: url("assets/cats.jpg") no-repeat fixed 0 0 / cover;
+}
+canvas {
+ display: block;
+}
+
+canvas {
+margin-top: 50px;
+margin-left: auto;
+margin-right: auto;
+
+}
+
+canvas {
+ padding: 10px 10px 10px 10px;
+ background: white;
+ border: 1px solid #fff;
+ box-shadow: 0px 2px 15px #333;
+ -webkit-box-shadow: 0px 2px 15px #333;
+ -moz-box-shadow: 0px 2px 15px #333;
+ -webkit-transform: rotate(-5deg);
+ -moz-transform: rotate(-5deg);
+ font-family: 'Permanent Marker', cursive;
+ color: black;
+ font-size: 32px;
+ margin: 50px auto 50px auto;
+
+}
+
+#button-group {
+ position: absolute;
+ bottom: 30px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+a {
+ color: black !important;
+ font-size: 12px;
+}
+
+@media screen and (max-width: 640px) {
+ canvas {
+ width: 100% !important;
+ height: auto !important;
+ }
+}