WHAT CAN WE MODEL WITH CODE?
//WHAT CAN WE MODEL WITH CODE?
// Cecile Chevalier, 2021
// http://ifte.network/
//More specifically what can you model with creative coding?
//Systems of differences.
//P5.js is a systems of differences as it is designed as an accessible tool/art for many and in being open source relies on its strong community of collaborators, whilst offering support on how to become part the community (e.g workshop, meet-up, code-base).
//What is Creative Coding & P5.js
//Creative coding is a computational expression created with code, it is an art-form, while P5.js is a JavaScript library for creative coding, designed by Lauren Lee McCarthy (and currently led by Qianqian Ye and Evelyn Masso, https://p5js.org/).
//Creative coding brings the humanities in science as code models get inhabited with [histories]: as the code become a place of historical artefacts (archive materials, encoded micro collection, etc.); [the personal] which is also the collective and a point of recognition of our similarities in our differences, that becomes new configurations that challenges existing coding and language models; and [public] (e.g git-hub, p5.js, the IFTE Chain) and as the act become public and a full blown [unnamed expression]. Yet I recognise it. Creating coding as an art form become a place for real imaginaries of systems of differences.
let mic, audreLorde;
var fft;
var smoothing = 0.5; // play with this, between 0 and .99
var binCount = 1024; // size of resulting FFT array. Must be a power of 2 between 16 an 1024
var heritages = new Array(binCount);
var state = 0;
//preload is for loading media files
function preload() {
//Voices | Audre Lorde ‘There is No Hierarchy of Oppressions’ read by Lauren Lyons.
img1= loadImage(‘AudreLordeYourSilenceWillNotProtectYou_2017.webp’);
img2= loadImage(‘AudreLordeSisterOutsider_1984.jpg’);
img3= loadImage(‘AudreLorde_1992.jpg’);
img4= loadImage(‘MooreRichLordeLarkinASignIWasNotAlone_1977.jpg’);
}
function setup() {
createCanvas(windowWidth, windowHeight,WEBGL);
noStroke();
audreLorde = createAudio(‘ThereIsNoHierarchyOfOppressions.mp3’);
mic = new p5.AudioIn();
mic.start();
audreLorde.play();
/// audio delay.process() accepts 4 parameters:
/// source, delayTime (in seconds), feedback (0.5 max), filter frequency (2300)
delay = new p5.Delay();
delay.process(audreLorde, 0.15 , 0.5);
// initialize the FFT, plug in our variables for smoothing and binCount
fft = new p5.FFT(smoothing, binCount);
fft.setInput(mic);
// instantiate the particles.
for (var i = 0; i < heritages.length; i++) {
var x = map(i, i, binCount, i, width*2);
var y = random(0, height*2);
var position = createVector(x++, y);
heritages[i] = new Heritage(position);
}
}
//Personal is political.
//Like many of us my ethnicity and culture fit in different boxes and consequently I found that none of the boxes apply… I was brought up within French and Vietnamese cultures, while my genes and heritage hold long migrant histories (England or Ireland, France, Italy, Philippines, Spain, Vietnam). I am also neuro-diverse and hypermobile (hEDS). Being of mixed cultures, ethnicities and body-abilities is not unique but it often is invisible in heteronormative and homogenised systems. As an individual, it also means that you create a different sense of conforming and belonging located on the edges and intersections of social constructs, where differences are recognised (identities), some overcome (oppressions, omissions) and some celebrated (empowerments). Senses of belonging are also located in the people that surround you, and it is in their collectives, that differences become visible, that the unnamed is recognised. Being located on the edges does not mean there is a desire to become part of any core – just that the edges need to be visible and part of the social, economical and cultural systems – as systems of differences. To think of a system of differences means labour and a constant need to decode our own privileges and develop deeper empathy towards differences in gender, ethnicity, class, sexuality and neuro- and body abilities. It also means challenging or re-questioning everyday structures and languages whilst re-coding our gaze towards others and ourselves. This can be done in the smallest of acts and with creative coding.
function draw() {
//background(0); //if no background revealing all traces
// returns an array with [binCount] amplitude readings from lowest to highest frequencies
var breathe = fft.analyze(binCount);
let micLevel = mic.getLevel();
let vol = mic.getLevel();
console.log (micLevel)
textAlign(CENTER,TOP);
if (getAudioContext().state !== ‘running’) {
text(‘tap to listen and speak out’);
}
// update and draw all [binCount] particles!
// Each particle gets a level that corresponds to
// the level at one bin of the FFT ‘breathe’.
// This level is like amplitude, often called “energy.”
// It will be a number between 0-255.
for (var i = 0; i < binCount; i++) {
var thisLevel = map(breathe[i++], 30, 0.5, 15, 0); // (value, start, stop, start, stop);
// update values based on amplitude at this part of the frequency ‘breathe’
heritages[i].update( thisLevel );
// draw the particle
heritages[i].draw();
// update x position (in case we change the bin count while live coding)
heritages[i].position.x = map(i, height, binCount, random(0.01,0.5), width);
}
}
/// Heritage class
var Heritage = function(position) {
this.position = position;
this.scale = random(-0.01, 0.05);
this.speed = createVector(0, random(-1, 2) );
}
var theyExpand = 3;
// use FFT bin level to change speed and diameter
Heritage.prototype.update = function(someLevel) {
this.position.y += this.speed.y / (someLevel*2);
if (this.position.y > width) {
this.position.y = 0;
}
this.diameter = map(someLevel, -5, 2, 20, 100) * this.scale * theyExpand;
}
Heritage.prototype.draw = function() {
//noFill();
//stroke(‘yellow’);
texture(img1);
ellipse(this.position.x+10, this.position.y++,this.diameter, this.diameter);
texture(img2);
ellipse(this.position.x+25, random(this.position.y+20),this.diameter+1, this.diameter+1);
texture(img3);
ellipse(this.position.x+20, this.position.y-40,this.diameter, this.diameter);
texture(img4);
ellipse(this.position.x-30, this.position.y+10,this.diameter, this.diameter);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight,WEBGL);
}
function touchStarted() {
if (getAudioContext().state !== ‘running’) {
getAudioContext().resume();
}
else if (state === 0 && mic.enabled) {
audreLorde.play();
}
}
//INSTRUCTION
//Click below for the interactive piece. Enable your microphone to reveal images that respond to your voice. This code is open-source and free for anybody to use.’
//fullscreen mode: https://editor.p5js.org/cecile/full/pxrSIMZZv
//edit mode: https://editor.p5js.org/cecile/sketches/pxrSIMZZv
//QUESTION
//To think of systems of differences and creative coding is to think of the social and communities, their heritage and the tools they create.
//Who is the “we” who write together?
//VOICES IN THIS PROJECT
//http://ifte.network/
//Lorde, Audre. “Age, Race, Class, and Sex: Women Redefining Difference.” Sister Outsider: Essays and Speeches, Crossing Press, 1984, pp. 114-123 – delivered at Amherst College in Massachusetts on April3, 7 980. L
//Lorde, Audre. 2018. The Master’s Tools Will Never Dismantle the Master’s House. Penguin Modern. London, England: Penguin Classics
//Honor Moore, Adrienne Rich, Audre Lorde And Joan Larkin – A Sign / I Was Not Alone – 1977 – https://www.discogs.com/Honor-Moore-Adrienne-Rich-Audre-Lorde-And-Joan-Larkin-A-Sign-I-Was-Not-Alone/release/3415355
//Audre Lorde There is no hierachy of Oppression
//There is No Hierarchy of Oppressions – by Audre Lorde (Read by Lauren Lyons) – https://www.youtube.com/watch?v=i1pNsLsHsfs
//Audre Lorde audio recordings and poems: https://library.harvard.edu/sites/default/files/static/poetry/listeningbooth/poets/lorde.html
//Audre Lorde, April 1980, ‘Age, Race, Class and Sex: Women Redefining Difference’, Paper delivered at the Copeland Colloquium, Amerst College,Reproduced in: Sister Outsider Crossing Press, California 1984 – https://www.colorado.edu/odece/sites/default/files/attached-files/rba09-sb4converted_8.pdf
//Lauren Lee McCarthy (P5.js)
//Qianqian Ye (P5.js)
//Evelyn Masso (P5.js)
//Olivia Jack (HYDRA)
//Jason Sigal/https://therewasaguy.github.io/p5-music-viz/demos/05a_fft_particle_system/
//Jason Sigal/https://therewasaguy.github.io/p5-music-viz/
========================
HTML
========================
<!DOCTYPE html>
<html lang=”en”>
<head>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.dom.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<meta charset=”utf-8″ />
</head>
<body>
<script src=”sketch.js”></script>
</body>
</html>
========================
CSS
========================
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
Who is the “we” who writes together?
