「NFTアートを作りたいけど絵が描けない！」と悩んでいる方は、ジェネラティブアートを作成してみるという手があります。
ジェネラティブアートを作るにはプログラムのコードを書く必要があるので、一見すると難しそうに感じるかもしれません。
しかし、コードの記述に使う言語の1つであるProcessingは、開発環境を整えやすく、プログラミング未経験者でも学びやすいです。
この記事では、Processingの概要や、ジェネラティブアートの作り方に関するポイントを説明します。
この記事をざっくり要約！
- Processing＝ジェネラティブアートを描くために用いるプログラム言語
- 無料の開発環境エディタをダウンロードするだけで始められる
- 数行のコード文で図形を描くことが可能
- ジェネラティブアートをNFTにするには、大きく分けて2つの方法がある
ジェネラティブアートに興味があるものの、なかなか踏み出せないという方は、本記事をぜひ読んでみてください。
NFT領域における事業開発の課題はありませんか？
NF-timesはNFT領域におけるプロジェクト企画・実行のプロフェッショナルが集まり、デジタルマーケティングの伴走支援をしています。
NFTのビジネス活用事例をまとめた資料を用意しておりますので、ぜひご覧ください。
ジェネラティブアートとは
（Art Blocks｜Chromie Squiggle #7515）
ジェネラティブアート（もしくは、ジェネレーティブアート）とは、コンピュータのプログラムによって描かれたアート作品です。
数式による規則性とランダムな偶然性を組み合わせることで、プログラムを用いながらも製作者の芸術的なセンスが必要とされています。
ジェネラティブアート自体は1900年代初頭からすでに使われており、意外と歴史の長いジャンルです。
1998年からは、ジェネラティブアートの国際会議が毎年開催されるようになりました。
（参考）GENERATIVE ART
現在では、NFTマーケットプレイスで販売されているジェネラティブアートが数多く存在します。
ジェネラティブNFTとの違い
NFTの世界では、コンピュータによってパーツを自動的に組み合わせたイラストのNFTを指して、ジェネラティブアートと呼ぶことがあります。
しかし、2つの意味が混同してしまうのは好ましくないため、下記のように使い分けたほうがよいでしょう。
- プログラムによって描画したアート作品・・・ジェネラティブアート
- パーツを組み合わせて作成したイラスト・・・ジェネラティブNFT
ジェネラティブNFTの詳細や作り方について知りたい場合は、別記事を参考にしてみてください。
（参考）ジェネラティブアート（NFT）の作り方をわかりやすく解説
ジェネラティブアートのNFT作品例
ジェネラティブアートのNFTで人気が高いコレクションとして、Art Blocks Curatedが挙げられるでしょう。
Art Blocks CuratedはArt Blocksというプラットフォームで公表された作品群で、多くのプロジェクトを内包しています。
なかでも、Chromie Squiggleプロジェクトの作品は3億円で取引されたことがあり、Art Blocksの代表作としても知られています。
（参考）3億円で売れたNFTアート「Chromie Squiggle」とは？
Art Blocks以外のNFTコレクションを挙げると、Autoglyphs（オートグリフ）やGenerativemasks（ジェネラティブマスク）などがあります。
Processingの概要
ジェネラティブアートを作る際に用いるプログラム言語の1つがProcessingです。
Processingであれば、比較的短い命令文で線や図形を描くことができます。
プログラムに関する知識がなくても習得しやすいため、これからプログラミングを学びたい人でも触れやすいでしょう。
Java言語をもとにしたアート特化の言語
Processingはアート作品の描画に特化した言語ですが、記述方法などのベースはJava言語を基にしています。
Javaとはプラットフォームに依存しないアプリを開発できるのが特徴のプログラミング言語で、ゲームやアプリを作ることも可能です。
世界中で広く用いられるほど優れた言語であり、Google社でも開発に利用されています。
Processingを理解すればJavaの習得も容易になるので、Javaを学ぶための入り口としてもProcessingはおすすめの言語です。
ほかの言語でも利用できる
最初はJavaをベースにして作られたProcessingですが、ほかの言語でも利用できるようにも開発されています。
具体的には、JavaScriptで記述するp5.jsや、Pythonで利用できるprocessing.pyなどがあります。
そのため、JavaScriptやPythonを習得済みであれば、Java以外の言語でコードを書くことが可能です。
ただし、それぞれの言語でコードの記述方法が若干異なるため、既存のコードをほかの言語へ移行する際はコードを書き換える必要があるでしょう。
Proce55ingと表記されることも
Processingという単語は広く使われているため、ネットで検索をしやすいように「Proce55ing」と表記されることもあります。
そのため、Proce55ingでネット検索をかけると、Processingに関する情報を見つけられるでしょう。
ただ、Processingの公式ページが「processing.org」のドメインを取得したのを機に、公式的にはProce55ingは非推奨となっているようです。
Proce55ingの短縮形である「p5」は、2022年現在でもJavaScriptのファイル名などに用いられています。
Processingの使い方
Processingを使う準備は、無料の開発エディタをインストールするだけです。
エディタを開いてコードを記述すれば、すぐにでもジェネラティブアートを描くことができます。
それまでの手順を、以下で詳しく説明していきます。
なお、Processingではコードを書いたファイルをスケッチ、ファイルを入れたフォルダをスケッチブックと呼んでいます。
開発エディタをダウンロードする
Processingの公式ダウンロードページで開発エディタをダウンロードしましょう。
Windows、MacOS、Linuxから使用しているパソコンのOSを選び、ダウンロードした圧縮ファイルを展開してください。
展開したファイルの中にある実行ファイル（processing.exeなど）を起動するとエディタが立ち上がり、新しいスケッチが開きます。
コードを記述する
スケッチはメモ帳のようにテキストを入力できるので、コードを入力してみましょう。
次の2行をそのまま記述すれば、単純に円を描くことができます。
| size(400,400); circle(200,200,300); |
sizeでウィンドウの大きさを指定し、circleで円の中心位置と直径を指定しています。
数値を変更すれば、ウィンドウや円の大きさを変更することも可能です。
再生ボタンで描画を開始する
エディタ上部にある再生ボタンをクリックすると、コードに書いた命令が実行されます。
上記のコードであれば、400×400ピクセルのウィンドウの中心に、直径300ピクセルの円が描かれるでしょう。
もしコードの記述内容に間違いがあった場合、間違いのある箇所の周辺に波線が現れ、波線にカーソルを合わせるとエラー内容が表示されます。
エラー文から考えられる間違いを修正し、思った通りに描画できるようトライ＆エラーを繰り返してみてください。
ちなみに、上の画像では1行目の最後のセミコロンが抜けています。
ジェネラティブアートのNFTの作り方
ジェネラティブアートの作り方には、大きく分けて2つのタイプがあります。
- 繰り返しおこなわれる描画処理を保存した画像をNFTにする
- 式の値によって絵が変化するスケッチを作成し、コード自体をNFTにする
1は通常のNFTアートと同様に画像データを表示しますが、2は画像を表示するたびに式の計算をおこなってリアルタイムで描画します。
以下の説明をふまえて、やりやすい方法でNFTを作ってみてください。
方法1：描画処理ごとに保存する
同じ描画処理を繰り返し実行し、変化していくジェネラティブアートを保存していく方法です。
ファイル名に#を入れてsaveFrameを実行すれば、保存するたびに連番を付けて画像ファイルを保存できます。
たとえば、中心に描く円の直径を徐々に小さくしていき、円を1つ描くごとに画像を保存するといったことができます。
| int maxSize = 400; int d = maxSize; void setup(){ size(400, 400); } void draw(){ if(d > 0){ circle(maxSize / 2, maxSize / 2, d); d -= 20; saveFrame("sample-####.png"); } } |
画像を保存するまでの処理を複雑にすれば、変化のバリエーションに富んだアート作品を作れます。
1つの計算結果で多くの画像を作成できるため、2つ目の方法より取り組みやすいでしょう。
方法2：値で変化するスケッチを作成する
1つの値（シード値）が変わることで式の結果が変わり、異なる画像を描画するスケッチを作成する方法です。
線の幅や色などの要素が、シード値の変化によってすべて変わるようにコードを書きます。
| int maxSize = 400; int d = maxSize; color c; void setup(){ size(400, 400); randomSeed(0); } void draw(){ if(d > 0){ circle(maxSize / 2, maxSize / 2, d); c = color(random(0, 255), random(0, 255), random(0, 255)); fill(c); d -= random(1, 30); } } |
（randomSeed(0)の場合）
上の例では、円を描く間隔と色がランダムになるようにコードが書かれています。
ただし、randomSeedの後ろにある数値が同じである限り、何度実行しても同じ絵が描写されます。
NFTとして発行するときは、randomSeedの数値がNFTによって変わるように実装し、異なる絵が描写されるようにしましょう。
（randomSeed(4649)の場合）
なお、描画する過程なども作品の一部として見せられるので、時間によって動き方が変わるといったギミックを仕込むこともできます。
Processingを学べるサイト
コードの書き方を全部伝えようとすると記事に収まりきらないので、Processingについて学べるサイトやページを紹介します。
- p5 code school（1から学びたい人向け）
- ドットインストール（動画で学びたい人向け）
- リファレンス（コードの意味を把握したい人向け）
- OpenProcessing（ほかの人のコードを参考にしたい人向け）
参考にするサイトに迷ったときは、上から順番に学んでみてください。
ここで紹介したサイトで学ぶだけでも、幅広いジャンルの作品を作るスキルを身につけることができるでしょう。
p5 code school
Processingを1から勉強する人に向けて作られた学習サイトです。
変数や関数などの専門用語を解説していたり、サンプルのコードや画像を公開していたりするので、学習する中でつまずきにくいでしょう。
このサイトで学習し終えたら、Processingでの基本的なコードの書き方は理解できるようになっているはずです。
ドットインストール
文章を読むのが苦手であれば、動画で講義を受けられるドットインストールを利用してみてください。
ドットインストールには会員機能がありますが、会員登録をしなくても無料で受講できます。
ただし、Javaのコードの書き方を学んだ前提で解説しているため、知識がない状態で利用するのは難しいかもしれません。
リファレンス
コードに書かれている単語の意味がわからないときは、公式のリファレンスを調べてみましょう。
Processingで使えるすべての関数や型の説明が書かれているので、リファレンスを見ながらコードを見れば自力で解読できます。
図を描画するものに関してはイラストも付いているため、流し読みする程度でも参考になるでしょう。
ただし、文章は英語で書かれているため、Google翻訳やDeepLなどで翻訳しながら読む必要があります。
OpenProcessing
Processingを用いた作品が公開されているプラットフォームです。
10万人以上のユーザーが利用しており、公開されている作品はコードを見ることができます。
ほかのユーザーが作成したスケッチのコードを参考にして、ジェネラティブアートのアイデアを獲得しましょう。
なお、p5.jsで記述されているコードもあるので、使われている言語への注意が必要です。
エラーが出たときに確認すべき点
サンプルコードをコピーしているはずなのにエラーになってしまう場合は、以下の点に注意してみてください。
- スペースも含めて、すべて半角文字で入力しているか（コメント文は除く）
- 1文ごとにセミコロン（;）を付けているか
- 変数の型は正しいか（int型の変数で小数を使っている等）
- ループ文やクラスなどで使っている中括弧（｛｝）の構造に間違いはないか
上記はよくあるパターンの間違いですが、これら以外にも原因がわかりにくいエラーがあります。
コードを見るだけでは解決できないので、行き詰まったら以下で解説する点も確認してみましょう。
言語が異なっている
前述したように、Processingには言語が異なるものも存在しており、完全な互換性はありません。
そのため、p5.jsで書かれたコードをそのままコピーしてきてもエラーになってしまいます。
構成のみを参考にするか、異なる部分を書き直して実行するようにするようにしましょう。
ちなみに、Processingとp5.jsの相違点には以下のような点が挙げられます。
| Processing | p5.js | |
| 言語 | Java | JavaScript |
| 関数の型 | void | function |
| 変数の型 | int, float, Stringなど | let または var |
| ウィンドウサイズの指定 | size() | createCanvas() |
| ファイルのプリロード | 不要 | 必要 |
（参考）Github｜processing transition
バージョンが対応していない
新しいバージョンでなければ動作しない関数が存在するため、古いバージョンの開発環境を使っているとエラーになる場合があります。
例を挙げると、sizeはバージョン3.0以降で使えるようになった関数なので、それ以前の開発環境ではエラーが表示されます。
新しいバージョンをダウンロードし直すか、似た動作をするようにコードを書き換えることで対応してください。
なお、廃止されたために古いバージョンでしか使えない関数がある点にも注意が必要です。
文字コードが一致していない
ソースのコピー元と開発環境で文字コードが一致しないためにエラーが発生するパターンが、まれにあります。
とくに、日本語でコメントを書いている場合は文字化けが発生するため、エラーの原因になりやすいです。
文字化けしている周辺の文字を削除して手入力すれば解消されるかもしれません。
それでもダメなら、コードを全消去して手入力で書き写すのも1つの手です。
ちなみに、エディタのメニューで「ファイル→設定→エディタとコンソールのフォント」を選択すると文字コードが変更でき、日本語でコメントを書くことも可能になります。
まとめ：簡単なコードを書くところから始めてみよう
ジェネラティブアートの作成に使うProcessingは、プログラムを学び始めるのに適した言語です。
ほかのプログラム言語にも通じる思考が身につくので、独自コントラクトを学ぶことにも繋がります。
まずはプログラミングに慣れるために、単純な図形を描くだけの簡単なコードを実行するところから始めてみてください。
見本となるコードを模倣しながら段階的に学ぶことで、考えた模様を自在に描けるようになるでしょう。
（参考記事）
BioErrorLog Tech Blog｜Generative Art #1 - Processing作品
売れるNFTアートの作り方はこちらから↓
