p5.js Web Editor | Stingy crocodile

xxxxxxxxxx
let ellipses = [];
let positionX;
let timebarX;
let TimeisMoving;
let octave;
let notes = ['C', 'C#','D','Eb','E','F','F#','G','G#','A','Bb','B','C',];
let keys=['a','w','s','e','d','f','t','g','y','h','u','j','k',];
​
var key1 = document.getElementById("key1");
var key2 = document.getElementById("key2");
var key3 = document.getElementById("key3");
let piano;
​
function setup() {
  
  createCanvas(1000, 300);
  
  positionX =20;
  timebarX=10;
  TimeisMoving=false;
  octave=4;
  
  
  piano = new Tone.Sampler({
      urls: {
        C4: "C4.mp3",
        "D#4": "Ds4.mp3",
        "F#4": "Fs4.mp3",
        A4: "A4.mp3",
      },
      release: 1,
      baseUrl: "https://tonejs.github.io/audio/salamander/",    }).toDestination();
  
  
  
}
​
​
function keyPressed() {
  
   for(let i=0;i<12;i++){ // controls assigning keys from c to b
if(key==keys[i]){
//synth.triggerAttackRelease(notes[i]+octave.toString(), "8n"); 
piano.triggerAttackRelease(notes[i]+octave.toString(), "4n"); 
​
}
}
  
  
  
   if(keyCode===32) {
  TimeisMoving=!TimeisMoving;
     
 }
​
  
  if (key == 'a') {
    ellipses.push({ x:  positionX, y: 195, note:'C' });
     document.getElementById('key1').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';
  
  }
  if (key == 'w') {
    ellipses.push({ x:  positionX, y: 185, note:'C#'});
     document.getElementById('key2').style.background = 'linear-gradient(#A40B0B 96%, #CA1717 4%)';
  }
  if (key == 's') {
    ellipses.push({ x:  positionX, y: 175, note:'D' });
    document.getElementById('key3').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';
  }
  
   if (key == 'e') {
    ellipses.push({ x:  positionX, y: 170, note:'E♭'});
     document.getElementById('key4').style.background = 'linear-gradient(#A40B0B 96%, #CA1717 4%)';
  }
   if (key == 'd') {
      ellipses.push({ x:  positionX, y: 165, note:'E'});
     document.getElementById('key5').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';
  
  }
   if (key == 'f') {
     ellipses.push({ x:  positionX, y: 160, note:'F'});
     document.getElementById('key6').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';}
     
   if (key == 't') {
     ellipses.push({ x:  positionX, y: 155, note:'F#'});
     document.getElementById('key7').style.background = 'linear-gradient(#A40B0B 96%, #CA1717 4%)';
  }
   if (key == 'g') {
      ellipses.push({ x:  positionX, y: 150, note:'G'});
     document.getElementById('key8').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';}
     if (key == 'y') {
      ellipses.push({ x:  positionX, y: 145, note:'G#'});
     document.getElementById('key9').style.background = 'linear-gradient(#A40B0B 96%, #CA1717 4%)';
  }
   if (key == 'h') {
     ellipses.push({ x:  positionX, y: 140, note:'A'});
     document.getElementById('key10').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';}
   if (key == 'u') {
     ellipses.push({ x:  positionX, y: 135, note:'B♭'});
     document.getElementById('key11').style.background = 'linear-gradient(#A40B0B 96%, #CA1717 4%)';
  }
   if (key == 'j') {
     ellipses.push({ x:  positionX, y: 130, note:'B'});
     document.getElementById('key12').style.background = 'linear-gradient(#E74949 96%, #CA1717 4%)';}
}
function keyReleased(){
  positionX+=20;
  if (key == 'a') {
     document.getElementById('key1').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
    
​
  }
  if (key == 'w') {
      document.getElementById('key2').style.background = ' linear-gradient(#333 96%, #525050 4%)';
  
  }
  if (key == 's') {
  document.getElementById('key3').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
  }
   if (key == 'e') {
      document.getElementById('key4').style.background = ' linear-gradient(#333 96%, #525050 4%)';
  }
  if (key == 'd') {
     document.getElementById('key5').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
}
  
    if (key == 'f') {
     document.getElementById('key6').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
}
   if (key == 't') {
      document.getElementById('key7').style.background = ' linear-gradient(#333 96%, #525050 4%)';
  }
   if (key == 'g') {
     document.getElementById('key8').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
}
   if (key == 'y') {
      document.getElementById('key9').style.background = ' linear-gradient(#333 96%, #525050 4%)';
  }
   if (key == 'h') {
     document.getElementById('key10').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
}
    if (key == 'u') {
      document.getElementById('key11').style.background = ' linear-gradient(#333 96%, #525050 4%)';
  }
   if (key == 'j') {
     document.getElementById('key12').style.background = ' linear-gradient(#fff 96%, #eee 4%)';
}
  
}
​
​
​
​
function draw() {
  background(220);
  
  for (let i = 0; i < ellipses.length; i++) {
    let ellipsePos = ellipses[i];
    push();
    fill(0,0,0);
   
    ellipse(ellipsePos.x, ellipsePos.y, 25, 15);
    pop();
    fill(255,0,0)
    textAlign(CENTER);
    textSize(16);
    text(ellipsePos.note,ellipsePos.x,ellipsePos.y);
​
    
  }
  
 
  if (TimeisMoving==true){
  timebarX+=1;
  }
  
  // push(); time bar
  // stroke(255,0,0);
  // line(timebarX,0,timebarX,100);
  // pop();
  
  
   push(); 
  stroke(0,0,0);
  line(0,165,1000,165);
   line(0,150,1000,150);
  line(0,135,1000,135);
  line(0,120,1000,120);
  line(0,105,1000,105);
  line(0,90,1000,90);
  pop();
  
  
}
​
​
​
​
Cookies

Sketch Files

Console

Preview
