プログラミングでアートだったりデザインを作ることを
『クリエイティブコーディング』と言うそうで、

いろんな実現方法があるのですが、

その中でも最もとっかかりやすいと思っている『P5.js』を使って遊んでみることにします。

　
『P5.js』・・『Processing(プロセッシング)』を『JavaScript(ジャバスクリプト)』で扱いやすくしたライブラリ
　
『Processing』・・MITラボで開発された、アーティストやデザイナー向けのプログラミング言語。(『Java』がベース))
　　

『Java(ジャバ)』と『JavaScript(ジャバスクリプト)』は、

名前は似ているけれどメロンとメロンパンくらい違うと言われたりします。(要はまったく別の言語です。)

今回扱う『P5.js』は『JavaScript(ジャバスクリプト)』で、
グーグルクロムなどのブラウザで動く方、と思っていればOKです。

アオキ

だいぶはしょって説明しているので、細かい仕様は『P5.js』のリファレンスを参照ください。

『P5.js』リファレンス

遊ぶようにプログラミングできる『P5.js』 まずは基本から setupとdraw

『P5.js(ProcessingのJavaScript版)』にはグーグルクロムなどのブラウザ上でプログラミングができる、

Webエディタがあります。

『P5.js』Webエディタ

Webエディタ上で試すのもよし、

『HTML』ファイルと『JavaScript』ファイルをつくって試すこともできます。

『HTML』で作る場合は、

『P5.js(ProcessingのJavaScript版)』を読み込んでから、『JavaScript』側で実際の動作を作っていきます。

まずは『P5.js』で円を書いてみることにします。

See the Pen
p5.js ellipse by aoki_monpro (@suica)
on CodePen.

『JavaScript』側の説明ですが、

setup () と draw() という2つの関数があります。

• setup() ・・初期設定
• draw()・・実際の描画

draw関数の中で描かれる内容が1フレーム(パラパラ漫画1枚)になり、

設定を変えない限りは、 1秒間に60回draw関数が実行されます。

アオキ

60FPSですね。

参考

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

 

3 Pockets

【線形代数】とは 機械学習、3D表現、VR/AR/MRなどに使われる数学〜膨大なデータを...

https://coinbaby8.com/linear-algebra.html

パソコンやスマホの高性能化と、超高速通信『5G』の到来で、『AI』『機械学習』『xR』(VR/AR/MRをまとめてXRと呼びます)『IoT』『ドローン』『自動運転』『ビッグデータ』『動画』といった新しい分野がどんどん増えてくると予想されています。参考記事これらに共通するのはざっくり言えば、とにかくたくさんのデータを瞬時に計算しているという事。どれくらいたくさんのデータかというと・・・動く映像に関する用語・・フレームレート普段からゲームで遊ぶ人なら知っているかもですが、動画や動く映像に関する用語に、『FPS』という言...

setup関数側

• createCanvas() ・・ 描画範囲作成(x、y)

引数でxとyを指定します。

xは横、yは縦なんですが、

yは一番上が0で、下に行くほど値が増えるようになっています。

draw関数側

• background() ・・背景色
• ellipse()・・だ円・・引数は(x, y, 横幅、縦幅)

circle()という正円を描く関数もありますが、横幅、縦幅を変えられないので、
ellipse()の方が使いやすいかなと思います。

遊ぶようにプログラミングできる『P5.js』 『変数』を作って動かしてみる

draw()関数の中の処理は、

フレームレートを変えなければ、1秒間に60回も実行されるのですが、

60回実行されたところで、

draw()関数の中身に変化がないと、なにも変わっていないように見えます。

例えばボールを横に移動させようとするなら、

x座標の位置を少しずつ変えていく必要があります。

『変数』を作ることで、

ちょっとずつX座標が変わるようにすればOKです。

See the Pen
p5.js translate-move-x by aoki_monpro (@suica)
on CodePen.

今回は、初めに

let posX = 0;

と書いて、変数『posX』をつくっています。

アオキ

変数の名前はなんでもいいんですが、できるだけ読んで意味がわかるようにした方がいいです。

アオキ

posXはpositionXの略で、Xの位置を表しています。

だ円をつくる ellipse()関数のx座標を決める位置に『posx』とつけています。

  ellipse(posX,100,30,30);

その後、下記のように書くことで、『posX』を1ずつ増やしています。

  posX += 1;

『posX』がどんどん増えると画面から見えなくなってしまうので、
画面端(今回は200px)になったら0に戻すようにしています。

  if(posX > 200){
    posX = 0;
  }
}

遊ぶようにプログラミングできる『P5.js』まとめ

最近世界中で『STEAM』教育が熱を帯びています。

プログラミングとデザインやアートを同時に、

しかも遊ぶようにつくれるということで、

『P5.js(ProcessingのJavaScript版)』などを使った『クリエイティブコーディング』は

これからますます人気が出てくるんじゃないかなと思います。

アオキ

やろうと思えばどんどん格好いいデザインがつくれるようになるので、

アオキ

数学や物理もおりまぜつつ、

アオキ

ちょっとずつ記事にしていきたいと思います。

Generative Design with p5.js – [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

created by Rinker

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

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

created by Rinker

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

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

アオキ

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