yoppa.org

前橋工科大学デザイン基礎演習 II 2021

課題制作のためのサンプルとヒント

次週の講評会の参考になるようなヒントとサンプルプログラムを掲載します。コピー&ペーストしたり、OpenProcessingでforkしたりして、活用してください。

最終課題 「くりかえしと乱数」

  • くりかえし (for文) と乱数 (random) を用いて、色と形で表現してください
  • プログラムはp5.jsを用いて、OpenProcessingに投稿
    • 必ずタイトルをつける
    • DESCRIPTION欄に、学籍番号と氏名
    • TAGS欄に mitdwsb221final をつけるようにしてください

Visual Studio Codeでp5.jsの開発をする場合は以下のテンプレートを活用してください。

サンプル

基本形: ランダムな位置に円を描く

  • カラーモードをHSBにして直感的に指定できるように
  • 位置 (x, y) をそれぞれランダムな値に

https://openprocessing.org/sketch/1299973

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0);
  noStroke();
  for (let i = 0; i < 100; i++) {
    fill(random(200, 240), 90, 90, 50);
    circle(random(width), random(height), random(height/100, height/5));
  }
}

基本形のバリエーション: たくさんの四角形

  • 円 (circle) の代わりに四角形 (rect) に
  • 色相の範囲を変化させている

https://openprocessing.org/sketch/1299974

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0);
  noStroke();
  rectMode(CENTER);
  for (let i = 0; i < 100; i++) {
    fill(random(0, 40), random(50, 100), random(50, 100), 50);
    rect(random(width), random(height), random(height/100, height/5), random(height/100, height/5));
  }
}

応用1 : ランダムの幅を調整、左右で描き分ける

  • x軸のランダムな位置の範囲を調整
    • 矩形を左半分に
    • 円を右半分に
  • for文 (くりかえし) を2回行って、左右に描き分ける

https://openprocessing.org/sketch/1299987

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0);
  noStroke();
  rectMode(CENTER);
  for (let i = 0; i < 300; i++) {
    fill(random(0, 40), random(50, 100), random(50, 100), 50);
    rect(random(width / 2), random(height), random(height / 100, height / 10), random(height / 100, height / 10));
  }
  for (let i = 0; i < 300; i++) {
    fill(random(220, 240), random(50, 100), random(50, 100), 50);
    circle(random(width / 2, width), random(height), random(height / 100, height / 10));
  }
}

応用2 : 位置によって大きさを変化させる

  • 縦方向 (y軸) の位置によって、大きさを変化させる
  • 下に行くほど大きくなる

https://openprocessing.org/sketch/1299997

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0);
  noStroke();
  rectMode(CENTER);
  for (let i = 0; i < 800; i++) {
    let x = random(width);
    let y = random(height);
    fill(random(220, 240), random(50, 100), random(50, 100), 50);
    circle(x, y, y*0.1);
  }
}

応用 3 : 色相と明るさを座標で変化

  • HSB (色相・明度・彩度) の値を、座標(x, y)の値で変化させてみる
  • 位置によって変化する色合い
  • 数や大きさの設定によっても印象はガラっと変わる!

https://openprocessing.org/sketch/1300004

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(0);
  noStroke();
  rectMode(CENTER);
  for (let i = 0; i < 10000; i++) {
    let x = random(width);
    let y = random(height);
    fill(random(x * 0.2), 70, 80, y * 0.15);
    circle(x, y, random(width/100));
  }
}