p5.js スピード 入門 – HIM.CO ヒム・カンパニー
mouseIsOverとmouseIsPressed スプライトはmouseIsOverとmouseIsPressedプロパティを持っていて、mouseActiveプロパティを有効化することで、動作するようになります。 […] 続きを読む
4_6：応答：キー p5.js JavaScript – HIM.CO ヒム・カンパニー
p5.jsは、キーボードのいずれかのキーが押し下げられているかどうかを追跡します。システム変数のkeyIsPressedは、何らかのキーが押し下げられているときtrueを返し、どのキーも押し下げられていないときにfalseを返します。 キーの押し下げ 次のコードは、いずれかのキーが押し下げたときだけ赤い線を描画します。 function setup() { createCanvas(240, 120); } function draw() { background(204); stroke(0); line(20, 20, 220, 100); // いずれかのキーが押し下げられているなら if (keyIsPressed) { stroke(255, 0, 0); line(220, 20, 20, 100); } } draw()は1秒間に60回の頻度で呼び出されるので、ほぼ常時、ke
p5.jsで作った動画をgifにしてNotionの背景を動かすぞ_CCapture.js - herohoroブログ
2022/06/09_Twitter embedの表示に失敗していましたが貼り直したら表示されるようになりました。 実はこっそりNotionホーム画面晒しをのぞきまくっていたへろほろ。 その中でも私的に ビビビッときたのがチャベスさんのホーム画面でした。 noteの記事では目からウロコな情報ばかりで、 「さらっと読んで終わる記事ではないな 🤔」 と思い日を改めてガッツリ読み解くことにするくらいワクワクする内容です。 なにより驚かされたのは、 チャベスさんのこだわりポイント３つが私のやりたかったことと重なっていたことでした。 ✳️ ヘッダー画像とアイコン画像はいい感じに動くgifにしたい ✳️ 内容は基本的に各ページへのリンク集でシンプルにしたい ✳️ ダッシュボード的な感じで定期的に見たい情報をグラフで置きたい
【p5.js】キー入力を取得してインタラクティブなものを作る:keyIsPressed,keyTyped(),keyIsPressed() - 元Webデザイナー兼コーダーの備忘録
キー入力を取得して、インタラクティブなものを作ります。キーの状態によって処理を変更したり、キーが押されたときの処理の書き方を見ていきます。キー入力を取得できると、キーによる操作ができるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 keyIsPressed:キーの状態を取得する 特定のキーを押したときの処理 keyTyped():特殊なキーを無視する keyIsPressed():大文字小文字を区別しない まとめ 参考サイト keyIsPressed:キーの状態を取得する キーが押されているかどうかを取得する。ここでは、キーが押されているときに、塗りの色を変更する。 let r = 50; function setup(){ createCanvas(200, 200); noStroke(); } function draw(
p5.jsでマウスの動きを受け取ろう|Processing Fan
マウスの入力を受け取ることで、インタラクティブ(対話的)な作品を作ることができます。 マウスを使った代表的なプログラムはお絵かきプログラムあるいはゲームチックな作品も作ることができます。 マウスの位置を受け取ろう もっとも重要な情報はマウスの位置でしょう。 マウスの位置は、processingで用意されている特別な変数mouseXとmouseYに自動的に入っています。 var w = 200; var h = 200; function setup(){ createCanvas(w, h); background(100); } function draw(){ background(100); text("x: " + str(mouseX) + ", y:" + str(mouseY), 10, 170); } マウスが横方向に何pxのところにいるかがmouseXへ、縦方向に何pxの
DNA描画ツールを公開しました｜sakatani
DNA Drawer学生時代に使っていたDNA模式図描画ツールのweb版を公開しました。 環状DNAとかPowerPointでつくるの面倒なときにどうぞ。 こんな感じです。左右のスライダーとパレットの値を変えて、好みの核酸にします。 画像としてエクスポートする機能は無いので、スクショして保存してください。 DNAの色、線の太さ、背景色、長さ、らせんの幅、回転の数などを好きに変えられます。 二重鎖のずれ具合も好きな割合に設定できます。 もちろん直鎖DNAも、一本鎖DNAも可能です。 RNAと言い張ることもできます。 思い切って7重らせんまで増やすことも可能です。今のところ「はい、7重らせんはこんなですね」と確認するくらいしか用途はありません。 コードは以下のリポジトリで公開しています。 ProcessingのJavaScript化このアプリは元々ProcessingというJavaベースの言語
p5.jsで図形を回転させる
p5.js で図形を回転させる方法について解説していきます。 本記事は『p5.js で学ぶプログラミング入門』の補足です。 回転の考え方 p5.js における図形の回転は、translate 関数 と rotate 関数 を組み合わせて行います。英単語の意味どおり、translate は移動、rotate は回転を表します。 大事なポイントは、図形そのものを回転させるのではなく、キャンバスを回転させるということです。 絵を手描するときも、回転した四角を描くのって難しいですよね（四角はまあ描けるとしても顔とかは難しいですよね）。そんなときは紙のほうを回転させると、描くのは回転なしの □ で済みます。 p5.js でもこれと同じ考え方をします。p5js だけでなく、プログラミングでグラフィックを扱うときの一般的な考え方だと思います。 もう一つ押さえておくべきポイントは、キャンバスを回転させると
p5.jsでプログラミング入門
この書籍は、中学生向けにプログラミングの基礎を学ぶための入門書です。簡単で楽しい「p5.js」というツールを使って、プログラミングの基本を学びながら、創造的な作品を作成します。論理的思考力や問題解決能力を身につけながら、デジタルの世界で自分のアイデアを表現する楽しさを体験できる一冊です。
p5.js : p5.jsを触ってみた
Processingで適当な作品を細々と公開している私ですが、やっとp5.jsを小一時間ほど触ってみましたのでノートしておきたいと思います。 p5.js 私の視点からp5.jsを見た特徴としては、 Processingの文法（図形の書き方とか、setup/drawによるフレームワークとか）の知識が使える Processing.jsよりも、JavaScriptとしてかけるので書きやすい SoundやCameraなどのライブラリが使える！ といったところです。 Processing.jsで作品をWeb上に公開するときは、Processingとして作成したものを「移植する」感覚が強かったですが、p5.jsではその辺の敷居が下がっていると思います。 Processingだと、Javaとして取り込んでいたライブラリが使えないとか、そもそもブラウザ上だとキャンバスサイズの変更が起きうるのでその辺の配慮
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
libraries | p5.js
(p5.js) RIGHT doesn't trigger in function mouseClicked()?
マウス＆キー入力｜文系大学生のためのp5.js入門
クラス｜文系大学生のためのp5.js入門
文系大学生のためのp5.js入門
配列｜文系大学生のためのp5.js入門
p5.gui
GUI Sample by kanolab -p5.js Web Editor
GitHub - bitcraftlab/p5.gui: p5.gui magically generates a graphical user interface for your p5.js sketches
p5canvas - Visual Studio Marketplace
p5js Snippets - Visual Studio Marketplace