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のまとめが終わりました。
とりあえずコードを上げましたが、ごちゃごちゃしてるし、説明不足な部分も多い気がするのでちょいちょい追記はしていきたい。