p5js

はじめに 数日前に学生さんのヘルプがてら調査していました。 memorandums.hatenablog.com 研究材料はだいたい２セットは買うようにしていまして（学生さんに渡したあと何か問題があったら検証するためなどです）、自分のobnizでは上記の検証が問題なく動作したのですが、学生さんがやってみるとなぜかp5jswebeditorから動作しない、ということがありました。 一昨日、学生さんと一緒に調査していたのですがよくわからず、結局、自分のobnizで動作するので渡して使ってもらうことにしました。ちょっと余談ですが、obnizってアカウントに紐ついてしまうので共用品の場合は面倒ですね。…

追記 WebSocket用のミドルウェアがDiscordで公開されていましたので、最新のソフトウェア（Gemini）でもWebSocket通信（with leapjs）ができることを確認しました。そちらもあわせてお読みください。 ULTRALEAP（leapmotion）のV5（Gemini）＆（Win11 or Mac）でもWebSocketが使えたよ〜🎉 - memorandums はじめに 卒業研究で頑張っている学生さんを支援する目的で、私も調査したメモになります。動かすまでにハードルが色々あって。。。こりゃ大変でした。とりあえず色々な方のWebに公開してくれた情報のおかげで動かすことが…

定期試験時期がやって来ました。 Chromebookでもあれば採点が楽になるんでしょうけど、なかなかそうも行きません。 マークシートも今ひとつ。選択肢を作るのに抵抗があります。 そこで自動採点、デジタル採点です。 自動採点システムか... - memorandums 高校の先生ら有志が素晴らしいソフトウェアを無料で公開してくださっています。素晴らしい。 今回、初めて使わせていただこうとしているのですが解答欄の指定が結構面倒。。。というか僕はこういう作業が一番嫌いなので。。。どうしても楽をしたくなります。 明日、試験本番なので何とかしたいと思い、帰りの電車でUI的なものを作ってみました。全部作れ…

こちらはProcessing Advent Calendar 2021 9日目の記事です（間違えて12/8に予約投稿してしまいました泣）。 TensorFlowは機械学習界隈でよく使われるライブラリの1つですが、それをJavaScriptでも使用できるようにしたのがTensorFlow.jsです。TensorFlow.js内でも機械学習モデルの訓練ができるのですが、どちらかというと別環境にて訓練した学習済みモデルをWebブラウザ上で動かすために使われているイメージがあります。 www.tensorflow.org そんなTensorFlow.jsとp5.jsを組み合わせることでWeb上でのクリ…

p5.jsでは、DOMに要素を追加することができます。例えば、スライダー、ボタン、セレクトボックス、チェックボックス、ラジオボタンなどを作り、配置することができます。それらを操作して、図形の値を変更することができます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 crerateSlider():スライダーで値を変更する createButton():ボタンを作成し、クリックしたときの処理を追記する まとめ 参考サイト crerateSlider():スライダーで値を変更する createSlider(min, max, [value], [ste…

三角関数を使うと円周上に図形を描画することができます。三角関数の理解を深められれば、より複雑な軌道を描くアニメーションができると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 sic(),cos():円周上に図形を描画する 螺旋状に図形を描画する まとめ 参考サイト sic(),cos():円周上に図形を描画する sic()とcos()で、円周上のx座標y座標を求める。 let angle = 0; //角度 let r = 50; //半径 let x, y; //xy座標 function setup(){ createCanvas(…

乱数を使うとランダムな数字を生成することができます。色々と試すと面白いことができて、表現の幅が広がると思います。乱数を使ったサンプルコードを掲載します。私も色々な値を乱数にして、試してみようと思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 乱数:random() ランダムな円を生成するアニメーション 色をランダムにする まとめ 参考サイト 乱数:random() random():0.0～1.0の間でランダムな数値を生成 random(n):0～nの間でランダムな数値を生成 random(n, m):n～mの間でランダムな数値を生成 ラン…

p5js.org p5.jsの公式チュートリアルページの Using VS Code を見ればできる p5.jsのExtension入れて、コマンドパレットでCreate p5.js Projectでファイルが色々作成されて、最低限動くようになる。 editor.p5js.org editor.p5js.org とかをみつつやるとマイクから情報取得できたりフォント変えたりとかできるとおもう マイクの取得でエラーになったりしたら tech.motoki-watanabe.net を参照

QuickTime等でブラウザを画面キャプチャすることがある。 fpsは安定しないが使わざるを得ないときもあり、 その際、「再生速度を1/n倍にし、後で映像ソフトやffmpegでn倍速にする」と、等速より安定する。 ただ、フレームベースの処理と、時間ベースの処理が混じってることも多い。 フレーム系と時間系で頭が混乱したので、以下にまとめる。再生速度を半分にし録画したい場合。 フレーム系 frameScale = 0.5 p5jsのframeRateを半分にする（例30→15 各種update関数のframeRateも半分にする 時間系 timeScale = 2 setTimeoutを２倍にす…

ブラウザのデフォルトの機能で座標を取得する まずイラレでパスを作る。「オブジェクト＞複合パス＞解除」をした方がいい場合もある。 svgの各種APIを使う svg parser by kitasenjudesign -p5.js Web Editor var paths; function setup() { var svgText = '<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.3555 159.5796"><defs><…

自分と似た境遇の人もいるかも知れないので、自分の場合を世に放っておく。 ※個人の経験です。 概要 対象 前提となる適性 事前にやったほうがいいこと コード解説 リファレンス 作品例 適正確認の最低限の投資はしてもよいかも 言語をどう選ぶか 注意点 どうやって？ 職業訓練校択一の理由 資料 資格は必要か？ ポートフォリオは大事 事前状態 プログラマになる前のスキル プログラマに対するイメージ プログラミング関連のの知識 その他の特筆すべき状態 実際のプログラマになってみての感想 成立しているのは運がよかった証 最後に 最後に2 memo 2020-09-27 14:52:39に書いたものを202…

こんにちは、B4魚田です。風鈴の音が心地よくなる季節になりました。 今回は、私の制作に関連する、ShaderとThree.jsでのグラフィックの制作の過程の一部をまとめてみます。(前回の予告ではP5.jsを使う予定でしたが、変更しました。申し訳ございません。) Shaderと Three.jsとは？ Shader Shaderとは3DCGの描画処理プログラムのことです。オブジェクトに陰影をつけたり、表面の質感や凹凸の設定、各画素の色を決定してくれます。それぞれの機能を、オブジェクトの頂点の位置を決定するVertex Shaderと面を構成する各画素の色を決定するFragment Shaderの…

半年ほど視神経がつらい時期があってPCの画面を見るのを避けていたが，今年の盆休みは長く休養が取れたので随分回復した。復帰前に軽くリハビリを行おうと思う。 YouTubeでライブコーディング動画が多くあるのを見つけて参考にするものを決めた。 実際候補を絞る前にゲーム制作系含め色々見た気がする。 www.youtube.com editor.p5js.org 言うまでも無いがコードが短いのが気に入った理由である。 また，map関数を繋げているところとかかっこいい。 で，リハビリをどうするか迷ったところ，JavaScriptをそのまま写経しても面白みが無いのでこれを他言語に移植することにした。親しん…

クリエイティブコーディングの参考書 「クリエイティブコーディングの参考書」発行主旨・内容紹介 「クリエイティブコーディングの参考書」目次 「クリエイティブコーディングの参考書」Amazonでの購入はこちら 「クリエイティブコーディングの参考書」楽天市場での購入はこちら※電子書籍版です クリエイティブコーディングの参考書 インプレスグループでIT関連メディア事業を展開するインプレスは、迫田千紘氏著書による、技術書典や技術書同人誌博覧会をはじめとした各種即売会や、勉強会・LT会などで頒布された技術同人誌を底本とした商業書籍を刊行し、技術同人誌の普及と発展に貢献することを目指し最新の知見を発信する技…

テキストエディタを探している話を書いた。現状、使っているのは、前回も紹介した CotEtidot である。いろいろ足りないと思う点はあるものの、まあ、いきなり Pages で書くのもなあ、とも思っているので、それなりに重宝している。で、 CotEditor についての続きの話なんだが。プログラミング用のエディターとして使うには少々使いにくいことが判明した。私はおもに、 Javascript + p5.js という言語で、統計学のための学習教材を、完全に趣味で作っている。したがって、使用する言語は HTML、CSS、Javascript の3つである。それはどうでもいいのだが、こうしたコードを書…

こんにちは、B4魚田です。 2024年も半分が過ぎ、少しの外出でも汗だくになってしまう季節になりました。 今回は、4~6月に散歩中に発見した花を紹介しようと思います。 ※注意:もしかしたら、写っている花の名前が合っていない可能性があります。ご了承ください。 花紹介 1 赤いバラ バラ科バラ属の植物です。 一番有名な花の1つですね。この花を見つけたことがこの記事のきっかけとなりました。バラの複雑な構造は何度見ても驚かされます。 2 ツツジ ツツジ科ツツジ属の植物です。 花弁など、各部位がわかりやすく、中学理科の教科書の例で登場した記憶があります。 公園の通路に自生していたところを撮影しました。 …

こんにちは。 今回は、processing で「マーブリング」をやってみます。 以前にこんなツイートを見ました。 #p5js #typescript #webgl #glsl ピクセルに絵の具のような粘度を持たせて、それを箸で引っ張ったり渦を巻いたりすることができる。 pic.twitter.com/dYGtvQAAcj— miku (@BaroqueEngine) 2022年11月5日 流体シミュレータ的なものに興味があったので、こんなに単純化したモデルもあったのか、と感心していました。 そしてつい最近、我らが Shiffman 先生が Coding Challenge で似たものを取りあげ…

p5jsで学ぶJavaScript入門 「p5jsで学ぶJavaScript入門」発行主旨・内容紹介 「p5jsで学ぶJavaScript入門」目次 「p5jsで学ぶJavaScript入門」Amazonでの購入はこちら 「p5jsで学ぶJavaScript入門」楽天市場での購入はこちら※電子書籍版です p5jsで学ぶJavaScript入門 インプレスグループでIT関連メディア事業を展開するインプレスは、田中 賢一郎氏監修で、青木樂氏、國見幸加氏著書による、P5JSを使ってJavaScriptの基礎からわかりやすく説明した一冊「p5jsで学ぶJavaScript入門」をインプレス NextP…

こんにちは、ぱん@nappan23 です。この度技術書典16 「す15」に出店し、本を2冊発行することにしました。Xでは何回か宣伝していましたが、ツイートをたくさんしていて大事な情報が埋もれていそうなのと、ブログの方を見てくださっている方もいらっしゃるかと思い、こちらでも改めて宣伝させてください。 Port Tech Book #海外のTech系で働きたい女性とノンバイナリの同人誌 (B5/100P/1000円 電子・紙あり) techbookfest.org 私が所属しているPortというコミュニティの合同誌です。Portは海外で働いているまたは働きたい女性とノンバイナリの集まるコミュニティ…