p5.Vector を使った、引力・斥力を受けて動く点のアニメーション

p5.Vector のメソッド使って、2つの点の間に働く力をベクトルで定義し、その力を受けて動くアニメーションの作例を p5.js で書きました。

p5.js 関数リファレンスと作例：createVector()

p5.js の関数 createVector() の説明と作例コードです。サンプルコード付きです。

読書感想文：シドロモドロ工作所のはじめてのお彫刻教室

彫刻家 田島享央己さんのユニークな作品がたくさん掲載されている本「シドロモドロ工作所のはじめてのお彫刻教室」を読みました。ただ楽しいだけでなく、創作に役立つヒントを沢山与えてくれる本でした。

p5.js 関数リファレンスと作例：beginContour()

p5.js の関数 beginContour() の説明と作例コードです。サンプルコード付きです。

読書感想文：レンブラントの身震い

機械の創造性と芸術について考察したサイエンス・エッセイ「レンブラントの身震い」を読みました。創作に関心がある人にとって多くの示唆を与える本であり、創作活動や芸術鑑賞の視点を深めることができる本だと思います。

ジュリア集合を勘違い

ジュリア集合を勘違いして全然違うもの作っていたので、ちゃんとしたジュリア集合のコードと合わせてご紹介。こんな風に間違ったコードでも何かが作れるのは、クリエイティブ・コーディングの醍醐味かも？

p5.js 関数リファレンスと作例：focused

p5.js の変数 focused の説明と作例コードです。サンプルコード付きです。

読書感想文：雪月花の数学

日本人の感じる美に宿る数と形について書かれた「雪月花の数学」という本の感想文です。黄金比、白銀比それぞれのバックグラウンドを知り、クリエイティブ・コーディングで活かせる知識を得ました。

p5.js 関数リファレンスと作例：erase()

クリエイティブ・コーディングやジェネラティブアートの作例や制作のコツ、考え方などを書いていきます。

p5.js 関数リファレンスと作例：createGraphics()

p5.js の関数 createGraphics() の説明と作例コードです。サンプルコード付きです。

p5.js 関数リファレンスと作例：colorMode()

p5.js の関数 colorMode() の説明と作例コードです。

ロベール・ドローネーにあこがれて

ロバート・ドローネーの絵画にインスピレーションを得て作った、クリエイティブ・コーディングの作例です。作る過程とポイント、p5.js と Processing のサンプルコードを掲載しています。

p5.js 関数リファレンスと作例：background()

p5.js の関数 background() の説明と作例コードです。背景色の変更の効果を活かしたアニメーションのサンプルコード付きです。

p5.js 関数リファレンスと作例：frameRate() & frameCount

p5.js の関数 frameRate() と変数 frameCount の説明と作例コードです。両者を使用したループアニメーションのサンプルコード付きです。

p5.js 関数リファレンスと作例：alpha()

p5.js の関数 alpha() の説明と作例コードです。p5.js もバージョンが上がって知らない関数が増えてきたので、一度おさらいして、記録を残しておこうと思います。

読書感想文：「絵が上手いより大事なこと」

水彩画家の永山裕子さんの著作「絵が上手いより大事なこと」の感想文です。今後のクリエイティブ・コーディング活動に活かしていける多くの示唆をいただきました。その上、作品集として楽しめるフルカラーの美しい本です。

p5.js で作った L-system パラメータお試しキット

L-system を使った描画はパラメータの組み合わせにより様々に変化します。ハートにビビッとくるパラメータを見つけるためのコード「L-system パラメータお試しキット」を p5.js で作成しました。

読書感想文：まだ見ぬソール・ライター THE UNSEEN SAUL LEITER

写真家ソール・ライターの未発表作を収めた写真集「まだ見ぬソール・ライター THE UNSEEN SAUL LEITER」を鑑賞しました。ジャケ買い的に選んだ本でしたが、これは大当たりでした。

ハルゲルト・リタヒーの冒険

現代アートの巨匠と呼ばれるゲルハルト・リヒターの「4900の色彩」を模写して作った作品を、p5.js/Processing のコードを添えて紹介します。

カラースタディ：グラデーション「日の出、印象」

多色の自然なグラデーションをどう作るか？正規分布に従って変化する半透明な色を重ねるという方法を試しました。

読書感想文：「ニッポン現代アート」

国立西洋美術館館長も務められた美術評論家、高階秀爾さんによる解説で観る現代アート30作品。解説と共に観ることで見えてくるものがあると気付きました。見応えも読み応えも十分な一冊です。

saveGif() で手軽に p5.js アニメーション

p5.js バージョン 1.5.0 で導入された、アニメーション GIF を生成してくれる関数 saveGif()。果たしてどれぐらい使えるものか？確認したいと思います。

手書きの線で囲ったようなキャンバス

Processing/p5.js で、手書きの線で囲ったようなキャンバスを作ってみます。クリエイティブ・コーディング作品の背景に変化を付けられるんじゃないかと思います。

Processing filter(BLUR) の影色をコントロール

Processing の filter(BLUR) 関数でぼやけさせるときにできる影。この影の色を自在にコントロールできないでしょうか？

「僕の Processing が p5.js の drawingContext に負けるはずがない！」

手軽に表現力を上げられる便利な drawingContext は、p5.js では使えますが Processing では使えません。なんとか Processing で同じように表現力を上げることはできないでしょうか。

クリエイティブ・コーディング：コードで構図を作る試行

「日の丸構図」から脱却したくて、クリエイティブ・コーディングでの構図について勉強。よい教材になりそうなコード（p5.js）があるので、これを用いて構図を作ってみます。

カッコいい構図を描くコードを書きたい

構図を「作る」訓練。まずは過去の美術作品の構図を模写して、構図とはどういうものかを学びます。私がやりたいのは「カッコいい構図を描く」ことではありません。私の目標は「カッコいい構図を描くコードを書く」です。

クリエイティブ・コーディング・カラースタディ：SORTING / SEQUENCES

クリエイティブ・コーディングで描画したものが、見た目の意味でのアートらしくなるためには、美しいと感じるような配色が必要です。そのための訓練を記した記事です。

大きなパンチ穴でモアレ縞を作る（p5.js）

パンチ穴のような大きな穴でモアレ模様ができるのでしょうか？ 'p5.js'のコードを使って、そんなモアレ模様を制作してみました。サンプルコード付きで試していただけます。

「KUMALEON Coding Challenge」チャレンジガイド

KUMALEON に摘要するコードを書いてみようというコーディング・チャレンジ「KUMALEON Coding Challenge」に p5.js で挑戦する方向けのガイドです。

setTimeout() 関数を使って、p5.js でストップモーションを実現

JavaScript の setTimeout() 関数を使って、p5.js でストップモーションのあるアニメーション作品を作りました。setTimeoutの引数も簡単に説明、サンプルコードもあります。

読書感想文：「美の構成学」

創作のインスピレーションと、クリエイティブ・コーディングの即戦力となる知識を得られた本、美学者、造形評論家の三井 秀樹さんの著書「美の構成学」の読書感想文です。

円周上に配置した点の間に線を引く、クリエイティブ・コーディングの作例

シンプルなコードで美しい図を描ける「ノード・ガーデン」の作例を紹介です。工夫次第でいろいろ楽しめるサンプルコード付きですので、改造してオリジナル作品も作れますよ。

クリエイティブ・コーディングでチューリング・パターン

独特の不思議な模様を作れるチューリング・パターンを p5.js や Processing で描く、クリエイティブ・コーディングの解説記事です。作り方のコツと共に、工夫次第でオリジナリティのある作品が作れるような、基本的な部分のみのサンプルコードと、それを使った応用例のコードも記載します。

自作パターンで Truchet Tiling を楽しもう

単純なパターンとアルゴリズムで、面白い模様を生成できる Truchet Tiling。タイリングの簡単な説明から始めて、パターン生成の考え方、自作パターンを使って模様を描けるサンプルコードまで紹介します！

必要なスキルはファイルの保存だけ！ p5.js 動きのある作品の録画方法

p5.js で作った動きのある作品、せっかくなら動画で Twitter に上げたい！ この記事では、p5.js 作品の動画を録画して Twitter に上げるまでの、最も手軽と思われる方法を紹介します。

読書感想文：葛飾北斎 江戸から世界を魅了した画狂

美術手帖編集の「葛飾北斎 江戸から世界を魅了した画狂」を、クリエイティブ・コーディング的表現の視点で読んでみました。

コーディング・チャレンジ AltEdu2022 で制作したコード

"Processing Community Japan" のコーディング・チャレンジ・イベント「AltEdu2022」にて作成した p5.js や Processing のコード一覧です。

いろんなイージングを贅沢に使う！「階段状イージング」で動きに変化をつける

アニメーションをぐっと魅力的にする「イージング」。このイージングを連続させて贅沢に使い、動きにもっと変化をつけよう！ イージングそのものの解説と、Processing と p5.js の作例付きです。

寒くてもコーディングがはかどる手袋

寒い冬、かじかむ指でコーディングするのは辛いもの。そんなとき、タイピングの邪魔にならない手袋があったら… ありました！

そもそも光を発してるモニタ上で、あえて「光ってる」ように見せるには？

Processing や p5.js で、まるで光っているように見せる「発光効果」を出すコツを、コードを交えて具体的にやさしく解説しています。

自分の感覚だけで作ったものが、果たして他人に伝わるのかな？

見え方、感じ方は人それぞれ。であれば、「ノイジー」を表現する作品を作ろうとしたとき、自分が思う「ノイジー」で作って果たして伝わるのだろうか？

読書感想文：「面白い」のつくりかた

常日頃、「面白い」作品を作りたいと思っています。 でもどうすれば？ そもそも「面白い」って何？そんな疑問に答えてくれそうな「”面白い”のつくりかた」という本を読んでみました。

p5.js の createGraphics() がメモリを放してくれない！

createGraphics() で生成された p5.Graphics がメモリを専有してしまう問題の解決法を具体例とともに記しました。

Processing 20年の過去をふり返り、未来へ思いを馳せる

開発開始から今年で 20年目を迎えた Processing。その 20年の開発の記録を Processing を使ってビジュアライズで振り返り、そしてこの先 20年の未来へ思いを馳せてみました。

クリエイティブ・コーディングの定番「ノード・ガーデン」：応用編

クリエイティブ・コーディングの手法の一つ、「ノード・ガーデン」は、ルールがシンプルなだけに、ノードの配置や線の引き方の工夫次第でいろんな表現が可能になります。この記事で工夫を加えた様々な作例をご紹介します。皆さんの制作の参考になれば幸いです。

Generativemasks を生成する JavaScript モジュールを作る

Generativemasks のマスク生成の自由度を高めることができる JavaScript モジュール 'Garg' を作りました。これを使えば Generativemasks の派生物を楽に作ることができます。自分好みのサイズや色でマスクを生成できるアプリケーションの作例付きです。

クリエイティブ・コーディングの定番「ノード・ガーデン」：基礎編

クリエイティブ・コーディングの定番の手法のひとつ「ノードガーデン」のテクニックを、p5.js のサンプルコードを使って基礎からやさしく解説します。

Worley ノイズで算出する距離を角度としたウォーカーの軌跡を描画

クリエイティブ・コーディングやジェネラティブアートの作例や制作のコツ、考え方などを書いていきます。

読書感想文：「職業は専業画家」実践の記録と活動の方法

専業画家になるための、実践的・具体的情報が満載の書籍。 実践内容のお話はすごく読み応えがあり、「美」の追求についての考え方や、良い絵とはどういうものか？など、刺激になる点も多い、大満足の本でした。

Processing 20周年を、前身の DBN を使ってお祝い！

Processing 誕生 20周年の記念に、Processing の前身 Design by Numbers でクリエイティブ・コーディング・アニメーション作品を作りました。 勝手の違う環境で四苦八苦する様子をお楽しみください。

改造して遊ぼう！距離関数とノイズで作るジェネラティブアート

改造して楽しく遊べる、Processing で書いたシンプルなサンプル・コードです。Worley ノイズとパーリン・ノイズの組み合わせで描くジェネラティブアートが題材となっています。

サークルパッキングによる画像処理プログラミングに挑戦

写真を元にサークルパッキングしたお花を並べる、Processing で作ったクリエイティブ・コーディングの手作り画像処理プログラム。 元の写真をデータとして捉え「データを加工して新しい絵を作り出す」ことを目指す画像処理です。

パラメータの工夫でパーリンノイズをもっと面白くするテクニック

'noise()' 関数に与えるパラメータを工夫することで様々な表情の絵を作ることが出来ます。クリエイティブ・コーディングにおいて、'noise()' での絵作りに飽きた、行き詰まった方に試してほしい。

過去作に新しいアイディアを取り入れてみる

Processing で作った過去作に新しいアイディアを取り入れて別のアート作品に仕立てた過程の記録です。サンプルコードありです。

雰囲気のあるサークル・パッキングを作るテクニック

サークル・パッキングで円の配置をグリッド上にしたり、曲線状にすることで特徴を出すクリエイティブ・コーディングのヒントと作例。

クリエイティブ・コーディングで、間違いも作品にしてしまおう

コードの誤りから偶然できた形を創作に活かしたクリエイティブ・コーディングの作例。コードは "Processing" で書きました。

四角形によるジェネレイティブ・デザインの作成過程

'Processing' で作成したモノクロのシンプルな形状がモーフィングのように変化していくアニメーションです。サンプルコードも掲載しています。

回転運動の再帰で作ったデジタルアートの制作過程

回転運動の再帰によるデジタルアートをどのように作っていったのか？