コーディングを本格的に学ぶ時期と、手癖を繰り返す時期が交互に来る。もっと大きな周期で、クリエイティブな物事に向き合う時期と、ただ諸芸術に薄い関心を持っているだけの時期がある。クリエイティブコーディングは断続的に続けていられて、これからもずっとワナビーのままやっていると思う。

図案の採集

クリエイティブコーディングを楽しんでいる方の多くは、日常の風景や自然界の事物を参照し、自身の表現に落とし込んでいることが多いと思います。私も勝手に「図案の採集」と称して、植物、雲、アスファルトのヒビ割れなどを撮影しています。写真技術の追求や写真の芸術性にこだわらず、あくまで採集として、スマートフォンでゆるく撮っています。せっかくなのでこちらのnoteにいくつか載せておきたいと思います。 散歩道も刺激いっぱいです。そのうちクリエイティブコーディングに活かしていきたい所存。

オブジェクトが常にキャンバスの中心を向く仕組み

をp5.jsで実装しようとして沼った話です。クリエイティブコーダーの皆さんや数字に強い方には当たり前のことだとは思いますが、半ば備忘録的に記しておきます。 'translate()'関数や'heading()'関数で頑張った 回転の話なので、まずは'translate()'関数と'rotate()'関数で実装する方法を考えました。任意の座標に図形（ここでは三角形）を描画し、その中心を原点に移動させて回転。そのあとに元の位置へ戻す。考え方はシンプルですが、どうにも意図した挙

蝶のグラフィックを絵文字🦋から拝借する ― p5.jsで絵文字を再描画

はじめに蝶をモチーフにしたグラフィックを作ってみようと思案していましたが、具象的な形状を座標制御のみで表現するのはなかなか難しいものです。そこで、絵や写真を読み込んで再描画することにしました。...では、蝶の画像や写真はどこから？ というわけで、絵文字を使うことにしました。p5.jsは'text()'関数で絵文字をそのまま使用できるので、とても便利です。 作り方早速、🦋をキャンバスに大きく表示してみましょう。本当にただテキストの描画位置を決めて入力するだけですね。 fu

p5.jsでイージングを使う方法（のおさらい）

この記事はp5.js勉強会 第十回で雑談するための資料を兼ねています。 はじめについ先日イージングについて調べていたのですが、ほぼ同時期にX（Twitter）のでイージングについて言及されているポストをいくつか見かけました。 皆さんの作品や動画を見ているうちに、なんとなく今の自分がイージングについて理解できていることをまとめておく気になりました。備忘録でもあるので、コタツ記事のような体裁となっており、もっと言ってしまえば、レオナさんの『p5.jsとProcessingでと

ChatGPTにp5.jsのメンターをしてもらった

この記事はProcessing Advent Calendar 2023の19日目に寄せた投稿です。 お久しぶりです。Toriiです。前回の投稿から1年空きました。この更新頻度からわかる通り、大抵のことを断続的にしか続けられない性分で、クリエイティブコーディングもその限りではありません。今回の投稿のために約2か月ぶりにp5.jsのエディタ（OpenProcessing）を開きましたが、何から書くべきか見当もつかず。というわけで、話題の対話型AIにメンターを務めてもらいました

クリスマスツリー型オブジェを作りました

この記事はProcessing Advent Calendar 2022の15日目に寄せた投稿です。 こんにちは、Toriiです。今回、p5.jsで生成した星形多角形をベースにクリスマスツリー型オブジェを作りました。なお、プログラミングについてあまり詳しくないので、記載内容に誤りがあればぜひご指摘ください。 使用したツールや機材p5.js（OpenProcessing、p5.js-svg） 星形を少しずつ変化させながらオフセットさせるジェネレータをp5.jsでこしらえまし