Commit 2c071964 authored by soon's avatar soon


parent 800c9356
......@@ -4,12 +4,142 @@ page_order: 4
## 4. Data Capture
## 4.1 function setup()
This chapter focuses on how a program can capture and process input data. In some programming books, this would fall into the topic of interactivity, such as interacting with physical devices like a mouse and a keyboard. In the earlier chapters we have already introduced the functions `mouseX` and `mouseY` (see Chapter 2 - Variable Geometry), as well as the concept of listening events via the functions `mouseIsPressed()` and `windowResized()`(see Chapter 3 - Infinite Loops). This chapter is more an extension of those and present with more different types of data capture, including mouse movement, keyboard press, audio volume and facial recognization with a web camera. Framing under the topic of Data Capture instead of Interactivity is to shift away our attention from immediate interactions to think about what kinds of possible data can be captured, and how data is being computed and processed so as to start unfolding the complexity of 'capture', such as what do these captures do to us and what these mean in digital culture especially the phenomena of datafication.
The chapter begins with a familiar button that we can picture it in our head, something like switching on/off a light, a kettle and many other electronic devices. A button is "seductive" (ref: pold p. 34), indicating a potentiality of interaction and generating a desire to press it, and usually it comes with an immediate feedback. Similarly in software and platforms like Facebook, a button indicates a call for actions, inviting a user to click and and interact with it in a binary state: on or off, like or (not)like, accept or cancel. Further with the capability to customize wordings on a button, Pold suggests that a button is developed with distinct functionality and signification (ref: pold p. 31). The following section will introduce the sample code of this chapter that is centered around the button of likes to demonstrating the potential of interactions, customizations and manipulations. Then it will further discuss different modes of capture in contemporary culture.
## 4.1.1 Start()
![datacapture]( [need to update the image and runme /w]
Starting with this sample code of Data Capture, the sketch incorporates four data inputs around the customized-like button:
1. The button is clickable through a mouse in which to clearing the screen.
2. The button will rotate 180 degree when you click on the spacebar of your keyboard.
3. The button will change its size according to the volume of the audio/mic input.
4. The button will move according to the facial recognization technology, following the mouth of your face.
The button is customized with Cascading Style Sheets (aka CSS), describing the style and visual elements of an object in a format consists of a selector and a declaration block. This simply means *which* element you want to customize and *how* to do it precisely. CSS works with HTML elements and we use the library p5.dom (which is included in the html file by default when you download the whole completed p5.js library) to create most form elements, including button.
## 4.1.2 Exercise in class
By looking at the like button closely in the RUNME, can you come up with a list of possible customization that have been introduced in the sample code?
Then look at the source code in the next section (line 67-83) and can you describe some of the button's styling in natural language?
## 4.2 Source Code
/*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() {
//sound capture
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)");
## 4.3 p5.dom: Creating and Styling a button
The basic structure for creating form elements is relatively simple. Under the p5.js reference guide under the DOM category (ref:, there are different form creation syntaxes e.g `createCheckbox()`, `createSlider()`, `createRadio()`, `createSelect()`, `createFileInput()`, etc. The one that we need for creating a button is called `createButton()`.
First you need to give an object name for a button, and of course a different name if you have more than one so that you can set the properties for each individual one.
- `let button;`: declare the dom object name
- `button = createButton('like');`: create a button and consider the text display of the button
- `"xxx","xxxx");` : This is the CSS standard, where the first argument is a selection and the second is a declaration block. For example if you want to set the font color, then you can put in "color" and "#fff" for the arguments. (ref/footnote: This can be easily checked out the possible styling of a button, and here is some examples: For this specific sample code, all the styling are copied from Facebook interface directly by looking into their CSS source code.
## The Concept of Capture
## 4.1.2 Source Code
## mouse
## keyboard
## audio
## face
## 4.2.1 Exercise in class
Markdown is supported
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