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

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

ランダム・ウォークの愉悦

みんな大好き！ランダム・ウォーク！🙂 シフマン先生の名著 The Nature of Code でも一番最初に出てくるランダム・ウォーク。このランダム・ウォークで遊んでみましょう。こちらの企画は 20/04/19 で終了させていただきました。ご協力ありがとうございました。🙂 本記事は「Processing Community Japan」のご協力をいただき、クリエイティブ・コーディング等のオンラインイベントの企画として『ブログを基に文字ベースでの双方向のコミュニケー

p5.js 作例：クリエイティブ・コーディング編み物

Processing の Javascript 版 p5.js を使って編み物をしてみました。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ きっかけはいつも…私がなにか作るときのきっかけは、大体いつも他の方の作品です。今回は Almina (@Code4_11) さんのこちらのツイートを見たことでした。これは面白いアイディア！私もやってみたい！と、真似してみるけど雰囲気が全然違うものができてしまう… 頑張ってみよう

100

「クリエイティブ・コーディングってなに？」という LT してきました。

先日クリエイティブ・コーディングを題材に LT（ライトニング・トーク）をさせていただく機会があり、発表スライドもクリエイティブ・コーディングの要素を加えて作ってみました。 LT の様子、作成したスライドについて記してみます。発表の場は鹿児島.mk今回お邪魔したのは、『プログラミング初学者でも気軽に参加できる』というコンセプトのエンジニアコミュニティ「鹿児島.mk」。開催イベントは募集後すぐ満員になるという人気のコミュニティです。 2019/12/20 に行われた「

Teachable Machine はクリエイティブ・コーディングの夢を見るか？

クリエイティブ・コーディングでの面白い作品づくりに AI を活用してみようというお話しです。この記事は「Processing Advent Calendar 2019」 23 日目の記事です。前日の記事は、コードを公開し始めて変わったことや得られた発見についてまとめられた @takawo さんの「2019年のデイリーコーディングを振り返る」です。常に面白い作品を作りたいけど…私は「アートを生み出す機械」を作るのが夢で、今は表現の引き出しを増やすべく毎日楽しく作品作り

ボイド (Boids) もどきをベクター・フィールドで作ってみよう

みんな大好き「ベクター・フィールド」を用いて、Processing でボイド風のアニメーションを作ってみようという試みです。ベクター・フィールドについてはこちらをご参照ください。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ ボイド (Boids) って何？ボイド (Boids) は鳥もどき (bird-oid) から名付けられた人口生命シミュレーションの一種で、その名のとおり鳥の群れのような複雑な動きを再現できるプログラム

100

ブラウン運動もランダムウォークも無し！ Processing で DLA 風の画像を作成

DLA(Diffusion-limited aggregation) 、日本語だと拡散律速凝集。これはブラウン運動する粒子がくっつきながら成長していく様子を表したもので、珊瑚のような形を描くことができるそう。これ面白そうなので Processing でやってみました。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 難しいのはちょっと…DLA にはブラウン運動が付きものですが、ブラウン運動を実装するのって結構大変そうです。

100

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

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

100

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

記事一覧