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