記録

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

7回目のp5.js

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  rectMode(CENTER);
  background(0, 0, 0);
}

function draw() {
  fill(0, 0, 0, 1);
  fill(30, 80, 100);
  noStroke();
  push();
  translate(200, 200);
  rotate(frameCount * 0.05 % 360);
  fill(random(360), 0, random(100));
  rect(30, 0, 10, 1);
  rect(-60, 0, 20, 2);
  rect(0, 100, 3, 30);
  rect(0, -150, 4, 40);
  pop();
}

これは授業で作ったものをさっきちょっと変えたやつ。
色付きよりモノクロのほうがかっこよかったので変更したり、ellipseよりrectのほうがかっこよかったので変更。

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

function draw() {
  push();
  translate(width / 2, height / 2);
  rotate(frameCount % 360);
  fill(frameCount % 360, 80, 100, random(20));
  noStroke();
  rectMode(CENTER);
  arc(0, 0, 50, 50, 0, random(5));
  text("TIRE", 100, 0);
  pop();

  fill(0, 0, 0, 1);
  text("Tire", 20, 20);
}

これは課題にしようかと思ってたけど変えたもの。タイヤみたいにできそうだと思った。

↑キーボードで文字を打つ必要があります、打った文字がくるくる回って謎のマークを作ります。

let i = 0;
let c = 0;
let y = 0;
let key1 = false;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);
  c = random(360);
  y = random(height / 2);
}

function draw() {
  if (key1 = true) {

    push();
    translate(width / 2, height / 2);
    rotate(360 / 180 * i);
    textSize(random(30));
    fill(c + random(100), 100, 100, 50);
    text(key, 0, y);
    pop();
    i = i + 1;
  }
  
  if (i > 180) {
    y = random(height / 2);
    i = 0;
    key1=false;
  }

  if (keyIsPressed) {
    key1 = true;
  }
}

「移動させる」「回る」が課題だったのでなんとなく中央配置が多かったなぁと並べて思いました。