広告は消しゴムで消すべし

そろそろ更新しようと思う(やる気)

プログラミング

p5.jsで文字の雨を降らせる-プログラミングはYouTubeで学ぶ-

マトリックスの文字の雨が降るシーンを再現するポイントを解説します。

processing.jsで流れに従う自律エージェントを作る-プログラミングはYouTubeで学ぶ-

今回は簡単に人工知能(AI)っぽいものが作れてしまう自律エージェントというシステム作りました。 小さな自律式ロボがちょろちょろ動き回るのは見ていて可愛いものがあります。 自律エージェントのベースとなる考え方も、私たちの何気ない意思決定行動の…

p5.jsできれいな花火をつくる-プログラミングはYouTubeで学ぶ-

今回のモチーフは花火です! 季節はまだ春にもならない2/21ですが... 前に、javascriptで花火を30分で作る方法みたいなのを見たことがあって作ってみたかったんですよね。季節外れではありますが、結構かわいい花火が作れるので、是非参考にしてみてください…

Node.js+Socket.io+p5.jsで双方向通信ペイントをつくる-プログラミングはYouTube動画で学ぶ-

今回はNode.jsとSocket.ioを使ってサーバーとクライアントの双方向通信を可能にしたペイントを作ります。WindowsでNode.jsを始めてやったのですが右も左も分からない状況で、エラーが出ずに動くようになるまで大変でした。参考にした記事も載せておくのでWin…

p5.js/processing.jsでプログラミングを始めるために必要なもの

p5.jsとprocessing.jsをつかったプログラミングに興味を持たれた方のために、p5/processingの始め方を紹介します。つまずいてしまうことが多いところなので、分からなかったら質問してください。 最も簡単な方法 OpenProcessingに直書き PC版:基本の始め方…

p5.jsでカメラの映像をチェックボックスが映すプログラムを作る-プログラミングはYouTube動画で学ぶ-

今回はWebカメラを使います! カメラから受け取ったイメージを1200個のチェックボックスがチェックのオンとオフだけで表現するんです! 使用したのはp5.jsの方です。プログラムの内容は簡単な方ですが、chromeだとローカルサーバー上で動かす必要があるので…

processing.jsでメタボールを作る-プログラミングはYouTube動画で学ぶ-

メタボールといえば3Dでよく聞く言葉ですよね。2つの球体が近づいていくにつれて徐々に結合していく感じが私は好きです。今回は3Dではなく2Dでメタボールを作りました。メタボールを実現させるためのベースとなるアイデアは同じなので、3D版メタボールを作る…

p5.jsでDLAクラスタを作る-プログラミングはYouTube動画で学ぶ-

今回は拡散律速凝集(かくさんりっそくぎょうしゅう:DLA)とよばれるものを作りました!ランダムに動く粒子が、核となるものに結合していった結果できる集合体(クラスタ)です。 制作物 拡散律速凝集:DLAについて 解説 今回の教材 まとめ 関連記事 なぜYo…

processing.jsでローレンツ・アトラクタを書く-プログラミングはYouTube動画で学ぶ-

第二回 Processingの勉強 前回に引き続き、The Coding Trainの動画を見ながら作ってみました。今回は3Dを扱うためp5.jsではなく3D描写に有利なprocessing.jsを使ってます。 完成品 動画を見て少しアレンジしたものがこちらです。(重たくなって来たらボタン…

p5.jsでフラクタルの木を書く-プログラミングはYouTube動画で学ぶ-

p5.jsは視覚的表現に特化したプログラムをjavascriptで簡単にかけるようにしたjsライブラリの一つです。web上でも簡単に動かすことができます。 今回動画を見ながら作ったものはフラクタルの木です。クリックすると木が分裂していくようになっています。 な…