Three.jsの入門でいきなり躓いたので原因を記しておく

日本語でthree.jsの入門と検索すると上位に出てくる記事の通りに進めると、言語仕様の変更に引っかかった。
具体的にはローダーを使用したときに上手くいかなかった。

1.jsコードは分割しない

一つ目はjsファイルを分割して読み込む形式にするとインポートが上手くいかないこと。
htmlファイル内に次を挿入して本文をhtmlファイルに直接書く。

<script type="module">
//ここに本文
</script>

2.インスタンス化の方法

二つ目はクラスのインスタンス化をするときには頭にTHREE.をつけること。
例えばサンプルコードに次のような宣言があったとする。

const gltfLoader = new GLTFLoader();

これをインスタンス化の頭にはTHREE.をつけて次のようにする必要がある。

const gltfLoader = new THREE.GLTFLoader();

p5.jsの勉強になるサイト

日本語サイト

リファレンスの日本語翻訳
P5.js 日本語リファレンス - Qiita
関数別の説明が細かく載っていてとてもありがたいです。

アーティストのレオナさんのサイト
だらっと学習帳
日々のコーディングからtipsを載せてくださっています。

Katsumi Shibataさんのサイト
infosmith.biz
趣味のコーディング例を載せてくださっています。

教員をしている田所 淳さんのサイト
yoppa org
デザインの講義でp5.jsを扱った内容をそのまま載せてくださっています。

魚谷 知司さんのprocessingおよびp5.jsの入門向けのサイト
5分でアーティストになれる！Processing入門サイト|Processing Fan
他のチュートリアルでは略されがちな細かい書き方の例なども載っています。

ヒムカンパニーさんのサイト
https://himco.jp/
海外のチュートリアル記事の翻訳が多く勉強になります。

英語サイト

公式リファレンス
reference | p5.js
基本ここを参照して分からなかったら他を調べるのがベターかと思います。

HappyCoding
Happy Coding
海外のチュートリアルサイトです。exsampleから色々な例を閲覧できます。

TheCodingTrain
https://www.youtube.com/c/TheCodingTrain/featured
p5.jsをメインに使用して色々なアルゴリズムの解説をされています。

p5.jsはprocessingからの派生なので上手く見つからない場合はそちらで調べるのもいい方法ですね。
特にp5.jsかつ日本語情報になると情報発信までされている方はかなり絞られてくる印象です。

プログラミングは基本文だけではどうにもならない

プログラミングをはじめて二か月ほどで感じたこと。
どうにもならないという表現は不適切かもしれないが、入門向けのコンテンツによく挙げられるいくつかの文を覚えた段階ではハイハイをはじめた程度だと思った。
不器用な二足歩行なら基本文を駆使してもできるかもしれないが、スムーズにあるくには到底届かない。走るならなおさらだ。
じゃぁなにが必要なのかというと分野にも拠る部分も大きそうなので難しいが、p5.jsを二か月触った程度でも次のものは必須か重要なのではと感じている。

・配列とその操作に関するもの
・オブジェクトとクラス
・アルゴリズム
・高校レベルの数学知識
・各分野の専門知識

ということで基本文さえ覚えればプログラミング出来るみたいな表現はあまり真に受けてはいかんなと痛感している日々。
プログラミングは結局手段なので目的に対しての適切な知識の方も同じかそれ以上に重要だ。

p5.jsで花を描く

画像のような単純な花模様を描く。
花びら部分の曲線はbeginShapeのcurveVertexが使いやすい。
クラスの勉強を兼ねて放り込んでみる。

let theta=0;
let split;
let num=[3,5,8,13,21];
let hana1;

function setup() {
  createCanvas(400, 400);
  background(220);
  noFill();
  noStroke();
  frameRate();
  hana1=new Hana();
  split=TAU/num[Math.round(random(0,4))];
}

function draw() {
   
  translate(200,200);
  rotate(theta);

  hana1.hanabira();
  hana1.tane();

  theta+=split;
}

class Hana{
  constructor(){
  }
  hanabira(){
    const firsty=10;
    const secondx=70;
    const secondy=20;
    const thirdx=130;
    const thirdy=10;
    const topx=150;
    fill(240,240,100);

    beginShape();
    curveVertex(0,firsty);
    curveVertex(0,firsty);
    curveVertex(secondx,secondy);
    curveVertex(thirdx,thirdy);
    curveVertex(topx,0);
    curveVertex(thirdx,-thirdy);
    curveVertex(secondx,-secondy);
    curveVertex(0,-firsty);
    curveVertex(0,-firsty);
    endShape(); 
}
  tane(){
  fill(100,100,0);
  circle(0,0,70);
  }
}

クラスの機能を使えば同じ変数、関数を使ったものの内容を変えて簡単に複製できる。

p5.jsで正三角形を描く方法二つ

考え方自体はどの言語でも使えるものなのでp5.jsと題しているのはあまり意味ないです。
正三角形を描画するときには
・1辺を基準にする場合
・中心点を基準にする場合
の二つがあります。
三角関数を理解しているのは前提としてそれぞれの考え方を書いておきます。

1.一辺を基準に描く方法

これは描きたい辺の位置や長さ決まっているときに使う方法。
Y座標0位置に画面幅分の底辺を設置するところから考えた場合になります。
三角比から正三角形の高さは
「1辺の長さ/2×√3」
であることが分かる。
p5.jsでは三点の位置が分かるならtriangle関数を使って一行で三角形を描画できます。
キャンバスのサイズは400×400としています。

let edge=400; //1辺の長さ
triangle(0,0,  //左端の点
             edge,0,  //右端の点
             edge/2,edge/2*sqrt(3));  //中央下の点

2.中心点を基準に描く方法

これは正三角形を置きたい位置が決まっているときに使える書き方です。
正三角形を角の数が少ない円と捉えると言ってもいい。

  beginShape();
  for(let angle=TAU/4;angle<=TAU;angle+=TAU/3){
    const rad=200;
    let posx=rad*cos(angle);
    let posy=rad*sin(angle);
    vertex(600+posx,200+posy);
  }
  endShape(CLOSE);

辺基準のときと比較しやすくするために向きを同じにしています。
分かりやすい違いは半径を200としているが、先の一辺の長さを400としたときよりも小さくなっていること。
辺の長さを揃えようとすると半径は230程度必要で1.154...倍になる。単純に半径の二倍が1辺の長さと思わないように注意しないといけないです。
もう一つの特徴は画面の中心から長さを取っているので三点の位置は当然基準から同じ長さになることです。

並べると違いが分かりやすいですね。どちらがよいという話ではなくてそれぞれの特性を理解して必要に応じて使い分ける必要がありそうです。

ジェネレーティブアートで利益を得る方法

自分がp5.jsを通してジェネレーティブアートをはじめたきっかけの一つにはすぐに利益を得られる環境を見つけたからだ。
あまりこういう話は好まない人もいるだろうけど、別の誰かにとっては価値のある情報かもしれないので書いておこうと思う。

ユニークなプラットフォーム

最近NFTアートと呼ばれるものが流行っている。ブロックチェーン技術によってアートの所有権を宣言し、それを売買することが出来るというものだ。
色んなアートの形態や取引プラットフォームがあるけれども自分の興味を引いたのはこれ。
www.fxhash.xyz
このfxhashというプラットフォームは「ジェネレーティブアート専門」の珍しいプラットフォームだ。
ほとんどのプラットフォームは既に見えているアートの所有権を売買する。
しかしfxhashでは発行上限に達していないものであれば「自分が発行するまで確定しない」アートの所有権を買うことができる。
一応これまでもジェネレーティブNFTと呼ばれる同様の仕組みのものはあったが、各プロジェクト毎に独自のHPを用意しているのが普通だったし、イラストを含んだものがほとんどだった。
fxhashではこれをプラットフォーム上で行えるようにしたことでNFTに関する専門的な知識に乏しくても同様の体験が得られる場所を提供している。
コードはJavascriptで書くのでJavascript上のライブラリなら基本的になんでも使える。
これまでp5.jsやthree.jsなどでアートを制作したことのある人ならプラットフォームの仕様さえ覚えればすぐにでも参入できるだろう。

はじめるときの注意点とはじめ方

はじめ方に関しては次の記事がとてもまとまっている。
note.com

注意点としてはNFTで有名なのはイーサリアムというブロックチェーンだけども、fxhashはテゾスという一般的にはあまり聞き馴染みないものだということ。
NFTはいわゆる仮想通貨に関するものなのでそこは認識しておいてほしい。

ちなみに自分の作品ページはこちら。気に入ったらどうぞ。
www.fxhash.xyz

p5.jsをはじめて二か月経った感想

これまでのプログラミング経験

　経験によっても感想が変わってくると思うので、まず自分のプログラミング経験をなぞってみようと思う。

• 高校の授業でC#を扱っていた。
• ワードプレスでCSSを一週間くらいいじった。
• Pythonを勉強しようとして環境構築まではした。

ということで経験としては全くの0ではないがほぼ素人。
授業でやったint voidとかprintfとか書くのは知っているくらい。

興味をもったきっかけ

　そもそもなんでほぼ経験がなかった自分がp5.jsでプログラミングアートをはじめたかの話。
　もう何年も前になるが本を読んでいるときにフラクタル図形やセルオートマトンについて記されているのを読んだ。
　複雑系と呼ばれる学問に通ずるそれらの成果は視覚的な面白さと同時に好奇心を強くくすぐるものがあった。
　コンピュータを使って表現できるということでもしかしたら自分のPCでも？なんて考えが頭によぎったのを覚えている。
　ただプログラミングをはじめるハードルの高さや、適切な言語を知る機会が得られなかったのでふわっとした知識でプログラミングを勉強しようとして数度挫折していた。
　そんなところにp5.jsという手軽にはじめられるライブラリがあると知ったのでやらない理由はなかった。
　感覚としても視覚と言語に対する感性が半々くらいである。という自己認識もあったので多分向いていたのだろう。

webエディターが神

　プログラミングをする上での最初の障壁は環境構築というのはよく言われていることだ。
　しかしp5.jsはJavascriptのライブラリなのでウェブエディターで扱える。慣れないものを調べながら導入する必要もなくてとかくハードルが低いのはありがたい。
　はじめに触る関数も図形描画からはじまるので単に文字列や数を表示するよりも楽しいし、引数三つ書くだけで円を描けるのはそれまでにない経験だった。

数学を楽しみながら勉強できる

　数学はずっと苦手意識しかなかったが視覚ベースで数式を扱うので興味が持ちやすい。
　これなんに使うの？みたいにならないし、まさか自分から数学を勉強する日がくるとは思わなかった。
　三角関数からはじめ、曲線や図形を描くための数式を理解するために極座標がどーたらネイピア数がどーたらとやっている。
　歴史なんかを交えながら勉強していると結構面白い。
　プログラム上で扱う数式は数学で習うものより扱いやすい。数学は記号が多すぎてどの順で処理するかも分からなくなるけどプログラムでは左から順に読めば大体分かるので助かる。
　一度正しいものを組んで関数化してしまえば計算ミスが起こることもない。これが一番いい数学の勉強方法な気がしている。

入りやすいが奥は深い

　p5.jsや移植元のprocessingはよく「初心者に向いている」と表現されているのを目にする。
　初心者向きという言葉はポジティブではあるが、反面で底が浅そうにも聞こえる。本格的になにかを勉強したいという熱意があるとかえって避けてしまいたくなる。
　二か月間触った程度でなにかを判断するのもよくないかもしれないが、底が浅いとは全く感じていないしむしろ「極める」なんてことは有り得ない深い沼に足を踏み入れたように思う。
　「初心者向き」という表現はあくまではじめやすいという意味で、2Dプログラミングアートという用途に限れば非常に実用的だしこれ以上のものはそうそうないのではないか。

総括：はじめてよかった！

　今感じているのは自分のこれまでの興味がp5.jsによって集約的に実現できているということ。p5.js(Processing)は神！