OurMusic02 - OpenProcessing

mySketch
xxxxxxxxxx
 
/*
Wir sind vor allem auf Grund der gestalterischen Elemente auf unsere Idee gekommen. Wir wollten, dass man auf mit verschiedenen
leuchtigen Formen und einem farbigen, veränderbaren Rand, das Instrument selbst gestalten und verändern kann, visuell und mit audio.
​
Funktionen:
- Formen: 
  - im schwarzen Rechteck die linke Taste drückent, vod der Form weg ziehen, Maus loslassen
  - bevor man eine neue Form erschafft, kann man einstellen in welche exakte Richtung diese sich bewegen soll:
    - Horizontal; vor dem ersten klick eine Pfeiltaste nach links oder rechts oder die rote Taste unten rechts drücken
    - Senkrecht; vor dem ersten klick eine Pfeiltaste nach oben oder unten oder die rote Taste unten links drücken
    - 45°; vor dem ersten klick eine Pfeiltaste Oben/Unten und eine Pfeiltaste Links/Rechts drücken oder
        beide roten Tasten unten. Dann während dem druck auf die linke Maustaste den Mauszeiger in die gewünschte Richtung bewegen und loslassen 
  - mit Backspace oder roter Taste oben Links, jüngste Form löschen
  - mit Shift+Backspace oder der roten Taste oben Rechts, alle Formen löschen
- Felder:
  - per klick auf die Felder ändert sich der Ton und die Farbe des Feldes
- Sounds:
  - mit der Taste "p" kann man zwischen Presets wechseln. Eines spielt Percussion Geräusche, das andere Klavier.
​
Authors: Fiona Rüetschi, Yannis Bontempi
Date: 22.11.2021
Code: Gesamter Code selber entwickelt
*/
​
let forme = [];
let slots1 = [];
let welcheForm = [0, 1, 2, 3];
let soundsPath1 = ['schnips1.mp3', 'audio01.wav','audio03.wav','audio04.wav','audio05.wav','audio13.wav','audio14.wav','audio15.wav','audio16.wav','audio17.wav','audio18.wav','audio19.wav','audio20.wav','audio21.wav','audio22.wav','audio23.wav','audio24.wav','audio25.wav','a-saite.mp3','d-saite.mp3','e-saite.mp3','g-saite.mp3','geige_dsaite.mp3','geige_gsaite.mp3','Unbenannt 5.mp3','audio26.wav'];
let soundsPath2 = ['piano01.wav', 'piano02.wav', 'piano03.mp3', 'piano04.wav', 'piano05.wav', 'piano06.wav', 'piano07.wav', 'piano08.wav', 'piano09.wav', 'piano10.wav', 'piano11.wav', 'piano12.wav', 'piano13.wav', 'piano14.wav', 'piano15.wav', 'piano16.wav', 'piano17.wav', 'piano18.wav', 'piano19.wav', 'piano20.wav', 'piano21.wav', 'piano22.wav', 'piano23.wav', 'piano24.wav', 'piano25.wav'];
let loadedSounds1 = [];
let loadedSounds2 = [];
let count;
let startUp = true;
let bouncing = false;
let oldMouseX, oldMouseY;
let dx, dy;
let upDown = false;
let leftRight = false;
let scaleWidth = 15;
let scaleHeight = 10;
let wFormToPush;
let wFarbe;
let boxWidth, boxHeight;
let buttonLRStop = false;
let buttonUDStop = false;
let buttonRAStop = false;
let preset = 0;
​
function preload() {
  for (i = 0; i < soundsPath1.length; i++) {
    const j = i;
    loadedSounds1[j] = loadSound(soundsPath1[j]);
    loadedSounds1[j].playMode('restart');
  }
  for (i = 0; i < soundsPath2.length; i++) {
    const j = i;
    loadedSounds2[j] = loadSound(soundsPath2[j]);
    loadedSounds2[j].playMode('restart');
  }
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  noStroke();
  colorMode(HSB, 100);
  angleMode(DEGREES);
  if (height > width) {
    scaleHeight = 10;
    scaleWidth = 5;
    scaleGlobal = width;
  } else {
    scaleWidth = 15;
    scaleHeight = 10;
    scaleGlobal = height;
  }
​
  for (let i = 1; i < scaleWidth - 1; i++) {
    slots1.push(new slots(i, 1, i));
  }
  for (let i = 1; i < scaleHeight - 1; i++) {
    slots1.push(new slots(i, 2, i));
  }
  for (let i = 1; i < scaleWidth - 1; i++) {
    slots1.push(new slots(i, 3, i));
  }
  for (let i = 1; i < scaleHeight - 1; i++) {
    slots1.push(new slots(i, 4, i));
  }
  boxWidth = width / scaleWidth;
  boxHeight = height / scaleHeight;
}
​
function draw() {
  background(0, 15);
  for (j = 0; j < slots1.length; j++) {
    slots1[j].whatDo();
  }
  for (j = 0; j < forme.length; j++) {
    forme[j].calc();
  }
​
  gogo();
  wRemoveAll();
  noFill();
  buttons();
}
​
function buttons() {
  colorMode(RGB, 255);
  if (buttonUDStop == false) {
    buttonUpDown(255, 0);
  } else if (buttonUDStop == true) {
    buttonUpDown(0, 255);
  }
  if (buttonLRStop == false) {
    buttonLeftRight(255, 0);
  } else if (buttonLRStop == true) {
    buttonLeftRight(0, 255);
  }
  buttonRemoveAll(255, 0);
  buttonRemoveLast(255, 0);
}
​
function buttonRemoveLast(fRecht, fLinie) {
  fill(fRecht, 0, 0);
  rect(0, 0, boxWidth, boxHeight);
  strokeWeight(3);
  stroke(fLinie, 0, 0);
  line(boxWidth / 10, boxHeight / 10, boxWidth - boxWidth / 10, boxHeight - boxHeight / 10);
  line(boxWidth / 10, boxHeight - boxHeight / 10, boxWidth - boxWidth / 10, boxHeight / 10);
  noStroke();
}
​
function buttonRemoveAll(fRecht, fLinie) {
  fill(fRecht, 0, 0);
  rect(width - boxWidth, 0, width, boxHeight);
  strokeWeight(8);
  stroke(fLinie, 0, 0);
  line(width - boxWidth / 10, boxHeight / 10, width - boxWidth + boxWidth / 10, boxHeight - boxHeight / 10);
  line(width - boxWidth / 10, boxHeight - boxHeight / 10, width - boxWidth + boxWidth / 10, boxHeight / 10);
  noStroke();
}
​
function buttonUpDown(fRecht, fTria) {
  fill(fRecht, 0, 0);
  rect(0, height - boxHeight, boxWidth, boxHeight);
  fill(fTria, 0, 0);
  triangle(boxWidth / 4, height - boxHeight / 8 * 4.5, boxWidth / 2, height - boxHeight / 8 * 7, boxWidth / 4 * 3, height - boxHeight / 8 * 4.5);
  triangle(boxWidth / 4, height - boxHeight / 8 * 3.5, boxWidth / 2, height - boxHeight / 8, boxWidth / 4 * 3, height - boxHeight / 8 * 3.5);
  noFill();
  noStroke();
}
​
function buttonLeftRight(fRecht, fTria) {
  fill(fRecht, 0, 0);
  rect(width - boxWidth, height - boxHeight, boxWidth, boxHeight);
  fill(fTria, 0, 0);
  triangle(width - boxWidth / 8 * 3.5, height - boxHeight / 4 * 3, width - boxWidth / 8, height - boxHeight / 2, width - boxWidth / 8 * 3.5, height - boxHeight / 4);
  triangle(width - boxWidth / 8 * 4.5, height - boxHeight / 4 * 3, width - boxWidth / 8 * 7, height - boxHeight / 2, width - boxWidth / 8 * 4.5, height - boxHeight / 4);
  noFill();
  noStroke();
}
​
function removeAll() {
  let counter;
  forme.splice(0, forme.length);
  for (let i = 0; i < loadedSounds1.length; i++) {
    loadedSounds1[i].stop();
  }
}
​
function removeLast() {
  forme.splice(forme.length - 1, 1);
}
​
function direction() {
  if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
    upDown = true;
    buttonUDStop = true;
  } else if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {
    leftRight = true;
    buttonLRStop = true;
  }
}
​
function cross(xOrigin, yOrigin) {
  let movementSpeed = dist(xOrigin, yOrigin, mouseX, mouseY) / 10;
  let useableMouseX = mouseX + xOrigin;
  let useableMouseY = mouseY + yOrigin;
​
  if (mouseX > xOrigin && mouseY > yOrigin) {
    dx = movementSpeed;
    dy = movementSpeed;
  }
  if (mouseX > xOrigin && mouseY < yOrigin) {
    dx = movementSpeed;
    dy = -movementSpeed;
  }
  if (mouseX < xOrigin && mouseY > yOrigin) {
    dx = -movementSpeed;
    dy = movementSpeed;
  }
  if (mouseX < xOrigin && mouseY < yOrigin) {
    dx = -movementSpeed;
    dy = -movementSpeed;
  }
}
​
function touchControl(x, y) {
  if (x >= 0 && x <= boxWidth && y >= 0 && y <= boxHeight) {
    removeLast();
  } else if (x >= width - boxWidth && x <= width && y >= 0 && y <= boxHeight) {
    removeAll();
  } else if (x >= width - boxWidth && x <= width && y >= height - boxHeight && y <= height) {
    buttonLRStop = true;
    leftRight = true;
  } else if (x >= 0 && x <= boxWidth && y >= boxHeight && y <= height) {
    buttonUDStop = true;
    upDown = true;
  }
}
​
function startUpForm(x, y) {
  if (x > boxWidth && x < width - boxWidth && y > boxHeight && y < height - boxHeight) {
    if (startUp == true) {
      oldMouseX = mouseX;
      oldMouseY = mouseY;
      wFormToPush = random(welcheForm);
      wFarbe = random(100);
      startUp = false;
    }
  }
}
​
function gogo() {
  colorMode(RGB, 255);
  if (startUp == false) {
    forms(wFormToPush, oldMouseX, oldMouseY, wFarbe, 3);
​
    stroke(255);
    line(oldMouseX, oldMouseY, mouseX, mouseY);
    noStroke();
​
    dx = -(oldMouseX - mouseX) / 10;
    dy = -(oldMouseY - mouseY) / 10;
​
    if (upDown == true) {
      dx = 0;
    }
    if (leftRight == true) {
      dy = 0;
    }
    if (buttonLRStop == true && buttonUDStop == true) {
      cross(oldMouseX, oldMouseY);
    }
  }
  colorMode(HSB, 100);
}
​
function mousePressed() {
  for (let i = 0; i < slots1.length; i++) {
    slots1[i].clicked(mouseX, mouseY);
  }
  startUpForm(mouseX, mouseY);
  touchControl(mouseX, mouseY);
}
​
function mouseReleased() {
  if (startUp == false) {
    forme.push(new formen(oldMouseX, oldMouseY, dx, dy, wFormToPush, wFarbe));
    startUp = true;
    upDown = false;
    leftRight = false;
    buttonLRStop = false;
    buttonUDStop = false;
  }
}
​
function keyPressed() {
  if (keyCode === BACKSPACE) {
    removeLast();
  }
  if (keyCode === 80) {
    preset = (preset + 1) % 2;
  }
  direction();
}
​
function wRemoveAll() {
  if (keyIsDown(SHIFT) && keyIsDown(BACKSPACE)) {
    removeAll();
  }
}
​
function forms(whichForm, welcheX, welcheY, welcheFarbe, welcheR) {
  let grösse = scaleGlobal / 25;
  colorMode(HSB, 100);
  stroke(welcheFarbe, 100, 100);
  fill(welcheFarbe, 100, 100);
  if (whichForm == 0) {
    noFill();
    strokeWeight(3);
    circle(welcheX, welcheY, grösse);
  } else if (whichForm == 1) {
    strokeWeight(3);
    noFill();
    translate(welcheX, welcheY);
    rectMode(CENTER);
    rotate(welcheR);
    rect(0, 0, grösse, grösse);
    rectMode(CORNER);
  } else if (whichForm == 2) {
    strokeWeight(3);
    noFill();
    translate(welcheX, welcheY);
    rotate(welcheR);
    triangle(-grösse / 5 * 3, -grösse / 5 * 2, grösse / 5 * 3, -grösse / 5 * 2, 0, grösse / 5 * 2);
  } else if (whichForm == 3) {
    strokeWeight(3);
    noFill();
    translate(welcheX, welcheY);
    rotate(welcheR);
    triangle(-grösse / 5 * 3, -grösse / 10 * 3, grösse / 5 * 3, -grösse / 10 * 3, 0, grösse / 5 * 3);
    triangle(0, -grösse / 5 * 3, -grösse / 5 * 3, grösse / 10 * 3, grösse / 5 * 3, grösse / 10 * 3);
  }
  resetMatrix();
  noStroke();
  noFill();
}
​
​
class formen {
  constructor(x1, y1, dx1, dy1, form, farbe) {
    this.x = x1;
    this.dx = dx1;
    this.y = y1;
    this.dy = dy1;
    this.welcheForm = form;
    this.farbe = farbe;
    this.r = 10;
    this.rRandom = random(5);
  }
​
  calc() {
    if (this.x < width / (scaleWidth - 1) + scaleGlobal / 50) {
      this.dx = -this.dx;
      for (let i = slots1.length - (scaleHeight - 1); i < slots1.length; i++) {
        if (this.y >= slots1[i].posYU && this.y <= slots1[i].posYD) {
          this.playSound(i);
        }
      }
    }
    if (this.x > width - width / (scaleWidth - 1) - scaleGlobal / 50) {
      this.dx = -this.dx;
      for (let i = scaleWidth - 2; i < scaleWidth - 2 + scaleHeight - 2; i++) {
        if (this.y >= slots1[i].posYU && this.y <= slots1[i].posYD) {
          this.playSound(i);
        }
      }
    }
    if (this.y < height / (scaleHeight - 1) + scaleGlobal / 50) {
      this.dy = -this.dy;
      for (let i = 0; i < scaleWidth - 2; i++) {
        if (this.x >= slots1[i].posXL && this.x <= slots1[i].posXR) {
          this.playSound(i);
        }
      }
    }
    if (this.y > height - height / (scaleHeight - 1) - scaleGlobal / 50) {
      this.dy = -this.dy;
      for (let i = scaleWidth - 2 + scaleHeight - 2; i < 2 * scaleWidth - 4 + scaleHeight - 2; i++) {
        if (this.x >= slots1[i].posXL && this.x <= slots1[i].posXR) {
          this.playSound(i);
        }
      }
    }
    this.move();
    this.show();
  }
​
  playSound(number) {
    this.preset = preset;
    if (this.preset == 0) {
      loadedSounds1[slots1[number].whatSound].play();
    } else if (this.preset == 1) {
      loadedSounds2[slots1[number].whatSound].play();
    }
  }
​
  move() {
    this.x = this.x + this.dx;
    this.y = this.y + this.dy;
  }
​
  show() {
    colorMode(HSB, 100);
    stroke(this.farbe, 100, 100);
    fill(this.farbe, 100, 100);
    this.r = this.r + this.rRandom;
    forms(this.welcheForm, this.x, this.y, this.farbe, this.r);
  }
}
​
class slots {
  constructor(slot, wall, whatCount) {
    this.slot = slot;
    this.whatCount = whatCount;
    this.wall = wall;
    this.whatColor = 0;
    this.whatSound = 0;
    this.posXL = width / scaleWidth * this.slot;
    this.posXR = width / scaleWidth * (this.slot + 1);
    this.posYU = height / scaleHeight * this.slot;
    this.posYD = height / scaleHeight * (this.slot + 1);
    this.posY = height / scaleHeight * this.slot;
  }
​
  clicked(x, y) {
    if (this.wall == 1 && y <= boxHeight && x >= this.posXL && x <= this.posXR) {
      this.whatCount = this.whatCount + 1;
    } else if (this.wall == 3 && y >= height - boxHeight && x >= this.posXL && x <= this.posXR) {
      this.whatCount = this.whatCount + 1;
    } else if (this.wall == 2 && x >= width - boxWidth && y >= this.posYU && y <= this.posYD) {
      this.whatCount = this.whatCount + 1;
    } else if (this.wall == 4 && x <= boxWidth && y >= this.posYU && y <= this.posYD) {
      this.whatCount = this.whatCount + 1;
    }
  }
​
  whatDo() {
    this.whatCount = this.whatCount % 25;
    this.whatColor = this.whatCount * 4;
    this.whatSound = this.whatCount;
    this.show();
  }
​
  show() {
    colorMode(HSB, 100);
    fill(this.whatColor, 100, 100);
    if (this.wall == 1) {
      rect(this.posXL, 0, this.posXR, boxHeight);
    } else if (this.wall == 2) {
      rect(width - boxWidth, this.posY, width, boxHeight);
    } else if (this.wall == 3) {
      rect(this.posXL, height - boxHeight, boxWidth, height);
    } else if (this.wall == 4) {
      rect(0, this.posY, boxWidth, boxHeight);
    }
  }
}