p5.jsドリル

99-01 アート１

Posted on by yuichi

アートに挑戦しよう！

例題99-1-1

円を描く

コード

function setup() {
  createCanvas(600, 400);
  background(255);
}

let x = 300;
let y = 200;
let r = 180;

function draw() {
  noFill();
  stroke(0, 0, 255);
  ellipse(x, y, r, r);
}

結果

aaa

例題99-1-2

円が移動する

コード

function setup() {
  createCanvas(600, 400);
  background(255);
}

let x = 300;
let y = 200;
let r = 180;

function draw() {
  noFill();
  stroke(0, 0, 255);
  ellipse(x, y, r, r);
  x = x + 1;
}

結果

aaa

練習問題99-1-2

残像が残らないようにしましょう。

結果

aaa

例題99-1-3

ランダムな円が揺れ動く

コード

function setup() {
  createCanvas(600, 400);
  background(255);
}

let x = 300;
let y = 200;
let r = 180;

function draw() {
  background(255);
  x = x + random(-4, 4);
  y = y + random(-4, 4);
  noFill();
  stroke(0, 0, 255);
  ellipse(x, y, r, r);
}

結果

aaa

例題99-1-3

カラフルな円が複数ランダムに揺れ動く

コード

function setup() {
  createCanvas(600, 400);
  background(255);
}

let x = 300;
let y = 200;
let r = 180;

function draw() {
  background(255);

  x = x + random(-5, 5);
  y = y + random(-5, 5);

  for (let i = 0; i < 10; i++) {
    noFill();
    stroke(random(255), random(255), 255);
    ellipse(x + random(-10, 10), y + random(-10, 10), r, r);
  }
}

結果

練習問題99-1-1

????

練習問題99-1-2

?????

コード

結果

これはLIGさんからもらってきました。
https://liginc.co.jp/186614