Commit 7feee685 authored by soon's avatar soon
Browse files

Upload New File

parent 78f95fe7
/*Data Capture for Chapter 4
//Interacting with captured data: Mouse, Keyboard, Audio, Web Camera
1. sound input via microphone:
2. dom objects like button
3. p5.sound library:
4. Face tracking library:
5. p5js + clmtracker.js:
let button;
let mic;
let ctracker;
function setup() {
// Audio capture
mic = new p5.AudioIn();
//web cam capture
let capture = createCapture();
let c = createCanvas(640, 480);
//setup face tracker
ctracker = new clm.tracker();
//styling the like button with CSS
button = createButton('like');"display","inline-block");"color","#fff");"padding","5px 8px");"text-decoration","none");"font-size","0.9em");"font-weight","normal");"border-radius","3px");"border","none");"text-shadow","0 -1px 0 rgba(0,0,0,.2)");"background","#4c69ba");"background","-moz-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");"background","-webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b55a0))");"background","-webkit-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");"background","-o-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");"background","-ms-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");"background","linear-gradient(to bottom, #4c69ba 0%, #3b55a0 100%)");"filter","progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c69ba', endColorstr='#3b55a0', GradientType=0 )");
//mouse capture
button.mousePressed(clearence); //click the button to clear the screen
function draw() {
//getting the audio data
let vol = mic.getLevel(); // Get the overall volume (between 0 and 1.0)
button.size(floor(map(vol, 0, 1, 40, 500))); //map the mic vol to the size of button: check map function:
let positions = ctracker.getCurrentPosition();
if (positions.length) { //check the availability of web cam tracking
button.position(positions[60][0]-20, positions[60][1]); //as the button is too long, i wanna put it in the middle of my mouth, and -> 60 is the mouth area
for (let i=0; i<positions.length; i++) { //loop through all major face track points (see:
fill(map(positions[i][0], 0, width, 100, 255), 0,0,10); //color with alpha value
//draw ellipse at each position point
ellipse(positions[i][0], positions[i][1], 5, 5);
function clearence() {
//keyboard capture
function keyPressed() {
if (keyCode === 32) { //spacebar - check here:"transform", "rotate(180deg)");
} else { //for other keycode"transform", "rotate(0deg)");
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment