p5.js Web Editor | Night Sky Music Maker

xxxxxxxxxx
//Night Sky Music Maker
//Created by Mirette Dahab
//December 9th, 2024
//Created as a final project for The Code of Music class
​
​
let stars = [];
let cursorX = 0;
let synth, chordSynth;
let snarePlayer, hihatPlayer, kickPlayer;
let isSnareOn = false, isHihatOn = false, isKickOn = false;
let snareButton, hihatButton, kickButton, tempoUpButton, tempoDownButton, decScaleButton, incScaleButton, clearButton;
let snareEventId, hihatEventId, kickEventId; //event IDs for each sound
​
​
// I-V-vi-IV progression
​
// Tonic chord definition for '1' keypress
let chords1 = [
  ["C3", "E3", "G3"],
  ["G3", "B3", "D4"],
  ["D3", "F#3", "A3"],
  ["A3", "C#4", "E4"],
  ["E3", "G#3", "B3"],
  ["B3", "D#3", "F#3"],
  ["F#3", "A#3", "C#4"],
  ["C#3", "E#3", "G#3"],
  ["F3", "A3", "C4"],
  ["Bb3", "D4", "F4"],
  ["Eb3", "G3", "Bb3"],
  ["Ab3", "C4", "Eb4"],
];
​
// Dominant chord definition for '2' keypress
let chords2 = [
  ["G3", "B3", "D3"],
  ["D3", "F#3", "A3"],
  ["A3", "C#4", "E4"],
  ["E3", "G#3", "B3"],
  ["B3", "D#4", "F#4"],
  ["F#3", "A#3", "C#4"],
  ["C#3", "E#3", "G#3"],
  ["G#3", "B#3", "D#3"],
  ["C3", "E3", "G3"],
  ["F3", "A3", "C3"],
  ["Bb3", "D4", "F4"],
  ["Eb3", "G3", "Bb3"],
];
​
// Minor Submediant chord definition for '3' keypress
let chords3 = [
  ["A3", "C3", "E3"],
  ["E3", "G3", "B3"],
  ["B3", "D4", "F#4"],
  ["F#3", "A3", "C#3"],
  ["C#3", "E3", "G#3"],
  ["G#3", "B3", "D#3"],
  ["D#3", "F#3", "A#3"],
  ["A#3", "C#4", "E#4"],
  ["D3", "F3", "A3"],
  ["G3", "Bb3", "D3"],
  ["C3", "Eb3", "G3"],
  ["F3", "Ab3", "C3"],
];
​
// Subdominant chord definition for '4' keypress
let chords4 = [
  ["F3", "A3", "C3"],
  ["C3", "E3", "G3"],
  ["G3", "B3", "D4"],
  ["D3", "F#3", "A3"],
  ["A3", "C#4", "E4"],
  ["E3", "G#3", "B3"],
  ["B3", "D#3", "F#3"],
  ["F#3", "A#3", "C#3"],
  ["Bb3", "D4", "F4"],
  ["Eb3", "G3", "Bb3"],
  ["Ab3", "C4", "Eb4"],
  ["Db3", "F3", "Ab3"],
];
// Definition of all 12 major scales
let majorScales = [
  ["C4", "D4", "E4", "F4", "G4", "A4", "B4"],
  ["G4", "A4", "B4", "C4", "D4", "E4", "F#4"],
  ["D4", "E4", "F#4", "G4", "A4", "B4", "C4"],
  ["A4", "B4", "C4", "D4", "E4", "F#4", "G#4"],
  ["E4", "F#4", "G#4", "A4", "B4", "C4", "D#4"],
  ["B4", "C4", "D#4", "E4", "F#4", "G#4", "A#4"],
  ["F#4", "G#4", "A#4", "B4", "C4", "D#4", "E4"],
  ["C4", "D#4", "E4", "F#4", "G#4", "A#4", "B4"],
  ["F4", "G4", "A4", "Bb4", "C4", "D4", "E4"],
  ["Bb4", "C4", "D4", "Eb4", "F4", "G4", "A4"],
  ["Eb4", "F4", "G4", "Ab4", "Bb4", "C4", "D4"],
  ["Ab4", "Bb4", "C4", "Db4", "Eb4", "F4", "G4"],
];
​
let currentScaleIndex = 0;
let currentScale = majorScales[currentScaleIndex];
let moonState = 0;
let thunderState = 0;
​
function preload(){
    //preload the drum sounds
  snarePlayer = new Tone.Player("sounds/snare.mp3").toDestination();
  hihatPlayer = new Tone.Player("sounds/hh.mp3").toDestination();
  kickPlayer = new Tone.Player("sounds/kick.mp3").toDestination();
  img = loadImage("nightsky.jpeg");
  
  cursivefont = loadFont('fonts/Pacifico-Regular.ttf');
  regularfont = loadFont('fonts/Atma-Regular.ttf');
}
​
function setup() {
  createCanvas(600, 430);
  synth = new Tone.Synth().toDestination();
  chordSynth = new Tone.PolySynth().toDestination();
  
  // Create stars
  for (let i = 0; i < 7; i++) {
    stars.push(
      new Star(
        random(20, width - 70),
        random(10, height - 100),
        currentScale[i % currentScale.length]
      )
    );
  }
  
  Tone.Transport.bpm.value = 120;
  
  //clear button
  clearButton = createButton('Clear');
  clearButton.position(15, height + 10);
  clearButton.mousePressed(clearScreen);
  
  snareButton = createButton('Snare');
  snareButton.position(220, height + 10);
  snareButton.mousePressed(toggleSnare);
​
  hihatButton = createButton('Hi-hat');
  hihatButton.position(280, height + 10);
  hihatButton.mousePressed(toggleHihat);
​
  kickButton = createButton('Kick');
  kickButton.position(340, height + 10);
  kickButton.mousePressed(toggleKick);
​
  //tempo buttons
  tempoUpButton = createButton('+');
  tempoUpButton.position(460, height + 10);
  tempoUpButton.mousePressed(increaseTempo);
​
  tempoDownButton = createButton('-');
  tempoDownButton.position(490, height + 10);
  tempoDownButton.mousePressed(decreaseTempo);
  
  decScaleButton = createButton('<');
  decScaleButton.position(530, height + 10);
  decScaleButton.mousePressed(decreaseScale);
  
  incScaleButton = createButton('>');
  incScaleButton.position(570, height + 10);
  incScaleButton.mousePressed(increaseScale);
  
  Tone.Transport.start();
}
​
function draw() {
  
  background(8, 11, 66);
  image(img,0,0);
  fill(0);
  noStroke();
  ellipse(width/2+50, height-30, 30 );
  
  //display the stars
  for (let star of stars) {
    star.display();
    star.drawConnections(); // draw connections to nearest "on" star
  }
  
  if(moonState == 0){
    fill(209, 208, 199, 300);
    noStroke();
    ellipse(550, 50, 40);
  }
  if(moonState == 1){
    noStroke();
    fill(209, 208, 199, 300);
    ellipse(550, 50, 40);
    fill(5, 18, 43);
    ellipse(565, 40, 37);
​
  }  
    if(moonState == 2){
      noStroke();
    fill(209, 208, 199, 300);
    ellipse(550, 50, 40);
    fill(5, 18, 43);
    ellipse(559, 43, 33);
  } 
    if(moonState == 3){
      noStroke();
    fill(209, 208, 199, 300);
    ellipse(550, 50, 40);
    fill(5, 18, 43);
    ellipse(557, 45, 38);  
  } 
  if (thunderState){
    //line 1
    stroke(209, 208, 199, 300);
    strokeWeight(6);
    line(150,0,250,120);
    line(250,120,180,150);
    strokeWeight(5);
    line(180,150,230,230);
    line(230,230,180,300);
    strokeWeight(3.3);
    line(180,300,230,370);
    
    
    //line 2
    strokeWeight(6);
    line(370,0,350,120);
    line(350,120,390,150);
    strokeWeight(5);
    line(390,150,320,230);
    line(320,230,380,300);
    strokeWeight(3.3);
    line(380,300,320,370);
    
    thunderState= 0;
  }
​
  //cursor
  stroke(183, 210, 235);  
  strokeWeight(2);       
  line(cursorX, 0, cursorX, height);
​
  //motion from left to right
  cursorX += Tone.Transport.bpm.value / 40; // Adjust speed with tempo 
  if (cursorX > width) cursorX = 0;
​
  //if the cursor passes over an "on" star, trigger sound
  for (let star of stars) {
    if (star.isHovered(cursorX, star.y) && star.isOn) {
      star.trigger();
    }
  }
  
   //INSTRUCTIONS
    fill(90);
    noStroke();
    ellipse(15, height-15, 15);
    fill(242, 233, 245);
    textSize(12);
    text("i", 14, height-10);
    if (mouseX > 7.5 && mouseX < 22.5 && mouseY > height-22.5 && mouseY < height-7.5) {
      fill(209, 229, 250);
      strokeWeight(3);
      stroke(10, 21, 36);
      rect(25, 15, 550, 350, 20);
      fill(23, 40, 56);
      noStroke();
      textSize(32);
      textFont(cursivefont);
      text("Instructions", 220, 70);
      textSize(18);
      textFont(regularfont);
      text("- Click on a star to turn it on.", 50, 110);
      text("- Use the buttons to toggle on/off the drums.", 50, 147);
      text("- Clear the screen using the clear button.", 50, 190);
      text("- Control Tempo using + and - buttons.", 50, 230);
      text("- Use keys 1, 2, 3, 4 to play chords.", 50, 270);
      text("- Use the arrow buttons to change between the scales.", 50, 310);
      textFont(cursivefont);
      text("Current Scale:" , 230, 345);
      text( currentScale[0] , 350, 345);  
    }
  
}
​
//turn the stars on/off 
function mousePressed() {
  for (let star of stars) {
    if (star.isHovered(mouseX, mouseY)) {
      star.toggle();
    }
  }
  
  //update connections after each toggle
  updateAllConnections();
}
​
//Star class
class Star {
  constructor(x, y, note) {
    this.x = x;
    this.y = y;
    
    this.note = note; 
​
    this.size = 4;
    this.Onsize = 7;
    this.isOn = false; 
    this.connectedStar = null; //reference to nearest "on" star
  }
​
  display() {
    //brighter color and bigger size for the stars that are "on"
    noStroke();
    fill(this.isOn ? color(209,240,250) : color(186,213,222));
    ellipse(this.x, this.y, this.isOn ? this.Onsize : this.size); 
  }
​
  toggle() {
    //toggle the state
    this.isOn = !this.isOn;
    
    //if toggled "off", remove the connection
    if (!this.isOn) {
      this.connectedStar = null;
    }
  }
​
  trigger() {
    // if star is on and the cursor passes over, play sound
    synth.triggerAttackRelease(this.note, "16n");
  }
​
  isHovered(x, y) {
    // check if cursor or mouse is over the star 
    return dist(this.x, this.y, x, y) < this.size;
  }
​
  findNearestOnStar() {
    let nearestDist = Infinity;
    let nearestStar = null;
​
    //find the narest "on" star
    for (let otherStar of stars) {
      if (otherStar !== this && otherStar.isOn) {
        let d = dist(this.x, this.y, otherStar.x, otherStar.y);
        if (d < nearestDist) {
          nearestDist = d;
          nearestStar = otherStar;
        }
      }
    }
​
    // set the nearest "on" star as the connected star
    this.connectedStar = nearestStar;
  }
​
  drawConnections() {
    if (this.isOn && this.connectedStar) {
      // draw a line connecting this star to the nearest "on" star to create the constellations
      stroke(186,213,222); 
      strokeWeight(1); 
      line(this.x, this.y, this.connectedStar.x, this.connectedStar.y);
    }
  }
}
​
function updateAllConnections() {
  for (let star of stars) {
    if (star.isOn) {
      star.findNearestOnStar();
    }
  }
}
​
function updateStarNotes() {
//this function is used to update the notes of the stars when the scale is changed
  let i = 0;
  for(let star of stars){
    star.note = currentScale[i++ % currentScale.length];
  }
  
}
​
// Toggle snare
function toggleSnare() {
  if (!isSnareOn) {
    snareEventId = Tone.Transport.scheduleRepeat((time) => {
      snarePlayer.start(time);
    }, '1m');
    snareButton.style('background-color', 'lightgray');
  } else {
    Tone.Transport.clear(snareEventId); //clear only the snare event
    snareButton.style('background-color', '');
  }
  isSnareOn = !isSnareOn;
}
​
// Toggle hi-hat 
function toggleHihat() {
  if (!isHihatOn) {
    hihatEventId = Tone.Transport.scheduleRepeat((time) => {
      hihatPlayer.start(time);
    }, '1m');
    hihatButton.style('background-color', 'lightgray');
  } else {
    Tone.Transport.clear(hihatEventId); //clear hi-hat event
    hihatButton.style('background-color', '');
  }
  isHihatOn = !isHihatOn;
}
​
// Toggle kick part
function toggleKick() {
  if (!isKickOn) {
    kickEventId = Tone.Transport.scheduleRepeat((time) => {
      kickPlayer.start(time);
    }, '1m');
    kickButton.style('background-color', 'lightgray');
  } else {
    Tone.Transport.clear(kickEventId); // clear only the kick event.
    kickButton.style('background-color', '');
  }
  isKickOn = !isKickOn;
}
​
function clearScreen() {
  for(let star of stars){
    if(star.isOn){
      star.toggle();
    }
  }
}
​
//define functions to increase and decrease tempo
function increaseTempo() {
  Tone.Transport.bpm.value += 10;
}
​
function decreaseTempo() {
  Tone.Transport.bpm.value -= 10;
}
​
//functions to switch between scales
function increaseScale() {
  if(currentScaleIndex < 11){
    currentScale = majorScales[++currentScaleIndex];
  }else {
    currentScaleIndex = 0;
    currentScale = majorScales[currentScaleIndex];
  }
  updateStarNotes();
}
​
function decreaseScale() {
  if(currentScaleIndex > 0){
    currentScale = majorScales[--currentScaleIndex];
  }else {
    currentScaleIndex = 11;
    currentScale = majorScales[currentScaleIndex];
  }
  updateStarNotes();
}
​
​
function keyPressed(){
  if(keyCode == 49){
    let currentChord = chords1[currentScaleIndex];
    chordSynth.triggerAttackRelease(currentChord, "8n");
    moonState = 0;
  }
    if(keyCode == 50){
    let currentChord = chords2[currentScaleIndex];
    chordSynth.triggerAttackRelease(currentChord, "8n");
    moonState = 1;
  }
    if(keyCode == 51){
    let currentChord = chords3[currentScaleIndex];
    chordSynth.triggerAttackRelease(currentChord, "8n");
    moonState = 2;
    thunderState = 1;
  }
    if(keyCode == 52){
    let currentChord = chords4[currentScaleIndex];
    chordSynth.triggerAttackRelease(currentChord, "8n");
    moonState = 3;
  }
}
Cookies

Sketch Files

Console

Preview
