Back 
Time As A Trigger – Inspired by Nature
Trying to learn from moon with odd and flood.
Screenshot
let posterF4 = 0.699;
let sel;
let h1 = [];
let h2 = [];
let f1, f2, f3, f4;
let mode = 1,
useBackground = true,
useHeader = true,
useFooter = true;
let tilesX = 100;
let tilesY = 200;
////////////////////////////
////////////////////////////
var dragging = false; // Is the object being dragged?
var rollover = false; // Is the mouse over the ellipse?
var xdrag, ydrag, wdrag, hdrag; // Location and size
var offsetXdrag, offsetYdrag; // Mouseclick offset
////////////////////////////
////////////////////////////
//typeWave
let rows, columns;
let xSpace, ySpace;
let yWave;
let yWaveSize = 20;
let yWaveSpeed = 0.1;
let time = 2;
////////////////////////////
////////////////////////////
//layers
let og;
let infoLayer;
let typeLayer;
let graphicLayer;
let layer3D;
let myModel;
////////////////////////////
////////////////////////////
//audio
let pts;
let font;
let bounds;
let txtA, txtSize, txtOptions;
let soundLayer;
////////////////////////////
////////////////////////////
function preload() {
// for(let o of objLoc) {
// objFiles.push(loadModel(o));
// }
//font = loadFont('data/fonts/AkzidenzGrotesk-LightExtended.otf');
font = loadFont('data/fonts/Lausanne/Lausanne-300.otf');
}
////////////////////////////
////////////////////////////
function setup() {
createCanvas(windowWidth, windowHeight);
xdrag = 50;
ydrag = 350;
// Dimensions
w = 75;
h = 50;
///
sel = createSelect();
sel.position(windowWidth - 133, 400);
sel.option('drawmode1');
sel.option('drawmode2');
sel.option('drawmode3');
sel.option('drawmode4');
sel.option('drawmode5');
//sel.option('drawmode6');
sel.changed(changeModes);
///
// objMenu = createSelect();
// objMenu.position(windowWidth-114, 420);
// for(let i=0;i<objNames.length;i++){
// objMenu.option(objNames[i],i);
// }
// objMenu.changed(changeObject);
///
inp = createInput('TYPE').position(width - 100, 340).style('width', '50px');
inp.input(updateInput);
oh = createInput('2384').position(width - 100, 60).style('width', '50px');
th1 = createInput('MA').position(width - 100, 120).style('width', '50px');
th2 = createInput('THESIS').position(width - 100, 140).style('width', '50px');
th3 = createInput('EXPERIMENT').position(width - 100, 160).style('width', '50px');
th4 = createInput('001').position(width - 100, 180).style('width', '50px');
tf1 = createInput('ALAIN').position(width - 100, 220).style('width', '50px');
tf2 = createInput('BRUSCH').position(width - 100, 240).style('width', '50px');
tf3 = createInput('HGK').position(width - 100, 260).style('width', '50px');
tf4 = createInput('BASEL').position(width - 100, 280).style('width', '50px');
scl = createInput('0.40').position(width - 100, 80).style('width', '50px');
th1.input(updateInput);
th2.input(updateInput);
th3.input(updateInput);
th4.input(updateInput);
tf1.input(updateInput);
tf2.input(updateInput);
tf3.input(updateInput);
tf4.input(updateInput);
scl.input(updateInput);
////////////////////////////
//ADD FUNCTIONS
createSliders();
labels();
checkboxes();
updateSlider(); //--> not working:/
////////////////////////////
//ADDING LAYERS
createLayers();
////////////////////////////
//ADDING AUDIO TXT INPUTS
//audio add ons drawmode4
inp2 = createInput('O');
inp2.position(width - 100, 367).style('width', '50px');
inp2.input(updateInputA);
txtA = 'O';
txtSize = 350; //txtS.value() -> doesn't work | maybe try 2 * window.innerWidth + size?
txtOptions = { //amounts of points using
sampleFactor: .15,
simplifyThreshold: 0
}
genType()
//end of audio add ons dm4
////////////////////////////
updateInput();
imageMode(CENTER)
}
////////////////////////////
////////////////////////////
function createLayers() {
og = createGraphics(oh.value() * posterF4, oh.value());
infoLayer = createGraphics(oh.value() * posterF4, oh.value());
typeLayer = createGraphics(oh.value() * posterF4, oh.value());
graphicLayer = createGraphics(oh.value() * posterF4, oh.value());
layer3D = createGraphics(oh.value() * posterF4, oh.value(), WEBGL);
soundLayer = createGraphics(oh.value() * posterF4, oh.value());
}
function genType() {
pts = font.textToPoints(txtA, 0, 0, txtS.value(), txtOptions)
bounds = font.textBounds(txtA, 0, 0, txtS.value(), txtOptions);
}
function updateInputA() {
txtA = inp2.value();
genType()
}
function updateInput() {
//f1.txt = tf1.value()
txt = inp.value();
scl = scl.value();
}
////////////////////////////
////////////////////////////
//MAIN DRAW FUNCTION
function draw() {
// Adjust location if being dragged
if(dragging) {
xdrag = mouseX + offsetX;
ydrag = mouseY + offsetY;
}
if(useBackground) {
background('ORANGE');
og.background(0, fadeSlider.value()); //**maybe remove -> DISCUSS WITH ANDREA & TED
}
if(mode == 1) {
//background(0, 0, 255);
drawmode1(); //DRAWING LAYER
} else if(mode == 2) {
drawmode2();
} else if(mode == 3) {
drawmode3();
} else if(mode == 4) {
drawmode4();
} else if(mode == 5) {
drawmode5();
} else if(mode == 6) {
drawmode6();
}
infoLayers(); //ADDING INFO LINES ON TOP
//DRAW OUTPUT GRAPHIC LAYER (OG)
image(og, width / 2, height / 2, (oh.value() * posterF4) * scl, oh.value() * scl);
image(infoLayer, width / 2, height / 2, (oh.value() * posterF4) * scl, oh.value() * scl);
}
////////////////////////////
////////////////////////////
//INFO LINES HEADER & FOOTER
function infoLayers() {
//new header info
infoLayer.clear();
h1 = new Header(th1.value(), 40, 30, 20);
h2 = new Header(th2.value(), (og.width / 1.5) / 2, 30, 20);
h3 = new Header(th3.value(), og.width / 2.5 + ((og.width / 2) / 2), 30, 20);
h4 = new Header(th4.value(), og.width - 40, 30, 20);
//new footer info
f1 = new Footer(tf1.value(), 40, og.height - 20, 20);
f2 = new Footer(tf2.value(), (og.width / 1.5) / 2, og.height - 20, 20);
f3 = new Footer(tf3.value(), og.width / 2.5 + ((og.width / 2) / 2), og.height - 20, 20);
f4 = new Footer(tf4.value(), og.width - 40, og.height - 20, 20);
//draw header info
h1.display();
h2.display();
h3.display();
h4.display();
//draw footer info
f1.display();
f2.display();
f3.display();
f4.display();
}
////////////////////////////
////////////////////////////
//DRAWMODE1 * INSTRUCTIONS
function drawmode1() {
//WE NEED TO DRAW EVERYTHING TO OG LAYER (OUTPUT GRAPHICS)
let wave = atan(sin(radians(frameCount/PI))*20)*26.75
og.background(0);
og.fill(255)
og.push();
og.textFont(font)
og.textSize(680);
og.textAlign(LEFT);
og.text('wave', 10*(wave), 530, wdrag, hdrag);
og.text('wave', 10*(-wave), height - 100, wdrag, hdrag);
og.text('wave', 10*(wave), height + 300, wdrag, hdrag);
og.text('wave', 10*(-wave), height + 700, wdrag, hdrag);
og.text('wave', 10*(wave), height + 1100, wdrag, hdrag);
////og.text('THE MENUE NEXT TO THE CANVAS', 50, 300); //INSTRUCTION TEXT
og.pop();
og.push();
og.fill(255)
og.blendMode(DIFFERENCE)
// og.stroke(255);
og.noStroke()
og.strokeWeight(5);
og.ellipse(og.width - 400, wave * ampEase, mouseY);
og.ellipse(og.width - 550 - wave * ampEase, 800 - wave * ampEase, mouseX);
og.ellipse(og.width - 150 + wave * 100, og.height - ampEase - wave * ampEase, mouseY);
og.ellipse(150, og.height - 100, mouseX);
og.ellipse(wave * 100, og.height / 2, mouseY);
og.pop();
//textSize(txtS.value());
//text(th1.value(), width / 2, height / 2, 500,100);
}
function drawmode2() {
//WE NEED TO DRAW EVERYTHING TO OG LAYER (OUTPUT GRAPHICS)
wave = sin(radians(frameCount))
og.background(0);
og.fill(255)
og.push();
og.textFont(font)
og.textSize(680);
og.textAlign(LEFT);
og.text('wave', 10, 530, wdrag, hdrag);
og.text('wave', 10, height - 100, wdrag, hdrag);
og.text('wave', 10, height + 300, wdrag, hdrag);
og.text('wave', 10, height + 700, wdrag, hdrag);
og.text('wave', 10, height + 1100, wdrag, hdrag);
////og.text('THE MENUE NEXT TO THE CANVAS', 50, 300); //INSTRUCTION TEXT
og.pop();
og.push();
og.fill(255)
og.blendMode(DIFFERENCE)
og.noStroke()
og.strokeWeight(5);
// og.ellipse(og.width-400,wave*100,mouseY&Ease);
// og.ellipse(og.width-550-wave*100,800-wave*100,mouseX&);
// og.ellipse(og.width-150+wave*100,og.height-100-wave*100,mouseY&);
// og.ellipse(150-wave*100,og.height-100,mouseX&);
// og.ellipse(wave*100,og.height/2,mouseY&);
og.pop();
og.push();
og.fill(255)
og.blendMode(DIFFERENCE)
og.noStroke();
let maxDistance = 100;
let audioX = map(ampEase, 0, ampEase, 0, og.width)
let stepX = 40
let stepY = 40
for(let xg = 0; xg < og.width; xg += stepX) {
for(let yg = 0; yg < og.height; yg += stepY) {
let distPoints = dist(mouseX, mouseY, xg, yg);
let waveAudio = fract(map(ampEase, 0, ampEase, 0, 100))
let diameter = distPoints / maxDistance;
og.ellipse(xg, yg, diameter, diameter)
}
}
og.pop();
//textSize(txtS.value());
//text(th1.value(), width / 2, height / 2, 500,100);
}
////////////////////////////////
////////////////////////////////
////////////////////////////////// *** create DOM Elements
////////////////////////////////
//CREATE SLIDERS
function createSliders() {
columnsSlider = createSlider(1, 100, 20).position(30, 80).style('width', '100px');
columnsSlider.input(updateSlider);
rowsSlider = createSlider(1, 100, 25).position(30, 130).style('width', '100px');
rowsSlider.input(updateSlider);
xSpaceSlider = createSlider(0, 400, 200).position(150, 80).style('width', '100px');
xSpaceSlider.input(updateSlider);
ySpaceSlider = createSlider(0, 400, 200).position(150, 130).style('width', '100px');
ySpaceSlider.input(updateSlider);
yWaveSizeSlider = createSlider(0, 100, 20).position(30, 180).style('width', '100px');
yWaveSizeSlider.input(updateSlider);
yWaveLengthSlider = createSlider(0, PI, 0.5, 0.01).position(30, 230).style('width', '100px');
yWaveLengthSlider.input(updateSlider);
yWaveOffsetSlider = createSlider(0, PI, 0.5, 0.01).position(30, 280).style('width', '100px');
yWaveOffsetSlider.input(updateSlider);
yWaveSpeedSlider = createSlider(0, 0.25, 0.05, 0.01).position(30, 330).style('width', '100px');
yWaveSpeedSlider.input(updateSlider);
txtS = createSlider(10, 1600, 400, 1).position(30, 380).style('width', '100px')
txtS.input(updateSlider);
fadeSlider = createSlider(0, 100, 90, 0).position(30, 430).style('width', '100px')
fadeSlider.input(updateSlider);
objSlider = createSlider(0, 1500, 250, 1).position(30, windowHeight - 150).style('width', '100px')
objSlider.input(updateSlider);
traXslider = createSlider(-width * 4, width * 4, 0, 0).position(155, windowHeight - 150).style('width', '100px')
traXslider.input(updateSlider);
traYslider = createSlider(-height * 4, height * 4, (height * 4) / 3, 0).position(270, height - 150).style('width', '100px')
traYslider.input(updateSlider);
//bottom sliders
clrSlider = createSlider(0, 255, 0, 0).position(30, windowHeight - 100).style('width', '100px')
clrSlider.input(updateSlider);
clrSliderG = createSlider(0, 255, frameCount % 255, 0).position(150, height - 100).style('width', '100px')
clrSliderG.input(updateSlider);
clrSliderB = createSlider(0, 255, 255, 0).position(270, windowHeight - 100).style('width', '100px')
clrSliderB.input(updateSlider);
rotXslider = createSlider(0, 360, 10, 0).position(30, windowHeight - 40).style('width', '100px')
rotXslider.input(updateSlider);
rotYslider = createSlider(0, 360, 0, 0).position(150, windowHeight - 40).style('width', '100px')
rotYslider.input(updateSlider);
rotZslider = createSlider(0, 360, 0, 0).position(270, windowHeight - 40).style('width', '100px')
rotZslider.input(updateSlider);
}
function updateSlider() {
columnsSlider.html("sliderValue:" + columnsSlider.value());
rowsSlider.html("sliderValue:" + rowsSlider.value());
xSpaceSlider.html("sliderValue:" + xSpaceSlider.value());
ySpaceSlider.html("sliderValue:" + ySpaceSlider.value());
yWaveSizeSlider.html("sliderValue:" + yWaveSizeSlider.value());
yWaveLengthSlider.html("sliderValue:" + yWaveLengthSlider.value());
yWaveOffsetSlider.html("sliderValue:" + yWaveOffsetSlider.value());
yWaveSpeedSlider.html("sliderValue:" + yWaveSpeedSlider.value());
clrSlider.html("sliderValue:" + clrSlider.value());
clrSliderG.html("sliderValue:" + clrSliderG.value());
clrSliderB.html("sliderValue:" + clrSliderB.value());
fadeSlider.html("sliderValue:" + fadeSlider.value());
objSlider.html("sliderValue:" + objSlider.value());
rotXslider.html("sliderValue:" + rotXslider.value());
rotYslider.html("sliderValue:" + rotXslider.value());
rotZslider.html("sliderValue:" + rotXslider.value());
txtS.html("sliderValue:" + txtS.value());
traXslider.html("sliderValue:" + traXslider.value());
traYslider.html("sliderValue:" + traYslider.value());
//
if(mode == 3) {
genType()
} else if(mode == 4) {
genType()
}
if(mode == 5) {
genType()
}
}
////////////////////////////////
////////////////////////////////
//CREATE LABELS
function labels() {
columns = createDiv("Columns:"); //create Div
columns.position(30, 60); //position label
columns.style("color", '#fff');
columns.style("font-size", '6');
columns.style("font-family", 'sans-serif');
rows = createDiv("Rows:"); //create Div
rows.position(30, 110); //position label
rows.style("color", '#fff');
rows.style("font-size", '6');
rows.style("font-family", 'sans-serif');
cSpac = createDiv("Column spacing:"); //create Div
cSpac.position(150, 60); //position label
cSpac.style("color", '#fff');
cSpac.style("font-size", '6');
cSpac.style("font-family", 'sans-serif');
rSpac = createDiv("Row spacing:"); //create Div
rSpac.position(150, 110); //position label
rSpac.style("color", '#fff');
rSpac.style("font-size", '6');
rSpac.style("font-family", 'sans-serif');
wSize = createDiv("WaveSize:"); //create Div
wSize.position(30, 160); //position label
wSize.style("color", '#fff');
wSize.style("font-size", '6');
wSize.style("font-family", 'sans-serif');
wLength = createDiv("WaveLength:"); //create Div
wLength.position(30, 210); //position label
wLength.style("color", '#fff');
wLength.style("font-size", '6');
wLength.style("font-family", 'sans-serif');
wOff = createDiv("WaveOffset:"); //create Div
wOff.position(30, 260); //position label
wOff.style("color", '#fff');
wOff.style("font-size", '6');
wOff.style("font-family", 'sans-serif');
wS = createDiv("WaveSpeed:"); //create Div
wS.position(30, 310); //position label
wS.style("color", '#fff');
wS.style("font-size", '6');
wS.style("font-family", 'sans-serif');
LabelTsize = createDiv("TextSize:"); //create Div
LabelTsize.position(30, 360); //position label
LabelTsize.style("color", '#fff');
LabelTsize.style("font-size", '8');
LabelTsize.style("font-family", 'sans-serif');
LabelFade = createDiv("Fade:"); //create Div
LabelFade.position(30, 410); //position label
LabelFade.style("color", '#fff');
LabelFade.style("font-size", '8');
LabelFade.style("font-family", 'sans-serif');
LabelFade = createDiv("Scale 3D OBJ:"); //create Div
LabelFade.position(30, windowHeight - 170); //position label
LabelFade.style("color", '#fff');
LabelFade.style("font-size", '8');
LabelFade.style("font-family", 'sans-serif');
LabeltrX = createDiv("TranslateX:"); //create Div
LabeltrX.position(150, windowHeight - 170); //position label
LabeltrX.style("color", '#fff');
LabeltrX.style("font-size", '8');
LabeltrX.style("font-family", 'sans-serif');
LabeltrY = createDiv("TranslateY:"); //create Div
LabeltrY.position(270, windowHeight - 170); //position label
LabeltrY.style("color", '#fff');
LabeltrY.style("font-size", '8');
LabeltrY.style("font-family", 'sans-serif');
LabelR = createDiv("Color R:"); //create Div
LabelR.position(30, windowHeight - 120); //position label
LabelR.style("color", '#fff');
LabelR.style("font-size", '8');
LabelR.style("font-family", 'sans-serif');
LabelG = createDiv("Color G:"); //create Div
LabelG.position(155, windowHeight - 120); //position label
LabelG.style("color", '#fff');
LabelG.style("font-size", '8');
LabelG.style("font-family", 'sans-serif');
LabelB = createDiv("Color B:"); //create Div
LabelB.position(270, windowHeight - 120); //position label
LabelB.style("color", '#fff');
LabelB.style("font-size", '8');
LabelB.style("font-family", 'sans-serif');
LabelRx = createDiv("RotateX:"); //create Div
LabelRx.position(30, windowHeight - 60); //position label
LabelRx.style("color", '#fff');
LabelRx.style("font-size", '8');
LabelRx.style("font-family", 'sans-serif');
LabelRy = createDiv("RotateY:"); //create Div
LabelRy.position(155, windowHeight - 60); //position label
LabelRy.style("color", '#fff');
LabelRy.style("font-size", '8');
LabelRy.style("font-family", 'sans-serif');
LabelRz = createDiv("RotateZ:"); //create Div
LabelRz.position(270, windowHeight - 60); //position label
LabelRz.style("color", '#fff');
LabelRz.style("font-size", '8');
LabelRz.style("font-family", 'sans-serif');
/*labelC1 = createDiv("CanvasWidth"); //create Div
labelC1.position(windowWidth - 210, 40); //position label
labelC1.style("color", '#fff');
labelC1.style("font-size", '8');
labelC1.style("font-family", 'sans-serif');*/
labelC2 = createDiv("CanvasHeight"); //create Div
labelC2.position(windowWidth - 205, 60); //position label
labelC2.style("color", '#fff');
labelC2.style("font-size", '8');
labelC2.style("font-family", 'sans-serif');
//labels for header info
labelh1 = createDiv("Header Info"); //create Div
labelh1.position(windowWidth - 205, 120); //position label
labelh1.style("color", '#fff');
labelh1.style("font-size", '8');
labelh1.style("font-family", 'sans-serif');
labelh2 = createDiv("Header Info2"); //create Div
labelh2.position(windowWidth - 205, 140); //position label
labelh2.style("color", '#fff');
labelh2.style("font-size", '8');
labelh2.style("font-family", 'sans-serif');
labelh3 = createDiv("Header Info3"); //create Div
labelh3.position(windowWidth - 205, 160); //position label
labelh3.style("color", '#fff');
labelh3.style("font-size", '8');
labelh3.style("font-family", 'sans-serif');
labelh4 = createDiv("Header Info4"); //create Div
labelh4.position(windowWidth - 205, 180); //position label
labelh4.style("color", '#fff');
labelh4.style("font-size", '8');
labelh4.style("font-family", 'sans-serif');
//labels for footer info
labelf1 = createDiv("Footer Info"); //create Div
labelf1.position(windowWidth - 200, 220); //position label
labelf1.style("color", '#fff');
labelf1.style("font-size", '8');
labelf1.style("font-family", 'sans-serif');
labelf2 = createDiv("Footer Info2"); //create Div
labelf2.position(windowWidth - 200, 240); //position label
labelf2.style("color", '#fff');
labelf2.style("font-size", '8');
labelf2.style("font-family", 'sans-serif');
labelf3 = createDiv("Footer Info3"); //create Div
labelf3.position(windowWidth - 200, 260); //position label
labelf3.style("color", '#fff');
labelf3.style("font-size", '8');
labelf3.style("font-family", 'sans-serif');
labelf4 = createDiv("Footer Info4"); //create Div
labelf4.position(windowWidth - 200, 280); //position label
labelf4.style("color", '#fff');
labelf4.style("font-size", '8');
labelf4.style("font-family", 'sans-serif');
labelMainT = createDiv("Main Text"); //create Div
labelMainT.position(windowWidth - 185, 340); //position label
labelMainT.style("color", '#fff');
labelMainT.style("font-size", '8');
labelMainT.style("font-family", 'sans-serif');
labelMainT.style("text-align", 'right');
labelAudioT = createDiv("Text for audiomodes"); //create Div
labelAudioT.position(windowWidth - 260, 370); //position label
labelAudioT.style("color", '#fff');
labelAudioT.style("font-size", '8');
labelAudioT.style("font-family", 'sans-serif');
//scale
labelSCL = createDiv("Display Scale"); //create Div
labelSCL.position(windowWidth - 205, 80); //position label
labelSCL.style("color", '#fff');
labelSCL.style("font-size", '8');
labelSCL.style("font-family", 'sans-serif');
}
function inputs() {
//ow = createInput('1468').position(width - 100, 40).style('width', '50px');
oh = createInput('2384').position(width - 100, 60).style('width', '50px');
th1 = createInput('WHAT').position(width - 100, 120).style('width', '50px');
th2 = createInput('WHERE').position(width - 100, 140).style('width', '50px');
th3 = createInput('WHO').position(width - 100, 160).style('width', '50px');
th4 = createInput('WHEN').position(width - 100, 180).style('width', '50px');
tf1 = createInput('INFO').position(width - 100, 220).style('width', '50px');
tf2 = createInput('INFO').position(width - 100, 240).style('width', '50px');
tf3 = createInput('INFO').position(width - 100, 260).style('width', '50px');
tf4 = createInput('INFO').position(width - 100, 280).style('width', '50px');
scl = createInput('0.33').position(width - 100, 80).style('width', '50px');
}
function changeObject() {
for(let i = 0; i < objNames.length; i++) {
if(objMenu.value() == i) {
myModel = objFiles[objMenu.value()];
}
}
}
function changeModes() {
if(sel.value() == 'drawmode1') {
mode = 1;
} else if(sel.value() == 'drawmode2') {
mode = 2;
} else if(sel.value() == 'drawmode3') {
mode = 3;
} else if(sel.value() == 'drawmode4') {
mode = 4;
} else if(sel.value() == 'drawmode5') {
mode = 5;
}
/* else if(sel.value()=='drawmode6'){
mode=6;
}*/
}
function checkboxes() {
let activatemode1;
//c1 = createCheckbox(activatemode1, 1);
//c1.position(windowWidth - 100, 80);
}
class Header {
constructor(txt, x, y, s) {
this.txt = txt;
this.x = x;
this.y = y;
this.s = s;
}
//update() {
// if(mouseIsPressed) {
// this.x = mouseX;
// this.y = mouseY;
// }
display() {
push();
infoLayer.textAlign(CENTER);
infoLayer.fill(255);
infoLayer.textSize(this.s);
infoLayer.text(this.txt, this.x, this.y);
pop();
}
}
class Footer {
constructor(txt, x, y, s) {
this.txt = txt;
this.x = x;
this.y = y;
this.s = s;
}
display() {
push();
infoLayer.textAlign(CENTER);
infoLayer.fill(255);
infoLayer.textSize(this.s);
infoLayer.text(this.txt, this.x, this.y);
pop();
}
}
function mousePressed() {
// Did I click on the rectangle?
if(mouseX > xdrag && mouseX < xdrag + wdrag && mouseY > ydrag && mouseY < ydrag + hdrag) {
dragging = true;
// If so, keep track of relative location of click to corner of rectangle
offsetXdrag = xdrag - mouseX;
offsetYdrag = ydrag - mouseY;
}
}
function mouseReleased() {
// Quit dragging
dragging = false;
}
ogAverages(fftRaw.getOctaveBands(bands)); // array (0, 255)
}
/* CUSTOM FUNCTIONS FOR P5LIVE */
// keep fullscreen if window resized
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
// custom ease function
function ease(iVal, oVal, eVal) {
let targetX = iVal;
let dx = targetX - oVal;
return oVal += dx * eVal;
}
// processing compatibility
function println(msg) {
print(msg);
}