はじめてのZineでクリエイティブコーティングのコード解説に挑戦

目次

はじめに

 こんにちは。アンです。最近研究室の大学院生の3人で『カラフルなJavaScriptであそぼう p5.js / Konva.js / NestJSのノウハウブック』というテック・ジンを頑張って書きました。私たち3人ではじめて書いたZineなので、色々な困難がありましたが、無事に完成しました。自分が担当した部分は、「PART 1 p5.jsでジェネラティブアート表現を高めるコツ」です。また、表紙・各パートの扉のデザインも担当しました。今回のブログで、担当した部分の内容をちょっと触って、工夫したところなどを紹介します。

Zineの表紙

担当したZineの内容について

 今回のZineのタイトルを見ると、「なぜこんなかたちの本になったのか」という疑問が出るかもしれません。その理由と担当した内容をちょっと紹介します。

 計画の段階で話し合ったとき、研究の分野がそれぞれ違う3人の共通点を考えました。その共通点はJavaScriptです。3人それぞれ独自の研究やプログラミング経験のなか、全員がJavaScriptのライブラリを使ったことがあります。そこで、p5.js・Konva.js・NestJSについてそれぞれ書くことにしました。

 自分は2021年10月から、p5.jsを使って毎日書いた作品のコードをオープンに提供するプラットフォームのOpenProcessingで公開しています。今まで600以上の作品を作りました。p5.jsでジェネラティブアート表現について、ある程度の経験を持っています。p5.jsについての入門書はたくさんありますが、今回のZineでは個人的なクセというか、個人的によく使っているコツを紹介したかったです。そのため、「p5.jsでジェネラティブアート表現を高めるコツ」というタイトルで、シャドー・グラデーション・フィルターの3つのコツといくつかの実例を紹介しました。詳しい内容はZineをご覧ください。

 工夫したのは、コードの解説の部分だと思います。自分の作品のコードは基本的にOpenProcessingで公開しています。しかし、コードの詳しい解説は初めてなので、うまくできないところもありました。どうやって説明したら読者のみなさんに理解してもらえるかを考慮しながら、コードの解説文を書きました。1年前の作品の紹介もあるので、古いコードの意味はときどき自分でもよく分からなかったです。しかし、過去のコードをもう1回見て解説するチャンスはあまりないので、今回のZine作りのおかげでもう1回過去の自作を触れることができて良かったです。

表紙のデザイン

「Sheet music」のアウトプットの一例

 表紙デザインの背景は過去の作品の「Sheet music」です。この作品を選んで使った理由は2つあります。1つは、作品自体がカラフルなことです。Zineのタイトルにある「カラフル」のキーワードに似合うと思いました。もう1つは、シンプルなことです。直線・破線と柔らかなグラデーションを組んで背景としてタイトルを邪魔しないと思いました。また、デザインするとき、3人が書いたコードも背景に配置しました。統一感を出すため、各パートの扉のデザインに表紙のタイトルに使った黄・赤・青の3色を使いました。

3つの扉絵

さいごに

 書いたZineについてを少し話しました。p5.jsでジェネラティブアート表現とKonva.js・NestJSに興味ある方、ぜひZineを読んでみてください。