p5.jsでビジュアルコーディングしてみる。contentp5.jsでビジュアルコーディングしてみる。update.◆p5.jsとはprocessingをjavascriptに移植したものです。javascriptなので環境を作らなくてもすぐにコードを書くことができます。図形やグラフィカルな描画に特化しているので、アーティストさんやデザイナさんにも取っ付きやすいビジュアルコーディングツールになってます。ありがたや...◆環境を整えるhttp://p5js.org/公式ページからCDNのリンクをHTMLに貼付けるだけで環境設定終了。codepenでのプログラミングが便利!http://codepen.io打ち込んだプログラムが即反映&アップロードいらずで便利です。◆描画してみる↓p5.jsは下記のサイトで基本的な流れを学ぶことができます。drawというフレーム毎に読み込まれる関数です。background(0);//毎フレームごとに黒色描画}p5.jsが3Dにも対応したとのことなので、参考コードみながら作ってみましょう。3Dhttp://p5js.org/examples/examples/3D_Sine_Cosine_in_3D.phphttp://codepen.io/minamooon/pen/ZbRKKB少しずつ画面が動く&ドラッグでも視点移動します。setupは描画するキャンバスを作るだけです。2Dのときはwidthとheightの指定のみでしたが3Dの場合は+WEBGL表記します。WEBGL);}drawには上にのせる3Dオブジェクト、アニメーション、ライトの設定、ドラック対応などを書きます。/*Yを少しずつ回転。}}背景色を毎フレームごとに描画background(0);オブジェクトにあたるライトの指定をします。マウスの位置によって光の方向が変化させているのですが、オブジェクト自体が白くて小さいのでみえないですね。0);カメラ視点を少しずつ回転させます。orbitControlでドラックしても視点が動くようにします。この辺three.jsと似ていますね。orbitControl();メインオブジェクトの描画です。Sineの動きを使うことで規則的で面白いアニメーションを作ることができます。オブジェクトは今回sphere(球体)で作成しましたがplane(板ポリ)、box(立方体)などの数種類のプリミティブにすることも可能です。Shiffmanさんの動画講座です。ShiffmanさんのサイトEXERCISESがたくさんあります。動画にもなっているので初心者にうれしいです。学習ノートhttp://www.d-improvement.jp/learning/processing/デザインを鑑賞する・codepenコードも確認できるので勉強にもなります。http://codepen.io/search/pens?q=p5.js&limit=all&type=type-pens・tumblrprocessingで検索すると...https://www.tumblr.com/search/processing・OpenProcessinghttp://www.openprocessing.org/・codedoodl.es描画される形、アニメーションともに洗練されていてかっこいい!デザインのインスピレーションにも。http://codedoodl.es/参考書籍Processing2015年に日本語翻訳版が発売されました。基礎からprocessingについて学べます。CODE物事の基本的な動き、自然界の物理的なルールをコード書きつつ学べます。コードをweb上でDLできたり、著者であるShiffmanさん解説動画がyoutubeに上がっていたりと、内容難しめですがとっつきやすいです。・サンプルコードhttps://github.com/shiffman/The-Nature-of-Code-Examples・youtubehttps://www.youtube.com/playlist?list=PLRqwX-V7Uu6YVljJvFRCyRM6mmF5wMPeEジェネラティブ・アート―Processingによる実践ガイドprocessingのコードだけではなく、processingの歴史、ジェネラティブアートの考え方など読み物としてもとても楽しめる一冊。コードを写すけでも美しい形や、動きができ初心者でも楽しみながら学ぶことができます。―Processingで切り拓く、デザインの新たな地平フルカラー重量1.9kgという大ボリュームの一冊!美しい作品が見開きいっぱいに印刷されているので眺めているだけでもものすごく楽しいです。コードはすべてwebからDLできるので、プログラム初心者でもサンプルコードをいじりながら原理を学んでいくことができます。p5.jsp5.js本ですが、英語版のみの発売です。upLoginユーザーは見つかりませんでした。