Commit 459531f3 authored by svilayphiou's avatar svilayphiou

Merge branch 'master' of gitlab.com:siusoon/Aesthetic_Programming_Book

parents 836df0f3 e3b957fb
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
</body>
</html>
/*Data Capture for Chapter 4
//Interacting with captured data: Mouse, Keyboard, Audio, Web Camera
check:
1. sound input via microphone: https://p5js.org/examples/sound-mic-input.html
2. dom objects like button
3. p5.sound library: https://github.com/processing/p5.js-sound/blob/master/lib/p5.sound.js
4. Face tracking library: https://github.com/auduno/clmtrackr
5. p5js + clmtracker.js: https://gist.github.com/lmccart/2273a047874939ad8ad1
*/
let button;
let mic;
let ctracker;
function setup() {
background(100);
// Audio capture
mic = new p5.AudioIn();
mic.start();
//web cam capture
let capture = createCapture();
capture.size(640,480);
capture.position(0,0);
//capture.hide();
let c = createCanvas(640, 480);
c.position(0,0);
//setup face tracker
ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(capture.elt);
//styling the like button with CSS
button = createButton('like');
button.style("display","inline-block");
button.style("color","#fff");
button.style("padding","5px 8px");
button.style("text-decoration","none");
button.style("font-size","0.9em");
button.style("font-weight","normal");
button.style("border-radius","3px");
button.style("border","none");
button.style("text-shadow","0 -1px 0 rgba(0,0,0,.2)");
button.style("background","#4c69ba");
button.style("background","-moz-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");
button.style("background","-webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b55a0))");
button.style("background","-webkit-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");
button.style("background","-o-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");
button.style("background","-ms-linear-gradient(top, #4c69ba 0%, #3b55a0 100%)");
button.style("background","linear-gradient(to bottom, #4c69ba 0%, #3b55a0 100%)");
button.style("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: https://p5js.org/reference/#/p5/map
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: https://www.auduno.com/clmtrackr/docs/reference.html)
noStroke();
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() {
clear();
}
//keyboard capture
function keyPressed() {
if (keyCode === 32) { //spacebar - check here: http://keycode.info/
button.style("transform", "rotate(180deg)");
} else { //for other keycode
button.style("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: https://p5js.org/reference/#/p5/push)</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:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) : 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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice): 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
**Objective:**
......@@ -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.
......@@ -380,11 +380,11 @@ There are clear power dynamics at work in computing, at a fundamental level even
Whether [...] gathering information, telecommunicating, running washing machines, doing sums, or making videos, all digital computers translate information into zeros and ones of machine code. These binary digits are known as bits and strung together in bytes of eight'. The zeros and ones of machine code seems to offer themselves as perfect symbols of the orders of Western reality, the ancient logical codes which make the difference between on and off, right and left, light and dark, form and matter, mine and body, white and black, good and evil, right and wrong, life and death, something and nothing, this and that, here and there, inside and out, active and passive, true and false, yes and no, sanity and madness, health and sickness, up and down, sense and nonsense, west and east, north and south. And they made a lovely couple when it came to sex. Man and woman, male and female, masculine and feminine: one and zero looked just right, made for each other: 1, the definite, upright line; the 0, the diagram of nothing at all: penis and vagina, thing and hole... hand in glove. A perfect match.<sup>[9](#myfootnote9)</sup>
</blockquote>
Although it takes two to make a binary (and set up the heterosexist paradigm), clearly inequalities of power are expressed in the tendency to privilege one side of the equation over the other (master and slave, human and machine, and so on). As discussed in the previous chapter (referring to automatism), and to be further discussed in the final chapter of this book (in terms of machine learning), the Turing Test resonates with these power dynamics. Plant quotes Alan Turing in saying: "the intention in constructing these machines in the first instance is to treat them as slaves, giving them only jobs which have been thought out in detail, jobs such that the user of the machine fully understands in principle what is going on all the time." <sup>[10](#myfootnote10)</sup> Plant's further example is the sci-fi film *Bladerunner* (1984) as an advanced Turing Test where the only indication of artificiality is a tiny flicker in the eye's iris with response to close questioning. In this story too, the worker-slaves have begun to question their conditions. Through such examples it becomes clear that the ability to imagine conditions differently is embedded in the system itself, in the potential failures to carry out instructions as commanded.
Although it takes two to make a binary (and set up the heterosexist paradigm), clearly inequalities of power are expressed in the tendency to privilege one side of pairing (master and slave, human and machine, and so on). As discussed in the previous chapter (referring to automatism), and to be further discussed in the final chapter of this book (in terms of machine learning), the Turing Test resonates with these power dynamics. Plant quotes Alan Turing in saying: "the intention in constructing these machines in the first instance is to treat them as slaves, giving them only jobs which have been thought out in detail, jobs such that the user of the machine fully understands in principle what is going on all the time."<sup>[10](#myfootnote10)</sup> Plant's further example is the sci-fi film *Bladerunner* (1984) as an advanced Turing Test where the only indication of artificiality is a tiny flicker in the eye's iris with response to close questioning. In this story too, the worker-slaves have begun to question their conditions. Through such examples it becomes clear that the ability to imagine conditions differently is embedded in the system itself, in the potential failures to carry out prescipted instructions or commands.
The biography of Turing as a gay man at a time when homosexuality was still a criminal offense in the UK adds weight to these claims.<sup>[11](#myfootnote11)</sup> Humans do not necessarily follow or agree with the rules as they are prescribed by society, and although Turing's sexuality was tolerated in the context of the war effort, under 'normal' (peaceful) conditions it was perceived to be a problem. Plant cites Michel Foucault (as she puts it, himself also a "renegade from the heterosexist reproductive process"), to describe this kind of system of control as "bio-power", not deplotyed through a centralized command structure but dispersed, multiple, and automatic, operating like a networked machine.<sup>[12](#myfootnote12)</sup>
The biography of Turing as a gay man at a time when homosexuality was still a criminal offense in the UK adds weight to these claims.<sup>[11](#myfootnote11)</sup> Humans do not necessarily follow or agree with rules as prescribed by society, and although Turing's sexuality was tolerated in the context of the war effort, under 'normal' (peaceful) conditions it was perceived to be a problem. Plant cites Michel Foucault (as she puts it, also a "renegade from the heterosexist reproductive process"), to describe this kind of system of control as "bio-power", not deplotyed through a centralized command structure but dispersed, multiple, and automatic, operating like a networked machine.<sup>[12](#myfootnote12)</sup>
Turing uncracked codes at Bletchley Park that others couldn't understand but also paradoxically was taken to be a cracked code himself, eventually found guilt of "gross indecency" in 1952. Here, as Plant describes, the historical facts collapse into bizarre allegory. First of all, he was proscribed oestrogen to reduce his sexual urge, under the dubious logic that to all intensive purposes he was female - this was a reversal of earlier judgements to give gay men testosterone to make them more male, yet ironically making them sex machines.<sup>[13](#myfootnote13)</sup> Plant concludes the Turing story: "Two years later he was dead [...] 'By the side of the table was an apple, out of which several bites had been taken.' And this queer tale does not end here. There are rainbow logos with Turing's missing bytes on every Apple Macintosh machine."<sup>[14](#myfootnote14)</sup>
Turing uncracked codes at Bletchley Park that others couldn't understand but also paradoxically was taken to be a "cracked code" himself, eventually found guilt of gross indecency in 1952. Here, as Plant describes, the historical facts collapse into bizarre allegory. First of all, he was proscribed oestrogen to reduce his sexual urge, under the dubious logic that to all intensive purposes he was female - this was a reversal of earlier judgements to give gay men testosterone to make them more male, yet ironically making them sex machines.<sup>[13](#myfootnote13)</sup> Plant concludes the Turing story: "Two years later he was dead [...] 'By the side of the table was an apple, out of which several bites had been taken.' And this queer tale does not end here. There are rainbow logos with Turing's missing bytes on every Apple Macintosh machine."<sup>[14](#myfootnote14)</sup>
To conclude this chapter, through exploring the making of *Vocable Code* with its strange syntax - such as notFalse and notTrue - and its many repetitive decimals, we would like to emphasise the central point: Queer is... making binaries strange.
......
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