テックとアートでプログラミング入門、ホテルに泊まって驚いた件、スマートニュースの新たな資金調達

> 2021年9月27日 テック企業に転職しよう vol.3
> テックとアートでプログラミング入門
> ホテルに泊まって驚いた件
> スマートニュースの新たな資金調達

ども。たいろーです。
今日も、voicyで話した内容の補足をしていきます。

■ テックとアートでプログラミング入門

この回で僕は、『ジェネラティブアート』について軽く触れました。

まったくプログラミングに触れたことがない文系サラリーマンがまず手習い程度に始めるなら何が良いのか？と聞かれたら、今の僕であれば「ジェネラティブアートは最初の一歩として最適なのでは？」と答えます。

なぜなら、下記の「p5.js」というサイトを使えば、ブラウザ上でコードをいじりならが絵を描画することができ、コンピューターの動作を直感的に理解できるからです。

home | p5.js

簡単にサンプルを解説しますね。上記のp5.jsを開いて、左にあるEditorをクリックしてみてください。

下記の超シンプルなコードを画面左側のコード欄にコピペして再生ボタンを押してみてください。それだけで、画面右側にある白いキャンパスの上にカラフルな点描画をコンピューターに自動で描かせる事ができます。

p5.jsのEditorの左側には、あらかじめ2つの関数、function setup()と、function draw()が設定されています。ざっくり説明すると、前者のブロックは設定情報の定義を書いておく所で、画面が開く度に1度だけ読み込まれます。一方、後者のブロックは1秒間に60回、処理を繰り返し読み込みます。

var pX,pY,mX,mY; //4つ変数を宣言

function setup() {
  createCanvas(500, 500); //500 x 500のキャンバスを生成
  background(255); //背景を白く塗りつぶす
  pX=200;
  pY=200;
  
  colorMode(HSB); //座標によって色を変えるモード
}

function draw() {
  stroke(pY,100,100); //円の縁の色を決定
  ellipse(pX,pY,1);   //円の初期位置(pX,pY)と大きさを指定
  
  mX = random(-6,6);  //乱数mXを生成
  mY = random(-6,6);  //乱数mYを生成
  
  pX = pX + mX; //円の初期位置mXに乱数mXを足す
  pY = pY + mY;　//円の初期位置mYに乱数mYを足す
}

上記のコードをそのままコピペしてみると、ellipse()関数で初期位置とサイズが定義された小さな円が、-6から6の範囲でランダムに生成された乱数によって毎秒60回描画され、位置が徐々に動いていく様子が見れるはずです。

funcsion setUp() のブロックにはcolorMode(HSB)が定義されているので、キャンパスはあらかじめ座標ごとに特定の色がグラデーション上に設定されており、円はその位置によって色が変わるように振る舞います。

実行すると下記のような感じになるはずです。キャンパス上の円がランダムウォークすることで、まるで生きているかのように見えて楽しいですよ。

こちらのコードは、youtubeでジェネラティブアートについて解説している『あしべ数学教師』さんのチャンネルから引用したものを、少しだけ改変しただけです。

これをきっかけにジェネラティブアートに興味をもった方は、下記の書籍を参照してみてください。自分だけの視覚表現を、プログラミングに生成させるためのサンプルが豊富です。

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

さて、ここからはプライベートな内容を含むのでマガジン限定にしますね。

ーーーーーーーー