記録

勉強したことに関するのノート。見返して分かるようにしてます。

整列を使ってランダム表示をする

初めに整列の箱を作った後、箱内をランダムに混ぜる。
そして、ぐちゃぐちゃに混ざった箱を0から順番に左上から右へ、下へ並べていく。

let img = []; //images box
let num = 0; //image box number
let offset; //空白
let sell; //一人分の大きさ
let date;
let frame;

function setup() {
  createCanvas(windowHeight, windowHeight);
  shuffle(img, true);
}

function preload() {
  img[0] = loadImage("0.png");
  img[1] = loadImage("1.png");
  img[2] = loadImage("2.png");
  img[3] = loadImage("3.png");
  img[4] = loadImage("4.png");
  img[5] = loadImage("5.png");
  img[6] = loadImage("6.png");
  img[7] = loadImage("7.png");
  img[8] = loadImage("8.png");
  img[9] = loadImage("9.png");
  img[10] = loadImage("10.png");
  img[11] = loadImage("11.png");
  img[12] = loadImage("12.png");
  img[13] = loadImage("13.png");
  img[14] = loadImage("14.png");
    img[15] = loadImage("15.png");
}

function draw() {
  background(255);
  offset = 20;
  sell = (width - (offset * 2)) / 4;

  for (y = offset; y < width - (offset * 2); y = y + sell) {
    for (x = offset; x < height - (offset * 2); x = x + sell) {
            image(img[num % 16], x, y, sell, sell);
            num = num + 1;
    }
  }
    
 //枠
  noFill();
  stroke("#dab300");
  strokeWeight(20);
  rect(0, 0, width, height, 10);
    
  noLoop();
}

//クリックでシャッフル
function mousePressed() {
  shuffle(img, true);
  loop();
}

用意した画像で固定したいものがある場合、整列の箱の中に入れずに、num%(ここの数字を変える)で固定する。
(16分割の場合)変える数字は左下が0、右上が3、左下が12、右下が15。

let img = []; //images box
let num = 0; //image box number
let offset; //空白
let sell; //一人分の大きさ
let date;

function setup() {
  createCanvas(windowHeight, windowHeight);
  shuffle(img, true);
}

function preload() {
  img[0] = loadImage("0.png");
  img[1] = loadImage("1.png");
  img[2] = loadImage("2.png");
  img[3] = loadImage("3.png");
  img[4] = loadImage("4.png");
  img[5] = loadImage("5.png");
  img[6] = loadImage("6.png");
  img[7] = loadImage("7.png");
  img[8] = loadImage("8.png");
  img[9] = loadImage("9.png");
  img[10] = loadImage("10.png");
  img[11] = loadImage("11.png");
  img[12] = loadImage("12.png");
  img[13] = loadImage("13.png");
  img[14] = loadImage("14.png");
    //I want lock this image at right down 
    date = loadImage("date.png");
}

function draw() {
  background(255);
  offset = 20;
  sell = (width - (offset * 2)) / 4;

   for (y = offset; y < width - (offset * 2); y = y + sell) {
    for (x = offset; x < height - (offset * 2); x = x + sell) {
            //At 16 grid,num%16==15 is right down
      if (num % 16 == 15) {
        image(date, x, y, sell, sell);
      } else {
        image(img[num % 16], x, y, sell, sell);
      }
      num = num + 1;
    }
  }
    
 //frame
  noFill();
  stroke("#dab300");
  strokeWeight(20);
  rect(0, 0, width, height, 10);
    
  noLoop();
}

//click to shuffle
function mousePressed() {
  shuffle(img, true);
  loop();
}

大学のゼミの先生へのデジタル色紙として作りました。
正方形の画像を差し替えれば自由に使えます。


【まとめ】
shuffle(混ぜる箱の名前, true);
trueは直接箱内を混ぜる、の意味。

2020年プログラミングカレンダー

2019年の大学祭で展示した「2020年プログラミングカレンダー」のp5.jsのURLのまとめです。自分で見返すにもさかのぼるのがしんどいのと誰かの役に立てたらいいなと思っています。

当初の予定と違ったメモやコメントアウトが残ってたりしますが試行錯誤していく過程の痕跡なのでわざと残してます。

 

表紙

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

1月 正月・祝い

https://editor.p5js.org/yetirom/sketches/M2bNUgB-R

2月 バレンタイン

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

3月 ひな祭り

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

4月 桜並木の川沿い

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

5月 藤

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

6月 雨とマーメード

https://editor.p5js.org/yetirom/sketches/Vi-27eCzX

7月 海

https://editor.p5js.org/yetirom/sketches/-uYLjrn6z

8月 祭り

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

9月 十五夜と稲

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

10月 運動会

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

11月 紅葉・イチョウ

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

12月 年末

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

14・15回目のp5.js

ボタンを生成し、クリックすることで四角を描画する。

let button;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  background(random(360),100,100,10);
  button = createButton("ボタン");
  button.position(20, 20);
  button.size(100, 50);
  button.mousePressed(drawRect);
}

function draw() {
  // background(220);
}

function drawRect() {
  // fill(random(360), 100, 100);
  // text("drawRect!", random(width), random(height));
  let x = random(width);
  let y = random(height);
  let w = random(50, 100);
  let h = random(50, 100);
  let c = color(random(0,180), 100, 100, random(50,100));
  let c2 = color(random(180,360), 100, 100, random(50,100));
  fill(c);
  stroke(c2);
  rectMode(CENTER);
  rect(x, y, w, h);
  text(key,x,y);
}

スマホなど、傾きの取れる機械で見て傾けるとボールが動く(多分)

let x;
let y;
let debug = true;

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

  x = width / 2;
  y = height / 2;

  setMoveThreshold(0.01);
}

function draw() {
  background(220);

  if (debug == true) {
    text("rotationX:" + rotationX, 20, 20);
    text("rotationY:" + rotationY, 20, 40);
    text("rotationZ:" + rotationZ, 20, 60);
  }


  fill((x,y)%360, 100, 100);
  noStroke();
  ellipse(x, y, 100, 100);

  x += rotationX / 3;
  y += rotationY / 3;

  if (x < 0) {
    x = 0;
  }
  if (x > width) {
    x = width;
  }
  if (y < 0) {
    y = 0;
  }
  if (y > height) {
    y = height;
  }

}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

スマホが縦向きか横向きか認識して表示する(多分)

function setup() {
  createCanvas(windowWidth, windowHeight);
  // colorMode(HSB, 360, 100, 100, 100);
  textSize(100);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(220);
  
  if (deviceOrientation == "portrait") {
    text("縦画面", width / 2, height / 2);
  }
  if (deviceOrientation == "landscape") {
    text("横画面", width / 2, height / 2);
  } 
}

function windowResized(){
    resizeCanvas(windowWidth, windowHeight);
}

課題ではボタンをクリックすることでクッキーかチョコレートのどちらかが描画されるプログラミングを制作。

let button;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 100, 10);
  button = createButton("Click");
  button.position(0, 0);
  button.size(50, 30);
  button.mousePressed(cookies);
  angleMode(DEGREES);
}

function draw() {
}

function cookies() {
  let x = random(width);
  let y = random(height);
  let r = floor(random(100));
  textSize(random(20, 50));
  
  push();
  translate(x, y);
  if (r < 50) {
    text("🍪", 0, 0);
  }

  if (50 < r) {
    rotate(random(360));
    text("🍫", 0, 0);
  }
  pop();
}

15回目の授業では自由に制作。光をイメージしたプログラムを使った

let a = ["光", "Licht", "/", "light ", "o ", "lumiêre", "luce", "luz", "lumen"];

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);
}

function draw() {
  // let b = map(sin(frameCount * 0.01), -1, 1, 0, 100);
  blendMode(NORMAL);
  background(0, 0, 0);
  fill(0, 0, 0, 10);
  rect(0, 0, width, height);

  //光文字
  blendMode(ADD);
  textAlign(CENTER);
  for (let i = 0; i < 100; i = i + 1) {
    fill(random(20, 50), 100, 100, 40);
    textSize(random(1, 40));
    let num = floor(random(a.length));

    let x = ((random(width) + random(width) + random(width) + random(width) + random(width) + random(width) + random(width) + random(width) + random(width) + random(width)) / 10);
    let h = ((random(height) + random(height) + random(height) + random(height) + random(height) + random(height) + random(height) + random(height) + random(height) + random(height)) / 10);
    text(a[num], x, h);
  }

  //集中線
  push();
  translate(width / 2, height / 2);
  for (let i2 = 0; i2 < 360 / 18; i2 = i2 + 1) {
    textAlign(LEFT);
    textSize(random(5, 15));
    strokeWeight(random(1, 5));
    stroke(30, 100, 100, 1);
    rotate(360 / 20);
    text("――――", 110, 0);
  }
  pop();

  //文字
  textSize(10);
  fill(30, 100, 100, 50);
  text("#LightsInDark", width / 2, height - 10);
}

//マウス押したら止まる
function mousePressed() {
  noLoop();
}
//キーボード押したら再開する
function keyPressed() {
  loop();
}

===== 以上で昨年受けた授業のp5.jsのまとめが終わりました。
とりあえずコードを上げましたが、ごちゃごちゃしてるし、説明不足な部分も多い気がするのでちょいちょい追記はしていきたい。

13回目のp5.js

3Dを扱うプログラミング

function setup() {
  createCanvas(400, 400, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

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

  push();
  translate(0, sin(frameCount)*100, 0);
  rotateX((frameCount * 0.1) % 360);
  rotateY((frameCount * 0.1) % 360);
  rotateZ((frameCount * 0.1) % 360);
  rectMode(CENTER);
  fill((frameCount * 0.1) % 360, 100, 100);
  box(150);
  pop();

}
function setup() {
  createCanvas(400, 400, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

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

  push();
  translate(0, 0, 0);
  rotateX((frameCount * 0.1) % 360);
  rotateY((frameCount * 0.1) % 360);
  rotateZ((frameCount * 0.1) % 360);
  rectMode(CENTER);
  stroke((frameCount * 0.1 + 180) % 360, 100, 100);
  fill((frameCount * 0.1) % 360, 100, 100);
    
    //ここから先が図形に関するプログラム
  // box(150);
  //sphere(100,8,3);
  // plane(100,200);
  // cylinder(50,200);
   cone(50,200);
  // ellipsoid(50,100,50);
  // torus(80,10);
  pop();
}

3Dに光沢などの加工を施す

function setup() {
  createCanvas(400, 400, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

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

  let x = mouseX - width / 2;
  let y = mouseY - height / 2;

  ambientLight(0, 100, 100); //色
  pointLight(0, 0, 100, x, y, sin(frameCount) * 80); //色、光源の場所

  push();
  translate(0, 0, 0);
  specularMaterial(0,0,100);//色、つやつや
  // ambientMaterial(180, 100, 100); //色、マット
  // normalMaterial();//中には何もいれない、サイバーなものに合う
  torus(80, 20, 64, 64);
  pop();
}

課題制作

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

function draw() {
  orbitControl();
  pointLight(0, 0, 100, 0, 0, map(sin(frameCount), -1, 1, 0, 500)); //色、光源の場所
  ambientLight(0, 0, 10); //色
  rotateX(frameCount);
  rotateY(frameCount);
  rotateZ(frameCount);

  push();
  translate(random(-width / 2, width / 2), random(-height / 2, height / 2), random(-200, 200));
  specularMaterial(0, 0, 100);
  let x1 = random(10, 30);
  stroke(0, 0, 80);
  box(x1, 10, 10);
  pop();

  //if(frameCount==1000){
  //  noLoop();
  //  save();
  //}
}

12回目のp5.js

配列を使ったプログラミング
箱を作ってそれに数字や文字を入れ、それを呼び出す。

0番目の箱の文字を呼び出し、textとして表示する。

let arr = []; //箱作る

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

  arr[0] = 10; //arrの箱の0番目に10を代入する
  arr[1] = 20;
  arr[2] = 30;
  
  background(0,0,0);
  textAlign(CENTER);
  fill(0,0,100);
  textSize(50);
  text(arr[0],width/2,height/2);
}

30個箱を作り、その中に1から10までの数字を入れ、それぞれの文字を順番にtextで呼び出す。

let arr = []; //箱作る
let num = 30;

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

  for (let i = 0; i < num; i = i + 1) {
    let n = floor(random(1, 11));
    arr[i] = n;
  }
  textAlign(CENTER);
  text(arr, width / 2, height / 2);
}

0~3の箱にx,yを入れ、function moveでxとyの値を変化させ、丸を動かす。

let x = [];
let y = [];
let r = 5;

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

  x[0] = random(width);
  y[0] = random(height);

  x[1] = random(width);
  y[1] = random(height);

  x[2] = random(width);
  y[2] = random(height);
}

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

  move();
  display();

}

function move() {
  x[0] = x[0] + random(-1, 1) * 1;
  y[0] = y[0] + random(-1, 1) * 1;

  x[1] = x[1] + random(-1, 1) * 2;
  y[1] = y[1] + random(-1, 1) * 2;

  x[2] = x[2] + random(-1, 1) * 3;
  y[2] = y[2] + random(-1, 1) * 3;
}


function display() {
  stroke(0, 0, 100);
  noFill();
  ellipse(x[0], y[0], r, r);
  ellipse(x[1], y[1], r, r);
  ellipse(x[2], y[2], r, r);
}

x=[1]など、一つ一つ人力で入れるのではなく、for文で入れていく。それにより自由に丸の量を変化させたり、箱の種類を増やすことができる。

let x = [];
let y = [];
let num = 100;

let c = [];
let r = [];
let a = [];

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 20);
  
  for (let i = 0; i < num; i = i + 1) {
    x[i] = random(width);
    y[i] = random(height);
    c[i] = random(360);
    r[i] = random(5, 50);
    a[i] = random(100);
  }
}

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

  move();
  display();
}

function move() {
  for (let i = 0; i < num; i = i + 1) {
    x[i] = x[i] + random(-1, 1) * 2;
    y[i] = y[i] + random(-1, 1) * 2;
  }
}

function display() {
  for (let i = 0; i < num; i = i + 1) {
    stroke(c[i], 100, 100,a[i]*2);
    fill((c[i] + 180) % 360, 100, 100,a[i]);
    ellipse(x[i], y[i], r[i], r[i]);
  }
}

課題で制作したちょうちょがたくさん飛ぶ

let x = [];
let y = [];
let num = 70;

let c = [];
let r = [];
let r2 = [];
let a = [];

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

  for (let i = 0; i < num; i = i + 1) {
    x[i] = random(width);
    y[i] = random(height);
    c[i] = random(360);
    r[i] = random(5, 15);
    r2[i] = random(25, 35);
    a[i] = random(30,100);
  }
}

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

  move();
  display();
}

function move() {
  for (let i = 0; i < num; i = i + 1) {
    x[i] = x[i] + random(-a[i], a[i]) * 0.08;
    y[i] = y[i] + random(-a[i], a[i]) * 0.08;
  }
}

function display() {
  for (let i = 0; i < num; i = i + 1) {
    stroke(c[i], 100, 100, a[i] * 2);
    fill((c[i] + 180) % 360, 100, 100, a[i]);

    triangle(x[i], y[i], x[i] - random(r[i], r2[i]), y[i] + random(r[i], r2[i]), x[i] - random(r[i], r2[i]) * 2, y[i] - random(r[i], r2[i]) * 2);
    triangle(x[i], y[i], x[i] + random(r[i], r2[i]), y[i] - random(r[i], r2[i]), x[i] + random(r[i], r2[i]) * 2, y[i] + random(r[i], r2[i]) * 2);

    stroke(0, 0, 100, a[i]/3);
    line(x[i] * 2, y[i] * 2, -y[i] * 2, -x[i] * 2);
  }
}

11回目のp5.js

画像を使ったプログラミング

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

let img;

function preload() {
  img = loadImage("img_0003.jpg")
}


function setup() {
  createCanvas(640, 480);
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  image(img, 0, 0);

  //pressImage
  image(img, 0, 0, width / 2, height / 2);



  // fill(random(150,250),100,100,random(50))
  // ellipse(random(width),random(height),50,50);
}

マウスの位置にある色を左上に表示し、RGBと透明度の数字を表示する。

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

let img;

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  image(img, 0, 0);

  let c = img.get(mouseX, mouseY);
  fill(c);
rect(0,0,100,100);
  text(c,0,120);

}

マウスが右に行けば右に行くほど画像解像度が高くなる。

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

let img;
let num = 20;
let gridX;
let gridY;

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  // colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  image(img, 0, 0);

  num=map(mouseX,0,width,1,70); //インタラクティブ
  // num=frameCount*0.01; //自動
  
  gridX = img.width / num;
  gridY = img.height / num;

  for (let x = 0; x < img.width; x = x + gridX) {
    for (let y = 0; y < img.height; y = y + gridY) {
      let c = img.get(x, y);
      stroke(c);
      fill(c);
      rect(x, y, gridX, gridY);
      // text(c, 0, 120);
    }
  }
}

その点にある色をピックカラーで色を習得し、円のstrokeの方に着色(fillはなし)

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

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  // colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  for (let i = 0; i < 50; i = i + 1) {
    let x = random(width);
    let y = random(height);
    let c = img.get(x, y);
    let r = random(1, 5);
    stroke(c);
    noFill();
    ellipse(x, y, r, r);
  }
  // save();
  // noLoop();
}

上と同じように取った色を線に着色し、色の数値にランダム0~2度追加して傾ける。線の長さもランダムに決定する。

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

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  angleMode(DEGREES);
  // colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  for (let i = 0; i < 200; i = i + 1) {
    let x = random(width);
    let y = random(height);
    let c = img.get(x, y);
    let angle=hue(c)*random(2); //red(c),green(c),blue(c)
    let r = random(1, 20);
    
    stroke(c);
    noFill();
    
    push();
    translate(x,y);
    rotate(angle);
    strokeWeight(0.1);
    line(0,-r,0,r);
    pop();
    // ellipse(x, y, r, r);
  }
  // save();
  // noLoop();
}

課題で制作した滲むハムスター

function preload() {
  img = loadImage("hamstar.jpg");
}


function setup() {
  createCanvas(1399, 1399);
}

function draw() {
  for (let i = 0; i < 1000; i = i + 1) {
    let x = random(width);
    let y = random(height);
    let c = img.get(x, y);
    let r = random(frameCount/20);
    stroke(c);
    noFill();
    ellipse(x, y, r, r);
  }
}

画像をランダムに表示し、そのうちの1つを赤い四角で囲う

let img1;
let img2;
let img3;
let img4;
let img5;
let img6;
let img7;
let img8;
let img9;
let img10;
let pizza;
let count = 0;

let R; //ランダム値生成
let n; //分割数


function preload() {
  img1 = loadImage("1.png");
  img2 = loadImage("2.png");
  img3 = loadImage("3.png");
  img4 = loadImage("4.png");
  img5 = loadImage("5.png");
  img6 = loadImage("6.png");
  img7 = loadImage("7.png");
  img8 = loadImage("8.png");
  img9 = loadImage("hzr.png");
  img10 = loadImage("hzr2.png");
  pizza = loadImage("pizza.png");
}


function setup() {
  createCanvas(windowHeight, windowHeight);
  background(0, 0, 0);
  n = random(2, 4);
  n = floor(n);
  n = n * 2 + 1;
}

function draw() {

  for (let x = 0; x < height; x = x + height / n) {
    for (let y = 0; y < height; y = y + height / n) {
      R = random(10);
      if (R < 0.05) {
        image(pizza, x, y, height / n, height / n);
      } else {
        R = floor(R);

        if (R == 0) {
          image(img1, x, y, height / n, height / n);
        }
        if (R == 1) {
          image(img2, x, y, height / n, height / n);
        }
        if (R == 2) {
          image(img3, x, y, height / n, height / n);
        }
        if (R == 3) {
          image(img4, x, y, height / n, height / n);
        }
        if (R == 4) {
          image(img5, x, y, height / n, height / n);
        }
        if (R == 5) {
          image(img6, x, y, height / n, height / n);
        }
        if (R == 6) {
          image(img7, x, y, height / n, height / n);
        }
        if (R == 7) {
          image(img8, x, y, height / n, height / n);
        }
        if (R == 8) {
          image(img9, x, y, height / n, height / n);
        }
        if (R == 9) {
          image(img10, x, y, height / n, height / n);
        }
      }
    }
  }
  // save();
  count = count + 1;
  if (count > 10) {
    colorMode(HSB, 360, 100, 100);

    let n2 = random(n);
    let n3 = random(n);
    n2 = floor(n2);
    n3 = floor(n3);

    let x1 = height / n * n2;
    let y2 = height / n * n3;

    // rectMode(CENTER);
    noFill();
    stroke(0, 100, 100);
    strokeWeight(5);
    rect(x1, y2, height / n, height / n);

    noLoop();
  }
}

紙が焼けていく

let paper;
let a=0;

function preload() {
  peper = loadImage("paper.jpg");
}

function setup() {
  createCanvas(640, 881);
  image(peper, 0, 0);
}

function draw() {
  colorMode(HSB, 360, 100, 100, 100);
  tint(43, 50, 70, a/10);
  image(peper, 0, 0);
  // print(a); 
  a=a+0.1;
  if (a > 50) {
        textAlign(CENTER);
        textSize(40);
        fill(0,0,0);
        text("END",width/2,height/2);
    noLoop();
  }
}

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);
}

1~4のキーをタイプした時に対応する音が流れる
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);
  }
}