クリエイティブコーディングã®æ•™ç§‘書
ゲームエンジンや3Dソフトウェアを利用ã—ã¦é«˜åº¦ãªè¡¨ç¾ãŒã§ãã‚‹ã“ã®æ™‚代ã§ã‚‚ã€ãƒ—リミティブãªæ画や動ãã€ã‚¢ãƒ«ã‚´ãƒªã‚ºãƒ ã‹ã‚‰å¦ã¹ã‚‹ã“ã¨ã¯å¤šã„。ãれらをJavaScriptã§æ›¸ãクリエイティブコーディングã¨ã„ã†å½¢ã§å¦ã¹ã‚‹æ‰‹å¼•æ›¸ãŒæœ¬æ›¸ã¨ãªã‚‹ã€‚
p5.js Share
p5.js Share Let's share the code of p5.js around the world! Please upload as much anything as simple artworks and amazing artworks. Art at 500x500 sizes.
p5.js ã®ã‚¹ã‚±ãƒƒãƒã‚’展示ã§ãるサービスを試ã—ã¦ã¾ã¨ã‚ã¦ã¿ãŸ : ã らã£ã¨å¦ç¿’帳
p5.js ã®ã‚¹ã‚±ãƒƒãƒã‚’展示ã§ãるサービスを試ã—ã¦ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ 2019/03/19追記 : NEORTã‚’è¿½åŠ ã—ã¾ã—ãŸã€‚ 2021/01/15追記 : 最新ã®æƒ…å ±ã«ã‚¢ãƒƒãƒ—デートã—ã¾ã—ãŸã€‚ OpenProcessing OpenProcessing - Algorithmic Designs Created with Processing Processingã®è€èˆ—投稿サイトã§ã™ã€‚ã©ã‚Œãらã„è€èˆ—ã‹ã¨ã„ã†ã¨Javaアプレットã§æŠ•ç¨¿ã—ã¦ãŸæ™‚代ãŒã‚ã£ãŸãらã„ã§ã™ã€‚ p5.jsãŠã‚ˆã³Processing.jsã§ã®æŠ•ç¨¿ã‚’å—ã‘付ã‘ã¦ãŠã‚Šã€äº¤æµæ©Ÿèƒ½ã‚„作å“ã«å¯¾ã™ã‚‹ãŠæ°—ã«å…¥ã‚Šæ©Ÿèƒ½ãªã©ã‚‚æä¾›ã•ã‚Œã¦ã„ã¾ã™ã€‚ (※2021/01/15追記 : Processing.jsã§ã®æŠ•ç¨¿ã¯ã§ãã¾ã™ãŒæŠ€è¡“çš„ã«å¤ã„ã®ã§éžæŽ¨å¥¨ã¨ãªã£ã¦ã„ã¾ã™) 最近リニューアルã•ã‚Œã¦ã€ä½œå“ãŒã‚ˆã‚Šã‹ã£ã“よã展示ã§ãるよã†ãªå·¥å¤«ãŒå‡ã‚‰ã•ã‚Œã¦ã„ã¾ã™
p5pchat 〜p5.js ã§paint chat〜 - ã¤ã‚‰ãã®æ—¥è¨˜
ã“ã®è¨˜äº‹ã¯Processing Advent Calendar 2015ã®15日目ã®è¨˜äº‹ã§ã™ã€‚ å‰ç½®ã 昔，幾ã¤ã‹ãŠçµµã‹ãソフトを作ã£ãŸï¼Ž turanegaku.hateblo.jp turanegaku.hateblo.jp ã›ã£ã‹ãã ã‹ã‚‰é€šä¿¡ã—ãŸã„ã¨è€ƒãˆãŸã®ã ãŒï¼Œ processing.netã®Serverã¨Clientを使ã†ã¨ãªã‚‹ã¨ã¡ã‚‡ã£ã¨é¢å€’ãã•ã„． ã©ã†ã›ãªã‚‰socket.ioを使ã£ã¦æ¥½ã€…ã‚„ã‚ŠãŸã„ã¨è€ƒãˆãŸï¼Ž ã¨ã„ã†ã“ã¨ã§p5.js, node.js, socket.ioを使ã£ã¦ï¼ŒãŠçµµã‹ããƒãƒ£ãƒƒãƒˆã‚½ãƒ•ãƒˆã‚’作ã£ãŸï¼Ž p5pchat p5pchat 下記ã®èª¬æ˜Žé€šã‚Šã«ä½œæ¥ã‚’è¡Œã†ã¨ç°¡å˜ã«é€šä¿¡ã‚’è¡Œã†ã“ã¨ãŒã§ãる． github.com ã¤ãã‚Šã‹ãŸ 当åˆã®äºˆå®šä»¥ä¸Šã«ãŸã æŒã£ã¦ãã‚‹ã ã‘ã ã£ãŸã®ã§ï¼Œã©ã†ã‚„ã£ã¦ã¤ãã£ãŸã®ã‹ã‚’書ããž!!! 目標 herokuã«upã—ã¦localã˜ã‚ƒãªã，socket.
p5.jsサンプルプãƒã‚°ãƒ©ãƒ
p5.js プãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã‚¬ã‚¤ãƒ‰ サンプルプãƒã‚°ãƒ©ãƒ æ¾ç”°æ™ƒä¸€ã€ç”±è°·å“²å¤«ã€æ¤Žé‡Žç¶¾èœ è‘— ã“ã®ãƒšãƒ¼ã‚¸ã§ã¯åˆç‰ˆï¼ˆ2015年発行）ã®ã‚µãƒ³ãƒ—ルプãƒã‚°ãƒ©ãƒ を紹介ã—ã¦ã„ã¾ã™ã€‚改訂版（2021年発行）ã®ã‚µãƒ³ãƒ—ルプãƒã‚°ãƒ©ãƒ ã«ã¤ã„ã¦ã¯å½“該書ç±ã«è¨˜è¼‰ã®URLã‚’å‚ç…§ã—ã¦ãã ã•ã„。 サンプルプãƒã‚°ãƒ©ãƒ ã¯ç« ã”ã¨ã«æ§‹æˆã•ã‚Œã¦ã„ã¾ã™ã€‚詳ã—ãã¯ã€ç¬¬1ç« ã®ã‚µãƒ³ãƒ—ルプãƒã‚°ãƒ©ãƒ ã®å‹•ã‹ã—方をå‚ç…§ã—ã¦ãã ã•ã„。ãƒãƒƒãƒˆã§å…¬é–‹ã•ã‚Œã¦ã„るサンプルプãƒã‚°ãƒ©ãƒ ã¯ã€ã“ã“をクリックã—ã¦ãã ã•ã„。本書ã§å‚ç…§ã—ã¦ã„るリンク一覧ã“ã“をクリックã—ã¦ãã ã•ã„。 ï¼»2015-12-1è¿½åŠ ï¼½p5jsSamples.zip（約112MB）：本ページãŠã‚ˆã³æœ¬ãƒšãƒ¼ã‚¸ä»¥ä¸‹ã®éšŽå±¤ã®ãƒªãƒ³ã‚¯å…ˆã‚’å«ã‚€ZIPファイルã§ã™ã€‚サンプルファイルを一括ã—ã¦ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ãŸã„å ´åˆã«ã”利用ãã ã•ã„。 第2ç« p5.jsã¨JavaScript入門 DrawFunction: 「ã“ã‚“ã«ã¡ã¯ã€
p5.jsã§ãƒ•ãƒ«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã®canvasを作ã£ãŸã¨ãã®ãƒˆãƒ©ãƒ–ルã¨è§£æ±º - Processingä¸æ¯’者ã®å˜”å物
GSwCCã®ãƒˆãƒƒãƒ—ページã§å‹•ãフルスクリーンã®p5.jsを最åˆã«ä½œã£ãŸã¨ãã®ã“ã¨ã€‚ function setup(){ createCanvas(windowWidth, windowHeight); } ã¨ã—ã¦ã€ç”»é¢ã„ã£ã±ã„ã¡ã‚‡ã†ã©ã®ã‚µã‚¤ã‚ºã‚’指定ã—ã¦ã„ã‚‹ã¯ãšãªã®ã«ã€ç¸¦æ¨ªã¨ã‚‚ã«ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ãŒå‡ºã¦ã—ã¾ã£ã¦ã„ã¾ã—ãŸã€‚ã“ã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã‚’ãªã‚“ã¨ã‹æ¶ˆã—ãŸãã¦è‰²ã€…調ã¹ã¦èª¿æ•´ã—ã¦ãŸã®ã§ã™ãŒä¸Šæ‰‹ãè¡Œã‹ãšã€æœ€çµ‚兵器ã¨ã—ã¦Twitterã§å‘Ÿã„ãŸã¨ã“ã‚見事フォãƒãƒ¯ãƒ¼ã•ã‚“ã«åŠ©ã‘ã¦ã„ãŸã ã„ãŸã®ã§ã€ãã®ä¼šè©±ã‚’載ã›ã¦ãŠãã¾ã™ã€‚ @P5Aholic canvasã«display:block;ã‚’ã„ã‚ŒãŸã‚‰ç¶ºéº—ã«å‡ºãŸã®ã§ã€canvasãŒç¸¦æ–¹å‘ã«æ•°ãƒ”クセル拡張ã•ã‚Œã¦ã€ã¯ã¿å‡ºã¦ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ãŒå‡ºã¦ã„ã‚‹ã®ã‹ãªã€ã¨æ€ã„ã¾ã—ãŸã€‚ç´°ã‹ã„仕組ã¿ã¯åˆ†ã‹ã‚‰ãšã§ã™ãŒã€‚。ã“ã‚Œã£ã¦è‡ªå‹•ç”Ÿæˆã§ã—ょã†ã‹ã€‚手動ãªã‚‰CSSã„ã˜ã‚Œã°ç›´ã‚‹ã‹ã¨ï¼â€” ã¯ã…å›
Monaca 㧠p5.js をスマホアプリã¨ã—ã¦å‹•ã‹ã—ã¦ã¿ãŸ : ã らã£ã¨å¦ç¿’帳
クラウド上ã®ã‚¢ãƒ—リ開発環境ã§ã‚ã‚‹ Monacaクラウド を利用ã—ã¦ã€p5.js をスマホアプリã¨ã—ã¦å‹•ã‹ã—ã¦ã¿ã¾ã—ãŸã€‚ Processing本家ã®Androidモードã¯æœ€è¿‘ã§ã¯ä»Šã²ã¨ã¤ãªçŠ¶æ…‹ã§ã™ãŒã€ p5.js + Monaca を利用ã™ã‚Œã°ç°¡å˜ã«ã‚¹ã‚±ãƒƒãƒã‚’スマホ上ã§å‹•ã‹ã›ã‚‹ã®ã§ä¾¿åˆ©ã§ã™ã€‚ Androidã ã‘ã§ãªãiOSç‰ã§ã‚‚å‹•ã‹ã›ã¾ã™ã—〠何よりブラウザ上ã§é–‹ç™ºã§ãã‚‹ã®ã§ç‰¹åˆ¥ãªç’°å¢ƒæ§‹ç¯‰ã‚’å¿…è¦ã¨ã—ãªã„ã®ã‚‚良ã„ã§ã™ã。 開発方法 Monacaã®ã‚µã‚¤ãƒˆã¸è¡Œãã€ã‚µã‚¤ãƒ³ã‚¢ãƒƒãƒ—ã€ãƒã‚°ã‚¤ãƒ³ã‚’è¡Œã„ã¾ã™ã€‚ Monaca - HTML5ãƒã‚¤ãƒ–リッドアプリ開発プラットフォームãã®å¾Œã€ãƒ€ãƒƒã‚·ãƒ¥ãƒœãƒ¼ãƒ‰ã‹ã‚‰ã€Œæ–°è¦ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®ä½œæˆã€ã‚’é¸æŠžã—〠「最å°é™ã®ãƒ†ãƒ³ãƒ—レートã€ã‚’é¸æŠžã—ã¾ã™ã€‚ 上部ツールãƒãƒ¼ã‹ã‚‰ è¨å®š > JS/CSS コンãƒãƒ¼ãƒãƒ³ãƒˆã®è¿½åŠ ã¨å‰Šé™¤ ã‚’é¸æŠžã—ã¾ã™ã€‚ 検索ボックスã«ã€Œp5ã€ã¨å…¥åŠ›ã—ã¦æ¤œç´¢ã—ã¾ã™ã€‚
p5/D3 Cookbook
The p5 D3 Cookbook is a repository of documented examples for integrating the features of D3.js into the p5.js library. D3.js offers a wealth of tools for manipulating data and connecting data to visual representations. p5.js, whose goal is to make coding accessible for artists, designers, educators, and beginners, provides a environment where users can sketch their ideas in code. Together, these
cv-examples
A collection of computer vision examples for p5.js by @kcimc. Including jsfeat, clmtrackr, js-objectdetect, JSARToolkit, oflow, and tracking.js. Download from GitHub. Low level (analyzes single pixels): Empty Average Brightness Thresholding Brightest Point Color Detection Background Subtraction Frame Difference Medium Level (analyzes patches of pixels): Motion History Point Tracking Optical Flow E
p5.jsã¨three.jsã«ã‚ˆã‚‹éŸ³å£°ã«åå¿œã™ã‚‹3Då†å¸°æœ¨ – Fujimura Seminar
HTML5ã§ã¯ã€PCã®ãƒžã‚¤ã‚¯ã‚„カメラã‹ã‚‰éŸ³å£°ã‚„æ˜ åƒã‚’å–å¾—ã™ã‚‹Media Streamã¨å‘¼ã¶ã‚¤ãƒ³ã‚¿ãƒ•ã‚§ãƒ¼ã‚¹ãŒæä¾›ã•ã‚Œã¦ã„ã¾ã™ã€‚ã“ã®æ©Ÿèƒ½ã¯IE11ã‚„Safariã§ã¯ã€ã¾ã 実装ã•ã‚Œã¦ãŠã‚‰ãšã€Chromeã¨Firefoxã®ã¿ã®ã‚µãƒãƒ¼ãƒˆã§ã™ãŒã€ä»Šå›žã€ã“ã®æ©Ÿèƒ½ã‚’活用ã—ã¦ã€å…ˆé€±æŠ•ç¨¿ã—ãŸthree.jsã«ã‚ˆã‚‹3Då†å¸°æœ¨ã‚’ã€ãƒžã‚¤ã‚¯ã‹ã‚‰æ‹¾ã£ãŸéŸ³å£°ã«å¿œã˜ã¦å‹•ãよã†ã«ã—ã¦ã¿ã¾ã—ãŸã€‚以下ã®ç”»åƒã‚’クリックã™ã‚‹ã¨ã€ãƒ–ラウザãŒãƒžã‚¤ã‚¯ã‚’使用ã—ã¦ã‚ˆã„ã‹å°‹ãるダイアãƒã‚°ãƒœãƒƒã‚¯ã‚¹ãŒè¡¨ç¤ºã•ã‚Œã¾ã™ã®ã§ã€ãれをONã«ã—ã¦ã¿ã¦ä¸‹ã•ã„。3D木ãŒè¡¨ç¤ºã•ã‚ŒéŸ³å£°ã«å¿œã˜ã¦å‹•ãã¾ã™ã€‚YouTubeãªã©ã§éŸ³æ¥½ã‚’æµã™ã¨è¸Šã‚Šã¾ã™ã€‚ 今回ã€p5.jsã¨ã„ã†ãƒ©ã‚¤ãƒ–ラリを使ã£ã¦Media Stream APIを利用ã—ã¾ã—ãŸã€‚p5.jsã¯ã€Processingã«è¿‘ã„コーディングスタイルã§ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚„メディアæ“作ãŒå®¹æ˜“ã«è¨˜è¿°ã§ãã‚‹JavaScriptã®ãƒ©ã‚¤ãƒ–ラ
メディアアート系ã§é‡è¦ãªæ•°å¼ãƒ»æ¦‚念 & p5.jsã§éŠã¶ - Qiita
é«˜æ ¡æ•°å¦ãŒãƒœãƒãƒœãƒã§ã‚‚大丈夫ã§ã™ã€‚（ ã‚‚ã¨ã‚‚ã¨å€‹äººçš„ã«ã‚¤ãƒ³ãƒ—ットã—貯ã‚ã¦ã„ãŸã‚‚ã®ã§ã™ãŒã€æ›¸ããªãŠã—ã¦å…¬é–‹ã—ã¾ã™ã€‚ 地味ã§ã™ãŒã€æ´¾æ‰‹ãªå‹•ãã¯ã“ã®åœ°å‘³ãªæ•°å¼ãƒ»æ¦‚念ãŒãƒ™ãƒ¼ã‚¹ã«ãªã£ã¦ãã¾ã™ã€‚ ã¾ãŸã€ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¢ãƒ¼ãƒˆã¨ã¯è¨€ã£ãŸã‚‚ã®ã®ã€ã‚²ãƒ¼ãƒ 制作ãªã©ã«ã‚‚役立ã¤ã§ã—ょã†ã€‚ 「ラジアンã¨ã¯ï¼Ÿã€ã€Œã‚µã‚¤ãƒ³æ³¢ã‚’æãã€ã€Œå††è»Œé“ã‚’æãã€ã€Œå¼¾å¹•ï¼ˆ2点間ã®è·é›¢ç³»&角度系）ã€ã€Œå¤šè§’形をæãã€ã€Œãƒ•ãƒ©ã‚¯ã‚¿ãƒ«ã€ã¨ã„ã£ãŸãƒ†ãƒ¼ãƒžã§ã™ã€‚ ã¾ãŸã€ãã®ãƒ—レイグラウンドã¨ã—ã¦p5.js（Processingã®js版）をã”紹介ã—ã¾ã™ã€‚2014å¹´ã«ãƒªãƒªãƒ¼ã‚¹ã•ã‚ŒãŸã‚‚ã®ã§ã¾ã マイナーã§ã™ãŒCodePenã®ã‚ˆã†ãªæµ·å¤–サイトã§ã¯äººæ°—ãŒå‡ºã¤ã¤ã‚ã‚Šã¾ã™ã€‚ã¾ãŸProcessingå…¬å¼ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆãªã®ã§å®‰å¿ƒæ„Ÿã‚‚ã‚ã‚Šã¾ã™ã。ã¡ãªã¿ã«ã€Processing.jsã¨ã¯åˆ¥ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã™ã€‚ ##ラジアンã¨ã¯ï¼Ÿ ・ラジアンã¯å˜ä½ 角度ã«ã¤ã„ã¦ã®ã‚‚ã†ä¸€ã¤ã®å˜ä½ã§ã™ã€‚ 角度
p5.jsを使ã£ã¦è‡ªä½œã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚»ãƒ¼ãƒãƒ¼ã‚’作る - åŠç©ºæ´žç”·å¥³é–¢ä¿‚
夜ä¸ã®ãƒ†ãƒ³ã‚·ãƒ§ãƒ³ã§ä½œã‚‹ã®è‰¯ããªã„。ãšã£ã¨è¦‹ã¦ã‚‹ã¨ç›®ãŒç—›ããªã‚‹ã€‚ mactkg/p5.js-screen-saver · GitHub 作ã£ãŸã€‚p5.jsã§æ›¸ã„ãŸã‚¹ã‚¯ãƒªãƒ—トãŒãã®ã¾ã¾ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚»ãƒ¼ãƒãƒ¼ã«ãªã‚‹ã‚„ã¤ã€‚ソースコードã€ã»ã¨ã‚“ã©notona/ugoira-screen-saver · GitHubã‚’å‚考ã«ã—ã¦ã¦ã€WebViewã¯ã£ã¤ã‘ã¦ã‚‹ã ã‘。WebViewãŒã‚ャッシュã—ã¦ã‚‹ã¨æ›´æ–°ã•ã‚Œãªã„ã“ã¨ãŒã‚ã‚‹ã‹ã‚‰ãã“ã ã‘変ãˆã¦ã‚‹ã¨æ€ã†ã€‚ インタラクティブ・プãƒã‚°ãƒ©ãƒŸãƒ³ã‚°å‹‰å¼·ä¼š 第1回 乱数 | fladdictã¨ã‹ã‚’å‚考ã«ã™ã‚‹ã¨é¢ç™½ã„ã‚‚ã®ãŒä½œã‚Œã‚‹ã‹ã‚‚ã—ã‚Œãªã„。ãŠæ°—ã«å…¥ã‚Šã®å‹•ãã¨ã‹ã‚’スクリーンセーãƒãƒ¼ã«ã—ãŸã‚Šå‡ºæ¥ã‚‹ã¨æ¥½ã—ã„ã‚“ã˜ã‚ƒãªã„ã§ã—ょã†ã‹ã€‚ éŠã³æ–¹ ã¾ãšp5.js-screen-saverã‚’è½ã¨ã™ Releases · mactkg/p5.js-screen-saver · GitHub 解å‡
mbedJS + p5.jsã§Webブラウザã‹ã‚‰mbedを制御ã™ã‚‹ - Imaginary Code
mbedJSを使ã†ã¨ã€mbedã§Webページ連動ã®ãƒãƒ¼ãƒ‰ã‚¦ã‚§ã‚¢ã‚’作るã“ã¨ãŒã§ãã¾ã™ã€‚今回ã¯mbedJSã®å°Žå…¥æ–¹æ³•ã‚’説明ã—ã€mbedJSã¨p5.jsã®é€£æºã€iPadã§ã®åˆ©ç”¨ãªã©ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ mbedJSã¨ã¯ mbedJSã¯mbedã‚’ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯çµŒç”±ã§åˆ¶å¾¡ã™ã‚‹ãŸã‚ã®ã‚µãƒ¼ãƒãƒ•ã‚¡ãƒ¼ãƒ ウェアã§ã™ã€‚mbed上ã§Webサーãƒã¨ã—ã¦å‹•ä½œã—ã€PCやスマートフォンã‹ã‚‰Webブラウザを使ã£ã¦mbedã«ã‚¢ã‚¯ã‚»ã‚¹ã™ã‚‹ã¨WebページãŒè¡¨ç¤ºã•ã‚Œã¾ã™ã€‚ユーザã¯ãã®Webページ上ã§æ“作を行ã†ã“ã¨ã«ã‚ˆã‚Šã€mbedã®å…¥å‡ºåŠ›ã‚’制御ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ mbedJSã§ã¯JavaScriptを使ã£ã¦mbedã®APIを呼ã³å‡ºã›ã‚‹ã‚ˆã†ã«ãªã£ã¦ãŠã‚Šã€ãƒ—ãƒã‚°ãƒ©ãƒžã¯JavaScriptã¨HTMLを使ã£ã¦Webページ連動ã®ãƒãƒ¼ãƒ‰ã‚¦ã‚§ã‚¢åˆ¶å¾¡ã‚’記述ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ å¿…è¦ãªã‚‚ã® mbedJSã‚’å‹•ã‹ã™ã«ã¯ä»¥ä¸‹ã®ã‚‚ã®ãŒå¿…è¦ã§ã™ã€‚ mbed ãƒ
第6回: Web応用3 – 最終課題「インタラクティブ・サウンド・アニメーションã€ã«å‘ã‘ã¦
最終課題ã®ãƒ†ãƒ¼ãƒž :「インタラクティブ・サウンド・アニメーション〠金曜日ã®ã‚µã‚¦ãƒ³ãƒ‰ã®æŽˆæ¥ã§ä½œæˆã—ãŸéŸ³ã‚’使用ã—ã¦ã€Webブラウザ上ã§ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ä½œå“を制作ã—発表ã™ã‚‹ã€‚ éŸ³éŸ¿ç´ æ : サウンド（矢å‚先生） プãƒã‚°ãƒ©ãƒŸãƒ³ã‚° : ãƒãƒƒãƒˆï¼ˆç”°æ‰€ï¼‰ ã“ã®2ã¤ã®è¦ç´ ã‚’èžåˆã™ã‚‹ インタラクションã¯ã€ã‚ーボードæ“作を基本ã¨ã™ã‚‹ãŒã€ãれ以外ã®ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ï¼ˆãƒžã‚¦ã‚¹ã€Webカメラã€ã‚»ãƒ³ã‚µãƒ¼?）を使ã†ã®ã¯è‡ªç”± 授æ¥ã§ã¯ã€p5.jsを使用ã—ã¦è§£èª¬ã™ã‚‹ãŒã€ãれ以外ã®Javascriptã®ãƒ©ã‚¤ãƒ–ラリã€ãã®ä»–ã®è¨€èªžã‚’使用ã—ã¦ã‚‚良ㄠãŸã ã—作å“ã¯Webブラウザã§ç™ºè¡¨ã§ãã‚‹ã‚‚ã®ã«é™å®š 先週ã®ãƒ—ãƒã‚°ãƒ©ãƒ ã®å¾©ç¿’ 先週作æˆã—ãŸã€ã‚ー入力ã«ã‚ˆã£ã¦ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã¨éŸ³ã‚’å†ç”Ÿã™ã‚‹ã‚µãƒ³ãƒ—ルã«ã¤ã„ã¦ã€å†åº¦å¾©ç¿’ã—ã¾ã™ã€‚ sketch.js var sample = []; var animation; var num;
第5回: Web応用2 – P5.jsã§ã‚µã‚¦ãƒ³ãƒ‰ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°
å‰å›žã«å¼•ã続ãp5.jsã§Webブラウザ上ã§ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã—ã¦ã„ãã¾ã™ã€‚今回ã‹ã‚‰ã¯ã€p5.jsã§ã‚µã‚¦ãƒ³ãƒ‰ã‚’扱ã£ã¦ã„ãã¾ã™ã€‚最終目標ã®ã‚¤ãƒ¡ãƒ¼ã‚¸ã¨ã—ã¦ã€éŸ³ã¨æ˜ åƒã‚’インタラクティブã«æ“作ã™ã‚‹ä½œå“ã€ä¾‹ãˆã°ã€patatapã®ã‚ˆã†ãªä½œå“ã‚’Webブラウザ上ã§ç™ºè¡¨ã—ã¾ã™ã€‚ patatap – http://www.patatap.com/ サンプルファイル 今回ã¨ã‚Šã‚ã’るプãƒã‚°ãƒ©ãƒ ã®ã‚µãƒ³ãƒ—ルã¯ã€å…¨ã¦ä¸‹è¨˜ã‹ã‚‰ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰å¯èƒ½ã§ã™ã€‚ https://github.com/tado/SoundNet14 サウンドファイルã®æº–å‚™ 手元ã«ã‚µã‚¦ãƒ³ãƒ‰ãƒ•ã‚¡ã‚¤ãƒ«ã‚’準備ã—ã¾ã™ã€‚ã‚‚ã—ã€æ‰‹å…ƒã«é©å½“ãªã‚µã‚¦ãƒ³ãƒ‰ãŒãªã„å ´åˆã«ã¯ã€freesoundã‚„soundcloudã‹ã‚‰ãƒ•ãƒªãƒ¼ã®ã‚µã‚¦ãƒ³ãƒ‰ç´ æをダウンãƒãƒ¼ãƒ‰ã—ã¦ä½¿ç”¨ã—ã¾ã—ょã†ã€‚ 最終的ã«ä½œå“ã§ä½¿ç”¨ã™ã‚‹ã‚µã‚¦ãƒ³ãƒ‰ã¯ã€é‡‘曜日ã®ã‚µã‚¦ãƒ³ãƒ‰ã®æŽˆæ¥ã§ä½œæˆã—ãŸã‚‚ã®ã§ä½œæˆã—ã¾ã™ã€‚ サウンドファイルをå†ç”Ÿã™
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
p5.jsアプリをスマートフォンã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã•ã›ãªã„
Making your sketches work on mobile devices (Creative Coding)
please don't cry
coursescript.com - coursescript リソースãŠã‚ˆã³æƒ…å ±
p5.js + p5.dom.js + clmtracker.js
{{#tags}}- {{label}}
{{/tags}}