8回目のp5.js

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

function draw() {
  background(0,0,0);
  let n = noise(frameCount / 100);
  
  let d=map(n,0,1,100,200);
  let h=map(n,0,1,150,250);
  
  strokeWeight(3);
  stroke(random(360),100,100);
  fill(h%360,100,100);
  ellipse(mouseX-100,mouseY,d,d);
  let s=random(100,200);
  fill(s,100,100);
  ellipse(mouseX+100,mouseY,s);
}

noiseとrandomの違い。 noiseが左でrandomは右。だいぶ違う。

let r = 5;

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

function draw() {
  background(220);
  // let n=noise(frameCount/100);
  // print(n);
  // rect(50,50,100,n*200);

  push();
  translate(0, height / 2);
  for (let x = 0; x < width; x = x + 5) {
    y = noise(x / 100, frameCount / 100); //1つ目は劇的か緩やかか、2つ目はスピードが早いか遅いか
    y2 = map(y, 0, 1, -height / 2, height / 2);
    c = map(y, 0, 1, 0, 360);
    
    stroke((c+90)%360,100,100);
    fill(c, 100, 100);
    ellipse(x, y2, r, r);
  }
  pop();
}

let h;//takasa
let hh;//takasa2
let r = 50;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  h = 50;
  textAlign(CENTER);
  angleMode(DEGREES);
}

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

  push();
  translate(width / 2 - 30, width / 4 * 3);

  //graph
  let r1=random(5);
  let r2=random(2);
  randomSeed("Japan");
  h = noise(frameCount * r1 / r2 / 1000);
  let h2 = map(h, 0, 1, 0, -250);
  let c = map(h, 0, 1, 200, 360);
  fill(c, 100, 100);
  rect(-50 / 2, 0, 50, h2);

  randomSeed("France");
  let r3=random(5);
  let r4=random(2);
  hh = noise(frameCount * r3 / r4/ 1000);
  let hh2 = map(hh, 0, 1, 0, -250);
  let c2 = map(hh, 0, 1, 200, 360); //ここhhのはずだったのにhでした（修正：2018/11/14）
  fill(c2, 100, 100);
  rect(-50 / 2 + 250 / 2, 0, 50, hh2);

  //line
  stroke(45, 100, 100);
  line(-width / 2, 0, width / 2 + 30, 0);
  line(-width / 2, -250, width / 2 + 30, -250);
  line(-100, 0, -100, -250);

  //persentage
  for (let i = 0; i < 101; i = i + 10) {
    i2 = map(i, 0, 100, 0, -250);
    strokeWeight(1);
    line(-125, i2, width / 2 + 30, i2);
    fill(45, 100, 100);
    strokeWeight(0);
    text(i, -115, i2);
  }
  text("(%)", -115, 20);

  //Japan flag
  rectMode(CENTER);
  fill(0, 0, 100);
  noStroke();
  ellipse(0, 50, r, r);
  fill(0, 100, 100);
  ellipse(0, 50, r - 20, r - 20);
  //France flag
  fill(0, 0, 100);
  rect(125, 50, r / 3, r);
  fill(250, 100, 100);
  rect(125 - r / 3, 50, r / 3, r);
  fill(0, 100, 100);
  rect(125 + r / 3, 50, r / 3, r);

  pop();
}

2018/10/28の山形一生さんのLIVEの内の一つに近づけられるように頑張ってみました。（国旗も数字も意味はない。けれどあるだけで見る人が勝手に意味をつける、というのが心に残ってる）
www.youtube.com これの1:55ごろから始まります。
あのグラフと不協和音の恐怖感は未だに残ってる…。確かrandomを使用していたと思うのですが、noiseなしに滑らかに変化していく数字を考えられなかった。でも、今回は思った通りのプログラミングができて嬉しい。
数週間前からブログの一番下にTwitterを表示させてます。横に表示したいのでテーマ変えたい。