Play with Code (Trial and Error in the Processing & p5.js)

081. openFrameworksとXcodeを久しぶりにインストールしてみた

atsushi 2018-12-18 openframeworks

だいぶ以前にちょろっと触って以来、久しぶりにインス…

続きを読む →

080. ProcessingでPixelFlowを使ったGLSLサンプルを作ってみる

atsushi 2018-12-17 processing

Thomas Diewaldsさんの素晴らしいライ…

続きを読む →

079. p5.jsで3Dシューティングゲーム用の戦闘機を空間に飛ばしてみる

atsushi 2018-12-14 p5.js

宇宙空間を進みます・・・途中で異常に重くなる・・・…

続きを読む →

078. p5.jsで3Dシューティングゲーム用の戦闘機から弾を発射してみる

atsushi 2018-12-13 p5.js

左右から弾を発射！http://www.velve…

続きを読む →

077. p5.jsで3Dシューティングゲーム用の戦闘機をモデリングしてみる

atsushi 2018-12-12 p5.js

といっても単純にBoxとCylinderの組み合わ…

続きを読む →

076. p5.jsで空間の中にカラフルなキューブをワチャワチャ動かしてみる

atsushi 2018-12-11 p5.js

024のパラメータを変えてみました。クリックで動き…

続きを読む →

075. p5.jsで無限に続くトンネルの中を走り続けてみる

atsushi 2018-12-10 p5.js

カラフルなトンネルの中をひたすら走り続ける。htt…

続きを読む →

074. ProcessingからDMX制御でクラスターLEDを光らせてみる 02

atsushi 2018-12-07 processing

Opne DMX USBがちょっとうまくいかないの…

続きを読む →

073. p5.jsでキラキラの泡がどんどん出てくるアニメーション

atsushi 2018-12-06 p5.js

066と068を組み合わせて、specularMa…

続きを読む →

072. Processingでランダムな四角を画面に充填してみる

atsushi 2018-12-05 processing

025を四角に。色情報は以下のイメージから取得して…

続きを読む →

071. ProcessingからDMX制御でクラスターLEDを光らせてみる 01

atsushi 2018-12-04 processing

Opne DMX USBデバイスを使ってPCからD…

続きを読む →

070. p5.jsで全方向からやってくる敵に攻撃・ダメージ・ゲームオーバー

atsushi 2018-12-03 p5.js

059をもうちょっと改造して、ゲームオーバー設定と…

続きを読む →

069. p5.jsで006で描いた木に文字の葉っぱを付け加えてみる

atsushi 2018-11-30 p5.js

文字の葉っぱがびっしりと。 http://www.…

続きを読む →

068. p5.jsで炭酸の泡のエフェクトを3Dにして色を付けてみる

atsushi 2018-11-29 p5.js

067のエフェクトを3Dにしてみました。ついでに…

続きを読む →

067. p5.jsで炭酸の泡のようなエフェクトを作ってみる

atsushi 2018-11-28 p5.js

泡がどんどん浮き上がるエフェクトです。 http:…

続きを読む →

066. p5.jsで空間内にどんどん上がる花火の中を移動してみる 02

atsushi 2018-11-27 p5.js

058をちょっとアレンジ。 http://www.…

続きを読む →

065. ProcessingからRFIDデバイスをシリアルで制御してみる

atsushi 2018-11-26 processing

今回はProcessingからRFIDデバイスにア…

続きを読む →

064. p5.jsとml5.jsで機械学習による画像分類をしてみる 02

atsushi 2018-11-22 p5.js

PCのウェブカメラに映った映像をリアルタイムに画像…

続きを読む →

063. p5.jsとml5.jsで機械学習による画像分類をしてみる 01

atsushi 2018-11-21 p5.js

ml5.jsを使って画像分類をしてみました。 ml…

続きを読む →

062. p5.jsで縦方向にスクロールするイメージギャラリーを作ってみる 02

atsushi 2018-11-20 p5.js

マウスの反応を調整して、背景にアニメーションを入れ…

続きを読む →

061. p5.jsで縦方向にスクロールするイメージギャラリーを作ってみる 01

atsushi 2018-11-19 p5.js

p5.js内でイメージを配置して、マウスのスクロー…

続きを読む →

060. p5.jsでマウスを重心にした位置にオブジェクトを描き続ける

atsushi 2018-11-16 p5.js

019のパラメータをちょっと変えて、描画しっぱなし…

続きを読む →

059. p5.jsで全方向からやってくる敵にダメージを受ける様子を表示

atsushi 2018-11-15 p5.js

057に加えて、敵からのダメージを受けたエフェクト…

続きを読む →

058. p5.jsで空間内にどんどん上がる花火の中を移動してみる 01

atsushi 2018-11-14 p5.js

042をアレンジして打ち上がる花火の中を移動してい…

続きを読む →

057. p5.jsで全方向からやってくる敵を撃てたら点数を加算してみる

atsushi 2018-11-13 p5.js

039のゲームで、敵を倒した時の点数表示を加えてみ…

続きを読む →

056. Processingで描いた空間のイメージを3Dプリンタへ出力 – その8

atsushi 2018-11-12 processing

今日新たに一個加えて3兄弟ができました。

続きを読む →

055. Processingで描いた空間のイメージを3Dプリンタへ出力 – その7

atsushi 2018-11-09 processing

049のやり方でもう一度出力。着色してみました。T…

続きを読む →

054. p5.jsで球のテクスチャに動画を使ってTwitterのユーザー画像表示

atsushi 2018-11-08 p5.js

TouchDesignerで映像を作っているのです…

続きを読む →

053. p5.jsでマウスに反応して回転するオブジェクトを変形してみる

atsushi 2018-11-07 p5.js

もうちょっと違うことがしたかったのですが、エラー出…

続きを読む →

052. p5.jsで球のテクスチャの中にTwitterのユーザー画像を表示してみる

atsushi 2018-11-06 p5.js

ちょっとこのエフェクトにハマってしまいました・・・…

続きを読む →

051. p5.jsで球のテクスチャの中にTwitterの検索結果を表示してみる

atsushi 2018-11-05 p5.js

003と050を組み合わせてみました。ただ、なぜか…

続きを読む →

050. p5.jsでシリンダーにテクスチャを貼って中から覗いてみる

atsushi 2018-11-02 p5.js

イメージ画像をシリンダーのプリミティブ形状にテクス…

続きを読む →

049. Processingで描いた空間のイメージを3Dプリンタへ出力 – その6

atsushi 2018-11-01 processing

すみません、まだやります（笑）もう少し立体感とフリ…

続きを読む →

048. Processingで描いた空間のイメージを3Dプリンタへ出力 – その5

atsushi 2018-10-31 processing

Y軸回転をやめて、Z方向には一定の厚みだけを残して…

続きを読む →

047. Processingで描いた空間のイメージを3Dプリンタへ出力 – その4

atsushi 2018-10-30 processing

もう少しアクセサリーっぽい形に。いつものようにB…

続きを読む →

046. p5.jsで描画パターンを持った軌跡上にBOXと線を描いてみる

atsushi 2018-10-29 p5.js

004の描画パターンを3D空間上に描いてみます。3…

続きを読む →

045. Processingで描いた空間のイメージを3Dプリンタへ出力 – その3

atsushi 2018-10-26 processing

ローレンツ曲線は形状が複雑だったので、もっとシンプ…

続きを読む →

044. Processingで描いた空間のイメージを3Dプリンタへ出力 – その2

atsushi 2018-10-25 processing

ローレンツ曲線の出力にもう一度挑戦。boxではなく…

続きを読む →

043. p5.jsで006で描いた木をもう少し違った感じに描いてみる

atsushi 2018-10-24 p5.js

006では再帰関数を使って木を描きました。それに0…

続きを読む →

042. p5.jsで星が中心から粉々に爆発するような感じを作ってみる

atsushi 2018-10-23 p5.js

画面の中心から爆発した星の破片が全方向に飛び散るよ…

続きを読む →

041. p5.jsで自律エージェントの動きをプロットしてみる。

atsushi 2018-10-22 p5.js

007のエージェントの動きを軌跡としてプロットして…

続きを読む →

040. Processingで描いた空間のイメージを3Dプリンタへ出力 – その1

atsushi 2018-10-22 processing

036のように034のローレンツ曲線イメージを3D…

続きを読む →

039. p5.jsで全方向からやってくる敵を砲台から打ちまくってみる

atsushi 2018-10-19 p5.js

030のシューティングをちょっと発展させて、全方向…

続きを読む →

038. p5.jsでマウスを重心にしたパーティクルを3D空間に描いてみる

atsushi 2018-10-18 p5.js

019のパーティクルの動きを3Dに変換してみました…

続きを読む →

037. p5.jsで3D空間内に木を描いてBOXの葉っぱを付けてみる

atsushi 2018-10-17 p5.js

006での木を3D空間に描画してみました（1本だけ…

続きを読む →

036. Processingで空間にドローイングしたイメージを3Dデータに書き出す

atsushi 2018-10-16 processing

以前メイカーズバザール大阪で出展した際のコンテンツ…

続きを読む →

035. p5.jsで3D空間内にベジェ曲線の軌跡アニメーションを描いてみる

atsushi 2018-10-15 p5.js

017のベジェ曲線を3D空間内にプロットして、その…

続きを読む →

034. p5.jsでローレンツ方程式の軌跡を空間に描いてみる

atsushi 2018-10-12 p5.js

ローレンツ方程式に値を代入した結果をプロットしてみ…

続きを読む →

033. p5.jsからTensorFlow.jsをちょっといじってみる – その3

atsushi 2018-10-11 p5.js

前回のコードを3次関数に適用してみました。 (1)…

続きを読む →

032. p5.jsからTensorFlow.jsをちょっといじってみる – その2

atsushi 2018-10-10 p5.js

前回のコードをもうちょっとわかりやすく書き換えてみ…

続きを読む →

031. p5.jsからTensorFlow.jsをちょっといじってみる – その1

atsushi 2018-10-09 p5.js

TensorFlow.jsを触ってみました。まだま…

続きを読む →

030. p5.jsで中心から全方向に弾を発射する砲台を作ってみる

atsushi 2018-10-05 p5.js

ちょっとしたシューティングゲームを作ろうと思って、…

続きを読む →

029. Processing for Androidで動画再生アプリを作ってみる

atsushi 2018-10-04 android

Processing for Androidで動画…

続きを読む →

028. p5.jsでベジェ曲線の描画を拡張していろんな線を描いてみる

atsushi 2018-10-03 p5.js

017のベジェ曲線にp5.scribble.jsを…

続きを読む →

027. p5.jsでシンプルなドラムマシンに挑戦してみる

atsushi 2018-10-02 p5.js

p5.jsではネイティブコードに加えて色んなjsラ…

続きを読む →

026. p5.jsで回転する空間内に線をドローイングしてみる

atsushi 2018-10-01 p5.js

X軸で回転している空間にマウスドラッグで線を描きま…

続きを読む →

025. Processingでランダムな円を画面に充填してみる

atsushi 2018-09-28 processing

シフマン先生の例を参考にやってみたかった平面充填で…

続きを読む →

024. p5.jsで自律エージェントの動き3D版の改良

atsushi 2018-09-27 p5.js

021の改良版です。空間上をBOXエージェントが動…

続きを読む →

023. ProcessingからWindowsネイティブコマンドを呼び出してみる

atsushi 2018-09-26 processing

ProcessingはWindowsのアプリケーシ…

続きを読む →

022. Processingで配列のデータをランダムに（ダブり無しで）抽出してみる

atsushi 2018-09-25 processing

配列内のデータをランダムに拾うのは簡単です。配列の…

続きを読む →

021. p5.jsで自律エージェントの動きを3Dで描いてみる

atsushi 2018-09-21 p5.js

007を3D版にしてみました。でも、ちょっとどこか…

続きを読む →

020. p5.jsで球の表面に針を刺していろいろと動かしてみる

atsushi 2018-09-20 p5.js

球面上に細かな線を描いてマウスの位置で伸びたり縮ん…

続きを読む →

019. p5.jsでマウスを重心にしたパーティクルを描いてみる

atsushi 2018-09-19 p5.js

たくさんのパーティクルはマウス位置との引力関係で動…

続きを読む →

018. p5.jsで空間内に曲がりくねった道を描いてみる

atsushi 2018-09-19 p5.js

前回のベジェ曲線の仕組みとは違いますが、ひとまず曲…

続きを読む →

017. p5.jsでベース直線に沿ってベジェ曲線を描いてみる

atsushi 2018-09-14 p5.js

前回の016のベース直線をさらに再分割して細かな直…

続きを読む →

016. p5.jsでベジェ曲線のベースになる直線をたくさん描いてみる

atsushi 2018-09-13 p5.js

適当な3点を選んで、各点への線分を分割して、その点…

続きを読む →

015. p5.jsで再帰関数を使ったフラクタル画面分割を試してみる

atsushi 2018-09-12 p5.js

フラクタルの基本である一つの作業の結果に同じ作業を…

続きを読む →

014. Processing for Androidでスケッチの画像を印刷してみる

atsushi 2018-09-11 android

Processingで作ったAndroidアプリか…

続きを読む →

013. p5.jsでマイク入力からの音を拾って3D空間に描画してみる

atsushi 2018-09-10 p5.js

012同様にマイクからの音を拾ってボリュームを取得…

続きを読む →

012. p5.jsでマイク入力からの音を拾って周波数解析してみる

atsushi 2018-09-10 p5.js

PCのマイクから拾った音をひとまず周波数別に描画し…

続きを読む →

011. p5.jsで球面状の座標にオブジェクトを配置して動かしてみる

atsushi 2018-09-07 p5.js

球面状の座標を計算して、そこに単純なBOXプリミテ…

続きを読む →

010. Processing for AndroidでOSC送信用アプリを作ってみる（つづき）

atsushi 2018-09-06 android

ProcessingでAndroidからタッチ位置…

続きを読む →

009. Processing for AndroidでOSC送信用アプリを作ってみる

atsushi 2018-09-05 android

Android端末からOSC通信でデータを送信する…

続きを読む →

008. Processing for Androidでスケッチの画像を端末に保存してみる

atsushi 2018-09-03 android

OSC関連のテストで久しぶりにAndroidを触っ…

続きを読む →

007. p5.jsで自律エージェントのパーティクルを表示してみる

atsushi 2018-08-31 p5.js

Processingのヒーロー、ダニエル・シフマン…

続きを読む →

006. p5.jsで再帰関数を使ってたくさんの木を描画してみる

atsushi 2018-08-30 p5.js

再帰関数を使って枝からさらにその先の枝へ増殖させま…

続きを読む →

005. Twitterの検索結果を表示するAPIにアクセスするための手続きについて

atsushi 2018-08-29 p5.js

前回ajaxとp5.jsでTwitterのキーワー…

続きを読む →

004. p5.jsでドラッグしたところに描画パターンを持った線を表示してみる

atsushi 2018-08-28 p5.js

画面上をドラッグすると細かな線が描かれていきます。…

続きを読む →

003. ajaxとp5.jsでTwitterのキーワード検索を拾って表示してみる

atsushi 2018-08-27 p5.js

ajaxを使ってJavascriptのみでTwit…

続きを読む →

002. p5.jsで空間の奥へ進むアニメーションを作ってみる

atsushi 2018-08-24 p5.js

空間の中にいろんな大きさの箱を配置して、その中をど…

続きを読む →

001. p5.jsで公転する惑星群アニメーションを作ってみる

atsushi 2018-08-23 p5.js

画面中心を公転する惑星群。マウスで視点が変わります…

続きを読む →