10回目のp5.js

音とフォントを使ったプログラミング

音を使ったプログラミングで、sketch fileに音声を入れてます。

音が1度だけ流れるプログラム

https://editor.p5js.org/yetirom/sketches/S1qRJxKAX

let sound;

function preload() {
  sound = loadSound("jingle.mp3");
  //  loadFont  //フォント読み込みはこれ
}

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  // sound.loop();
  sound.play();//一回だけ
}

function draw() {
  // background(0,0,0);
}

１～４のキーをタイプした時に対応する音が流れる
sketch file内にファイルを作り音を呼び出す

https://editor.p5js.org/yetirom/sketches/B1Z9_xtAX

let sound1;
let sound2;
let sound3;
let sound4;
let x = 0;
let y = 0;

function preload() {
  sound1 = loadSound("asset/tap.wav");
  sound2 = loadSound("asset/grab.wav");
  sound3 = loadSound("asset/click.wav");
  sound4 = loadSound("asset/tap.wav");
}

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  // sound3.loop();
  // sound4.loop();
}

function draw() {
  background(220);
}

function keyTyped() {
  if (key == "1") {
    sound1.play();
    fill(90, 100, 100, random(50, 100));
    ellipse(random(width), random(height), random(10), random(10));
  }
  if (key == "2") {
    sound2.play();
    fill(random(90, 180), 100, 100);
    ellipse(random(width), random(height), random(10), random(10));
  }
  if (key == "3") {
    sound3.play();
    fill(random(180, 180 + 90), 100, 100, random(50, 100));
    ellipse(random(width), random(height), random(10), random(10));
  }
  if (key == "4") {
    sound4.play();
    fill(random(180 + 90, 360), 100, 100, random(50, 100));
    ellipse(random(width), random(height), random(10), random(10));
  }
}

font

let font;

function Preload() {
  font = loadFont("a.ttf");
}

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  textFont(font);
}

function draw() {
  background(0, 0, 0);

  textAlign(CENTER, CENTER);
  textSize(50);
  fill(frameCount % 360, 100, 100);
  textLeading(50); //行間詰め
  strokeJoin();
  text("Hello\np5.js\n", width / 2, height / 2);
}

課題で制作したもの。ノスタルジアという音ゲーがすごく好きな時期だったのでピアノ作りたかった。

let pianoC;
let pianoD;
let pianoE;
let pianoF;
let pianoG;
let pianoA;
let pianoB;
let pianoC2;
let font;
let h;
let w = 50;
let r = 10;

function preload() {
  pianoC = loadSound("pianoC.mp3");
  pianoD = loadSound("pianoD.mp3");
  pianoE = loadSound("pianoE.mp3");
  pianoF = loadSound("pianoF.mp3");
  pianoG = loadSound("pianoG.mp3");
  pianoA = loadSound("pianoA.mp3");
  pianoB = loadSound("pianoB.mp3");
  pianoC2 = loadSound("pianoC2.mp3");
  font = loadFont("Playball-Regular.ttf");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);

  pianoC.setVolume(0.5);
  pianoD.setVolume(0.5);
  pianoE.setVolume(0.5);
  pianoF.setVolume(0.5);
  pianoG.setVolume(0.5);
  pianoA.setVolume(0.5);
  pianoB.setVolume(0.5);
  pianoC2.setVolume(0.5);
  textFont(font);
  h = width / 8;

  fill(0, 0, 100);
  textAlign(CENTER);
  textSize(70);
  text("Piano", width / 2, height / 4);
}

function draw() {
  fill(0, 0, 0, 5);
  noStroke();
  rect(0, height / 2 - 50, width, height);

  stroke(0, 0, 100);
  line(0, height / 2 - 20, width, height / 2 - 20);
  line(0, height / 2 - 10, width, height / 2 - 10);
  line(0, height / 2, width, height / 2);
  line(0, height / 2 + 10, width, height / 2 + 10);
  line(0, height / 2 + 20, width, height / 2 + 20);
  push();
}

function keyTyped() {
  //ド
  if (key == "s") {
    pianoC.play();
    push();
    translate(0, height - w);
    fill((360 / 7)*0, 100, 100);
    noStroke();
    rect(0, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7)*0, 100, 100);
    ellipse(h / 2, height / 2 + 30, r, r);
  }

  //レ
  if (key == "d") {
    pianoD.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 1, 100, 100);
    noStroke();
    rect(0 + h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 1, 100, 100);
    ellipse(h * 2 - h / 2, height / 2 + 25, r, r);
  }

  //ミ
  if (key == "f") {
    pianoE.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 2, 100, 100);
    noStroke();
    rect(0 + 2 * h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 2, 100, 100);
    ellipse(h * 3 - h / 2, height / 2 + 20, r, r);
  }

  //ファ
  if (key == "g") {
    pianoF.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 3, 100, 100);
    noStroke();
    rect(0 + 3 * h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 3, 100, 100);
    ellipse(h * 4 - h / 2, height / 2 + 15, r, r);
  }

  //ソ
  if (key == "h") {
    pianoG.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 4, 100, 100);
    noStroke();
    rect(0 + 4 * h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 4, 100, 100);
    ellipse(h * 5 - h / 2, height / 2 + 10, r, r);
  }

  //ラ
  if (key == "j") {
    pianoA.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 5, 100, 100);
    noStroke();
    rect(0 + 5 * h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 5, 100, 100);
    ellipse(h * 6 - h / 2, height / 2 + 5, r, r);
  }

  //シ
  if (key == "k") {
    pianoB.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 6, 100, 100);
    noStroke();
    rect(0 + 6 * h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 6, 100, 100);
    ellipse(h * 7 - h / 2, height / 2, r, r);
  }

  //ド＋
  if (key == "l") {
    pianoC2.play();
    push();
    translate(0, height - w);
    fill((360 / 7) * 7, 100, 100);
    noStroke();
    rect(0 + 7 * h, 0, h, w);
    pop();
        strokeWeight(3);
    stroke((360 / 7) * 7, 100, 100);
    ellipse(h * 8 - h / 2, height / 2 - 5, r, r);
  }
}