9回目のp5.js

長らくブログをさぼってました。
markdownのやり方もだいぶ忘れてます。
何とかして後期に受けたProgrammingBの授業だけでもなんとか全部上げます…他にもいろいろやったことはあるけどまずはそこから頑張る。

let angle = 0;
let r;

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

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

  let x = sin(angle) * 150;
  // print(n); //n=-1~1
  translate(width / 2, height / 2);
  
  r = random(1, 11);
  if (6 < r) {
    fill(0, 100, 100);
  } else {
    fill(180, 100, 100);
  }
  noStroke();
  ellipse(x, 0, r, r);

  angle = angle + 3;
  //angle += 1;
  //angle++;
}

let r = 5;

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

function draw() {
  background(0, 0, 80);
  push();
  translate(0, height / 2);

  line(0, 0, width, 0);
  for (let x = 0; x < width; x = x + r) {
    let y = sin(x + frameCount) * 150;

    stroke(0, 0, 0);
    line(x, 0, x, y);

    fill(y + 180, 100, 100);
    // stroke(0, 0, 0, random(100));
    noStroke();
    ellipse(x, y, r, r);

  }

  pop();
}

let x;
let y;
let r;
let angle;


function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100, 100);
  x = 0;
  y = 0;
  angle = 0;
  // smooth();
}

function draw() {
  // background(0, 0, 80,5);
  push();
  translate(width / 2, height / 2);

  x = cos(angle * noise(10)) * 150;
  y = sin(angle * noise(5)) * 150;

  r = noise(frameCount*0.01);
  r2=map(r,0,1,1,30);
  fill((x + y + width * 2) % 360, 100, 100);
  noStroke();
  ellipse(x, y, r2, r2);

  angle = angle + random(3);

  pop();
}

課題として作ったのはこちら。左上に数字はランダムに発生させた数字をそのままtextで表示。この数字が変化することで線の描き方が変わり、その数字も一定時間で初期化すると同時に変更してます。

let x = 0;
let y = 0;
let angle = 0;
let r;
let plus1;
let plus2;
let p3;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
  r = height / 2 - 10;
  plus1 = random();
  plus2 = random();
  p3 = random(3,5);
  p3 = floor(p3);
}

function draw() {
  blendMode(ADD);

  x = x + 1;
  y = y + 1;

  push();
  translate(width / 2, height / 2);

  x = cos(angle * plus1) * r;
  y = sin(angle * plus2) * r;

  x2 = cos(angle * plus2) * r;
  y2 = sin(angle * plus1) * r;

  let n = noise();
  let size = map(n, 0, 1, 5, 10);

  let c = sin(frameCount / 10);
  c = map(c, -1, 1, 0, 10);
  c = floor(c);
  let c2 = map(c, 0, 10, 180, 200);

  let d = map(sin(frameCount / 10), -1, 1, 5, 10);
  let d2 = d + 20;
    
  noStroke();
  fill(c2, 100, 100);
  ellipse(x, y, d, d);
  ellipse(-x, y, d, d);
  ellipse(x, -y, d, d);
  ellipse(-x, -y, d, d);

  fill(c2, 100, 100, 10);
  ellipse(x, y, d2, d2);
  ellipse(-x, y, d2, d2);
  ellipse(x, -y, d2, d2);
  ellipse(-x, -y, d2, d2);

  fill(c2 + 100 % 360, 100, 100);
  ellipse(x2, y2, d, d);
  ellipse(-x2, y2, d, d);
  ellipse(x2, -y2, d, d);
  ellipse(-x2, -y2, d, d);

  fill(c2 + 100 % 360, 100, 100, 10);
  ellipse(x2, y2, d2, d2);
  ellipse(-x2, y2, d2, d2);
  ellipse(x2, -y2, d2, d2);
  ellipse(-x2, -y2, d2, d2);

  pop();

  fill(0, 0, 100);
  text("plus1＆plus2", 0, 20);
  text(plus1, 0, 40);
  text(plus2, 0, 60);

  angle = angle + p3;

  if (frameCount % 800 == 0) {
    // save();
    blendMode(NORMAL);
    noStroke();
    fill(0, 0, 0);
    rect(0, 0, width, height);
    x = 0;
    y = 0;
    angle = 0;
    plus1 = random();
    plus2 = random();
    p3 = random(3,5);
    p3 = floor(p3);
  }
}

課題のつもりで作ったけど没にしたコード

let x;
let y;
let r;
let angle;


function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  x = 0;
  y = 0;
  angle = 0;
}

function draw() {

  let n = random(100);
  if (n > 10) {
    blendMode(ADD);
  } else {
    blendMode(NORMAL);
  }

  // if (n > 50) {
  noStroke();
  fill(0, 0, 0, 3);
  rect(0, 0, width, height);
  // }

  push();
  translate(width / 2, height / 2);

  x = cos(angle) * 150;
  y = sin(angle) * 150;

  //追加量
  r = noise(frameCount * 0.01);
  r2 = map(r, 0, 1, 10, 50);

  //色
  let c = x + y;
  c2 = map(c, -1, 1, 0, 1);
  c3 = c2 + width;
  c4 = map(c3, 401, 501, 180, 250);

  stroke(c4, 100, 100);
  strokeWeight(1);
  line(x, y, y + r2, x + r2);
  line(y, x, x + r2, y + r2);
  
  // strokeWeight(3);
  // stroke(c4, 100, 100, 30);
  // line(x, y, y + r2, x + r2);
  // line(y, x, x + r2, y + r2);

  angle = angle + random(3);

  pop();
}