first commit

dmarcisovska · May 26, 2020 · f49600d · f49600d
commit f49600d
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 0 deletions.
diff --git a/assets/cats.jpg b/assets/cats.jpg
diff --git a/assets/hiss.wav b/assets/hiss.wav
diff --git a/assets/meow.mp3 b/assets/meow.mp3
diff --git a/assets/purr.mp3 b/assets/purr.mp3
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <meta charset="utf-8" />
+
+</head>
+<body>
+<script src="sketch.js"></script>
+<a href="https://www.vecteezy.com/free-vector/seamless-pattern"> Wallpaper by Vecteezy</a>
+<div class="container" id="button-group">
+    <button type="button" class="btn btn-info btn-lg mr-3" onclick="meow()">Meow</button>
+    <button type="button" class="btn btn-info btn-lg mr-3" onclick="purr()">Purr</button>
+    <button type="button" class="btn btn-info btn-lg" onclick="hiss()">Hiss</button>
+</div>
+
+<audio src="assets/meow.mp3" id="meow">
+    <p class="text-center">If you are reading this, it is because your browser does not support the audio element. </p>
+</audio>
+
+<audio src="assets/purr.mp3" id="purr">
+    <p class="text-center">If you are reading this, it is because your browser does not support the audio element. </p>
+</audio>
+
+<audio src="assets/hiss.wav" id="hiss">
+    <p class="text-center">If you are reading this, it is because your browser does not support the audio element. </p>
+</audio>
+
+</body>
+</html>
diff --git a/sketch.js 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
@@ -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;
+    }
+}