クリエイティブ・コーディングの作例

Vera Molnár さんの (Des)Ordres を Processing で模写

コンピュータ・アートのパイオニアのお一人、 Vera Molnár さん。彼女の 1970年代の作品を現代のツール Processing を使って模写してみました。 Vera Molnár さんは 1960年代からコンピュータを用いた作品を作っていらっしゃるアーティスト。今でも現役でご活躍です。そんな大先輩の作品を模写することで、Processing なんて影も形もなかった時代に思いを馳せ、豊富なツールが存在する現在のありがたさを実感しながら、スキルとモチベーションの

プログラミングにおける、パズルを解くような楽しさ

パズルには楽しさ、例えばルービック・キューブには解き方のルールがあって、そのルールに従って面を揃えることではなく、そのルールを見つけ出すという楽しさがあります。解くためのルールを考え、それを使ってパズルが解けたときの快感はたまりません。プログラミングにもそんな楽しさがあります。プログラミングで何かを解決する手段は一つじゃなく、いろんな方法があります。シンプルでエレガントな方法を使って解決できたときはとても気持ちがいいものです。さて、今回作るものではそんな気持ちよさを

100

noise() 関数を用いてドット絵風のアニメーション

2次元ノイズで遊んでいたら思いがけずドット絵風のアニメーションが出来たのでご紹介。💁‍♀️ この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ ノイズの使い方のコツProcessing/p5.js の noise() 関数は「パーリン・ノイズ」を生成してくれる楽しい関数。与えるパラメータの個数によって 1次元から 3次元のノイズを生成できます。これはノイズ値を角度に変換して 2次元ノイズを図に表したもの。 x軸方向を見ても y軸

100

無茶苦茶な数式でも美しい？

テキトーに書いた数式で図を描いてみたら、工夫次第で意外とイケたというお話しです。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 数式のグラフって美しい数式のグラフって美しいですよね。 p5.js でサインカーブ。 const w = 640;const h = 480;function setup() { createCanvas(w, h); colorMode(HSB, 360, 100, 100, 100); noLo

100

Processing Community Hangout Japan vol.2：スケッチ鑑賞会に応募

2020/07/05(日) 開催のクリエイティブ・コーディング関連のオンラインイベント「Processing Community Hangout Japan vol.2」、その中の企画で七夕をお題にした作品を募集する「スケッチ鑑賞会」に応募してみました。意気込み！今回の作品作りでは２つのことに挑戦しました。複数シーンのリアルタイムアニメーションリアルタイムに画面表示される複数のシーンからなるアニメーションに挑戦しました。普段は Processing でのグローバル

円を並べてみる、ただそれだけで：後編

円を並べるだけという超単純な作例、前編では並べた円の大きさを変えて遊んでみました。前編を読んでくださって、wo（@kanikaniudon）さんと JunKiyoshi（@junkiyoshi）さんが作品を作ってくださいました。嬉しいです。ありがとうございます！🙂 さあ、それでは後編でも引き続き遊んでいきましょう。今回のコードは p5.js で書きました。 OpenProcessing や p5.js Web Editor に貼り付けて実行することも可能です。

100

円を並べてみる、ただそれだけで：前編

今回は超単純！円を並べるだけの作例です。超単純なはずなのに、なぜか前後編の 2部構成です。今回のコードは p5.js で書きました。 OpenProcessing や p5.js Web Editor に貼り付けて実行することも可能です。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 並べてみるまずはキャンバス上に何個か円を並べてみましょう。格子状に図形を配置する方法として、高尾俊介（@takawo）先生のワークショ

100

ジェネレーティブ数式？ Java で関数を動的に（無理やり）生成

プログラムに自分で数式を生成させ、その数式をもとにプログラムに絵を描かせるという試みです。私のやっているクリエイティブ・コーディングでは「座標を計算して点を打つ」、これを何万回も何百万回も繰り返して図を生成しています。この計算を行う数式によって結果として現れる図は全く違うものになります。しかし、面白い図を描くためにいろんな数式を試してみるのもなかなかしんどい… そんなときに、ryotako(@ryotakob)さんの描画の関数を実行時に動的に決定するというツイート

100

Processing Community Day 東京：24時間 24作品アップで祭りに華を！

2019/02/02(土)、Processing Community Day が東京で開催されました。私もこのお祭りを盛り上げたい！という気持ちで、『24時間 1時間に 1作品アップ』ということをやってみました。いいこと思いついた！Processing Community Day は世界各地で開催される Processing ユーザーの交流イベントで、今回が日本での初めての開催でした。著名な方々のキーノートに魅力的なワークショップ、ユニークな話題が満載のライトニン

ベクター・フィールド：Processing 作例

noise() を使ったこんなの作ってみましょう。最初はここから始めて… こうなって、ちょっと見た目を工夫して（微妙？）、最終的にこうなります。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 思ったより単純です。基本のコードはこうです。 // Vector Field 基本の形// @author @deconbatch// @version 0.1// Processing 3.2.1// 2019.01.27

100

影絵の風合いのアニメーション：Processing 作例

こういうの作ってみました。なんとなく影絵っぽい雰囲気のアニメーションです。画用紙で型を抜いて色セロファンを貼って、裏から電球をかざして出来る影絵のイメージ。このバージョンのソースはこちらに載せています。今回、『この作品が大好き！愛してる！！』という熱いラブコールをいただきましたので、作例紹介を書いてみます。最初は切子細工を作ろうと思ったこれを作るきっかけとなったのは、別に記事を書いている『趣味としてのクリエイティブ・コーディング』の中での作例でした。これを

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

みんな大好き O'reilly さんから、2018/07/28 新刊が出ました。その名も「作って動かすALife ―実装を通した人工生命モデル理論入門」！これはクリエイティブ・コーティング界隈の方にとっては待ってました！の内容ではないでしょうか？早速 Processing でと思いましたが、これコード例が Python なんですよね。 Processing にも Python モードはありますが、Python 2 系だし、numpy 使えないしでどうにも… そんな

100

貧乏性が具現化させたアート：Processing 作例

買ってきたお菓子は、お腹が空いたときに食べたほうがより美味しいだろうと、なかなか手を付けないまま賞味期限を迎える。服はちょっとぐらい破れても平気で着る。破れに破れて着られなくなっても、まだ雑巾に使えるだろうと取っておく。そう、私は貧乏性。つまらぬ物の捨て時がわからない… 今回はそんな貧乏性の私だからこそできた「アート」をお見せしましょう。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ ストレンジ・アトラクターでの作画以前

100

妖しいトンネル：Processing 作例

ボロボロの廃屋。蔦が絡まる裏手の木戸。そこに開いた隙間。その隙間は暗く、奥は真っ暗。ここからでは中は見えない。そんな隙間、覗き込むなんて恐ろしくてできない。手を入れてみるなんて考えただけでもゾッとする。でも… 覗き込んだら何が見えるんだろう？手を突っ込んだら一体どうなるだろう？怖い、けどやってみたい… 恐怖より好奇心が勝ってしまう、それが人の子、人類はそうやって進歩してきたんですよね？というわけで、人類の進歩のために、綺麗だけどちょっと怖い、興味を惹かれるけど

100