Commit 459531f3 authored by svilayphiou's avatar svilayphiou
Browse files

Merge branch 'master' of

parents 836df0f3 e3b957fb
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<style> body {padding: 0; margin: 0;background-color:white;} </style>
<script src="../libraries/p5.js"></script>
<script src="../libraries/p5.dom.js"></script>
<script src="../libraries/p5.sound.js"></script>
<script src="../libraries/clmtrackr/clmtrackr.js"></script>
<script src="../libraries/clmtrackr/models/model_pca_20_svm.js"></script>
<script src="sketch.js"></script>
<style> body {padding: 0; margin: 0;} </style>
/*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)");
This diff is collapsed.
This diff is collapsed.
......@@ -142,6 +142,7 @@ function drawElements() {
The last three lines are about the drawing of two static yellow lines on the left and right side of the canvas. Logically speaking, the translate and rotate functions should also apply to these two lines but because the `pop()` function is in placed right after all the drawing of ellipses and such transform features, therefore, would not impact the lines. But if you move the line `pop()` till the end, then the two lines will also rotate and translate. This is to illustrate the idea of how `push()` and `pop()` could be used and where to place them does matter <span class="ref">(ref:</span>.
<div class="exercise" markdown="true">
### 3.5 Exercise in class
- This exercise is about structuring code. How would you restructure the sample code again so that it is easier for others to understand but maintaining the same visual outcome? There is no right or wrong answers but some pointers below might facilitate discussion:
......@@ -307,6 +308,10 @@ As the array index is started with [0], therefore each index is mapped the value
`let yPos = [1,2,3,4];` ->
`yPos.length: ypos[0] = 1, yPos[1] = 2, yPos[2] = 3, yPos[3] = 4`
Other methods of an array would be useful:
- `array.push(value)` (ref: : To add a value the end of the array. Example: `xPos.push(6)` - this will extend the index to xPos[5] = 6.
- `array.splice()` (ref: This is to remove a range of an array index, or remove existing index and replace with new indexes with other value.
### 3.10 Conditional Statements
Conditional statements is very useful because it allows you to set different path of the decision by specifying conditions. Indeed, conditional decision is something not only specific to programming:
......@@ -429,6 +434,7 @@ Temporalities: real-time, machine time, micro-time and just-in-time (live) codin
-> link to the politics of time
<div class="exercise" markdown="true">
## Mini_Exercise[3]: Designing a throbber
......@@ -469,7 +475,7 @@ Check out other works regarding a throbber and how other people contextualize th
- Farman, Jason. "Fidget Spinners", *Real Life*, 2017.
## Notes:
reference and footnotes here...
This diff is collapsed.
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