遊ぶようにプログラミングができる『クリエイティブコーディング』。

『クリエイティブコーディング』の中でも一番とっつきやすいかと始めた『P5.js(ProcessingのJavaScript版』の連続記事も今回で8記事目。

これまでに、

• 色(HSL)
• 速度・加速度
• ベクトル
• 配列
• 関数
• ランダム

などを扱ってきました。

せっかくなのでもっと色や大きさを変えてみたいと思います。

プログラミングで色や大きさを変えて遊んでみる まずは色をランダムに

まずは『配列』の記事で扱ったコードを変えていくことにします。

See the Pen
p5.js vector-array-test by aoki_monpro (@suica)
on CodePen.

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

https://coinbaby8.com/array-p5js.html

今回のお題は『配列』。『プログラミング』を始めたばかりの頃を思い出すと、『配列』をどうもうまく使いこなせなかったのですが、慣れてくるにつれ、こんなに便利なものはないなと実感します。例えばボールを1個動かすだけなら『配列』の出番はないのですが、ボールを10個、100個動かしたいと思ったら、もし『配列』を使わないと、同じコードを100回書く必要がでてきます。『配列』使わないとめっちゃ効率わるい・・・という事で、ボールを100個に増やす『配列』をつくってみたいと思います。配列をわかりやすく『ゴディバ』に例えて...

『配列』の時に扱ったコードはこちら。

let vecLocation = [];
let vecVelocity = [];
let vecAcceleration = [];
let topSpeed;


function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  
  for ( let i = 0; i < 10; i++){
  vecLocation[i] = createVector(width / 2, height / 2);
  vecVelocity[i] = createVector(random(2,5), random(-8, -2));
  vecAcceleration[i] = createVector(0, 9.8/60);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < 10; i++){

    vecVelocity[i].add(vecAcceleration[i]);
    vecLocation[i].add(vecVelocity[i]);

    fill(160, 100, 50, 100);
    ellipse(vecLocation[i].x, vecLocation[i].y, 20, 20);
    if( vecLocation[i].y + 20 > height || vecLocation[i].y - 20 < 0 ){
      vecVelocity[i].y = vecVelocity[i].y * -1;
    }
    if(vecLocation[i].x + 20 > width || vecLocation[i].x - 20 < 0 ){
      vecVelocity[i].x = vecVelocity[i].x * -1;
    }
  }
}

まずは色をランダムにしてみました。

See the Pen
p5.js random-color-scale by aoki_monpro (@suica)
on CodePen.

コードはこちら

let vecLocation = [];
let vecVelocity = [];
let vecAcceleration = [];
let topSpeed;
let col = []; // 色も配列に


function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  noStroke(); // 円周の黒線を削除
  
  for ( let i = 0; i < 30; i++){ // 0 から 30 まで
  vecLocation[i] = createVector(width / 2, height / 2);
  vecVelocity[i] = createVector(random(2,5), random(-8, -2));
  vecAcceleration[i] = createVector(0, 9.8/60);
  col[i] = color(random(255), 100, 50, 100); //色をランダムに生成
  }
}

function draw() {
  background(0);
  for (let i = 0; i < 30; i++){ // 0 から 30 まで

    vecVelocity[i].add(vecAcceleration[i]);
    vecLocation[i].add(vecVelocity[i]);

    fill(col[i]); // 色を配列で指定
    ellipse(vecLocation[i].x, vecLocation[i].y, 20, 20);
    if( vecLocation[i].y + 20 > height || vecLocation[i].y - 20 < 0 ){
      vecVelocity[i].y = vecVelocity[i].y * -1;
    }
    if(vecLocation[i].x + 20 > width || vecLocation[i].x - 20 < 0 ){
      vecVelocity[i].x = vecVelocity[i].x * -1;
    }
  }
}

位置・速度・加速度と同じように、
色の情報も、配列で使えるように宣言します。

colorという文字は、
すでに『P5.js(ProcessingのJavaScript版)』で予約されていて使えないので、
colorを省略して『col』という変数にしています。

let col = []; // 色も配列に

『setup』関数の中で、
インスタンス毎に色の情報も持たせるようにします。

  col[i] = color(random(255), 100, 50, 100); //色をランダムに生成

『draw』関数の中で実際に色を塗るのですが、

色を塗る役割の『fill』関数の引数で、配列を指定しています。

    fill(col[i]); // 色を配列で指定

もし『draw』関数の中で『color』関数を使ってしまうと、

1フレーム毎に色が変わることになりチカチカ変わって大変になってしまいます・・

アオキ

色の指定は『setup』関数内で実施しておく方がいいかなと思います。

プログラミングで大きさを変えて遊んでみる

続いて円の大きさも変えてみたいと思います。

See the Pen
p5.js random-color-scale2 by aoki_monpro (@suica)
on CodePen.

コードはこちら。

let vecLocation = [];
let vecVelocity = [];
let vecAcceleration = [];
let topSpeed;
let col = []; 
let rad = []; //半径も配列に


function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  noStroke(); 
  
  for ( let i = 0; i < 50; i++){ // 0 から 50 まで
  vecLocation[i] = createVector(width / 2, height / 2);
  vecVelocity[i] = createVector(random(2,5), random(-8, -2));
  vecAcceleration[i] = createVector(0, 9.8/60);
  col[i] = color(random(255), 100, 50, 100); 
  rad[i] = random(10, 40); //半径をここで決めておく
  }
}

function draw() {
  background(255); //背景を白にしてみる
  for (let i = 0; i < 50; i++){ // 0 から 30 まで

    vecVelocity[i].add(vecAcceleration[i]);
    vecLocation[i].add(vecVelocity[i]);

    fill(col[i]); // 色を配列で指定
    ellipse(vecLocation[i].x, vecLocation[i].y, rad[i]); //半径を指定
    if( vecLocation[i].y + 20 > height || vecLocation[i].y - 20 < 0 ){
      vecVelocity[i].y = vecVelocity[i].y * -1;
    }
    if(vecLocation[i].x + 20 > width || vecLocation[i].x - 20 < 0 ){
      vecVelocity[i].x = vecVelocity[i].x * -1;
    }
  }
}

色を変更した時と同じように、

半径も『配列』として保存させるために『変数』をつくります。
名前はなんでもいいんですが、

英語で半径を表す『Radius(ラディウス)』を省略して『rad』変数をつくっています。

let rad = []; //半径も配列に

『setup』関数の中の『for』文のなかで、半径をランダムで指定しておきます。

  rad[i] = random(10, 40); //半径をここで決めておく

『draw』関数内の『ellipse関数(だ円を描く関数)』のなかで、半径を指定しています。

ellipse(vecLocation[i].x, vecLocation[i].y, rad[i]); //半径を指定

色やサイズをばらばらにすることで、より鮮やかになってきたかなと思います。

もちろん赤やオレンジなどの同系色の中で変更するもよし、

ちょっと透明にさせるもよし。

アオキ

『HSL』だとそういう調整が簡単にできるので楽ですね。

もんプロ～問題発見と解決のためのプログラミング〜

 

1 User

7 Pockets

【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)...

https://coinbaby8.com/colormode-hsl.html

遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろん、ホームページやウェブサービス、洋服やコスメなどでも、『色』によってずいぶんと雰囲気が変わります。モノクロにしてシックにしてみたり、暖色系であったかくしてみたり、ショッキングピンクで攻めてみたり。『色』の表現範囲を表す用語として『色空間(カラースペース)』というものがあり、インターネットで使う『色空間(カラースペース)』は大きく3つあるのかなと思います。　色空間(カラースペース)　・RGB・・Red、Green、Blueの3原色・・ウェブ・テレ...

プログラミングで色や大きさを変えて遊んでみる まとめ

遊ぶようにプログラミングができる『クリエイティブコーディング』とはいえ、

ある程度の『プログラミング』の知識はどうしても必要になってしまうのですが、
下記の内容がある程度わかると、とても表現の幅が広がるんじゃないかなと思います。

• 色(HSL)
• 速度・加速度
• ベクトル
• 配列
• 関数
• ランダム

『三角関数』を使うとよりスムーズな表現もできるようになりますし、

『数学』や『物理』を知るほどに、より多彩な表現ができるようになります。

おもしろい動きや仕組みをつくるために学校の勉強を活用する、という方法も、

新しい教育の一つのカタチなのかなと思いつつ、

『プログラミング』を有効活用していけたらなと思います。

アオキ

どうせなら楽しく遊びたいもんですね〜

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

『クリエイティブコーディング』関係ではこんな記事も読まれています。

アオキ

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m