Skip to content

Instantly share code, notes, and snippets.

@madbunnykim

madbunnykim/index.html

Created September 24, 2018 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save madbunnykim/9e5ea47c989f32215d9bcffe640ede77 to your computer and use it in GitHub Desktop.
Save madbunnykim/9e5ea47c989f32215d9bcffe640ede77 to your computer and use it in GitHub Desktop.
Download ZIP
Swipe with your voice
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
<script src="p5.speech.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<h1><p align="center">~Swipe with your voice~</p></h1>
</head>
<div><p align="center">
click
<button id="my-button">I'm ready</button>
to describe your *type* in keywords until you find *the one*</p>
</div>
<body>
<script src="sketch.js"></script>
</body>
</html>
Raw
sketch.js
let dude = [];
let keywords = ['dog', 'six pack', 'nice eyes', 'fish','scooter','clothes on','gym selfie','better six pack','coffee','cook','outdoor','hipster'];
let amp;
let myRec = new p5.SpeechRec();
myRec.continuous = true;
function preload() {
dude[00] = loadImage('assets/dude01.jpg');
dude[01] = loadImage('assets/dude02.jpg');
dude[02] = loadImage('assets/dude03.jpg');
dude[03] = loadImage('assets/dude04.jpg');
dude[04] = loadImage('assets/dude05.jpg');
dude[05] = loadImage('assets/dude06.jpg');
dude[06] = loadImage('assets/dude07.jpg');
dude[07] = loadImage('assets/dude08.jpg');
dude[08] = loadImage('assets/dude09.jpg');
dude[09] = loadImage('assets/dude10.jpg');
dude[10] = loadImage('assets/dude11.jpg');
dude[11] = loadImage('assets/dude12.jpg');
}
function setup() {
createCanvas(windowWidth, windowHeight);
amp = new p5.Amplitude();
myRec.onResult = showResult;
// myRec.start();
}
function showResult()
{
if(myRec.resultValue==true) {
for(let i=0; i<keywords.length; i++) {
if(myRec.resultString == keywords[i]) {
imageMode(CENTER);
image(dude[i],windowWidth/2, windowHeight*(1/3),400,530);
}
}
}
console.log(myRec.resultString);
}
document.querySelector('#my-button').onclick = () => {
console.log('clickity');
myRec.start();
};
Raw
style.css
html, body {
margin: 0;
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment