Content-Length: 219442 | pFad | https://b.hatena.ne.jp/q/p5.js
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
p5.jsで和柄をつくろう
去年の年末くらいから、会社のメンバーで「WeeklyCodingしてみよう & p5jsさわってみよう」という、ゆるい取り組みがはじまりました。 それがきっかけで個人的にデイリーコーディングをし始めたので、備忘も兼ねてソースを載せていきたいと思います！ (デイリーコーディング続けられたよ、という記事も書いたのでぜひ・・・) この1ヶ月は、1日1つを目標に「和柄」をかいてみました。 パターン(繰り返す)ときのアイデアメモ✏️ 作ってる途中で気づいたのですが、私はこう作ってたようです。 というのを先にメモしておきます。 「１」とする単位(柄)を決めて作る この柄を1として、それが繰り返してるな〜をさがします。 それを1つのfunctionにまとめて書きます。 さらにその柄の中でも繰り返してる部分があれば、細分化をしていきます。 パターン以外でも、絵を分解する意識するとコードに落とし込むのが捗る
おまたせ！p5.js 1.0 公開！
原文：Lauren McCarthy 翻訳：Ayato, deconbatch, reona396, takawo（アルファベット順） Puedes leer la versión en español de este artículo aquí. You can read the English version of this post here. Você pode ler a versão em português deste artigo aqui. p5.js のバージョン1.0が公開されました！p5.js はクリエイティブな表現やウェブ上でのコーディングを可能にし、アーティスト、デザイナー、教育者、初心者全てに向けた JavaScript ライブラリです。プロジェクト開始から7年が経ちましたが、Kate Hollenbach が一年前にロードマップを作成してからバージョン 1.
p5.js と ml5.js の組み合わせでブラウザ上でのリアルタイム物体検出を試す（COCO-SSD を利用） - Qiita
この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。 上記の内容は、以下の OpenProcessing のスケッチにアクセスすると、実際に試していただくことができます。 ●ml5.js で物体検出（COCO-SSD を利用） - OpenProcessing https://openprocessing.org/sketch/1795350 実装した内容の話 今回の内容は、p5.js と ml5.js の 2つを組み合わせて作っています。その実装内容や、実装に関する補足を、この後に書いていきます。 実装の際に参照した情報 実装時には、以下の ml5.js公式のドキュメントを見て実装しました。 ●ObjectDetector https://learn.ml5js.org/#/reference/object-detector ml5.js によ
p5.js Web Editor
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
p5.jsで動くゲーム風読み込み画面作ってみた
この記事は GMOアドマーケティング Advent Calendar 2021 24日目の記事です。 はじめに こんにちは、GMOアドマーケティングのR.Yです。 今回はp5.jsを使用して読み込みの長い画面でも退屈しないようなゲーム風読み込み画面を作成しましたのでその紹介です。 p5.jsとは p5.jsとはJavaをベースに作られた「Processing」と言う電子アートのプログラミング言語をJavaScriptで使用できるようにしたライブラリになります。p5.jsを使うことでブラウザ上で表示できるアニメーションを作成することができます。 サンプル 文字だけではわかりづらいと思うのでp5.jsによるアニメーションのサンプルを用意しました。以下が実際の表示とプログラムになります。※以降の動画は全て当社が作成したものになります。 sample.html <script src="https
この記事はProcessing Advent Calendar 2020 6日目の記事です。 0. はじめに 0. 1 シェーダーって何？ シェーダー(shader)とは、動詞"shade"「陰をつける，明暗(濃淡)をつける」に"-er"「～するもの」がついた名前の通り、「3DCGで陰影処理を行うプログラム」のことです。 p5.jsのWEBGLモードにおいては、loadshader()で外部ファイルとして読み込む、またはcreateshader()でString型として記述したものを読み込むことによって、自分で書いたシェーダーを使うことができます。 自作のシェーダーを使わない場合には、p5.jsライブラリ標準のシェーダーが使われます。シェーダーを自分で書く際には、はじめのうちは標準シェーダーを書き換えるような形で行うことがおすすめです。 0. 2 トゥーンシェーダーって何？ 「トゥーンシェ
文系大学生のためのp5.js入門
文系学科の大学生を対象としたp5.jsの入門書です。p5.jsと銘打っていますが、テキストベースのプログラミングの入門書として書いています。文系でなくても（大学生ですらなくても）、これから初めてテキストベースのプログラミングを勉強する人には参考になるかもしれません。 このオンラインテキストをベースに、図やイラストを追加して充実させたものが本になりました。Scratchからのステップアップを目指しているので趣旨はすこし異なりますが、こちらもぜひ ↓ 『はじめての “文字で打ちこむ” プログラミングの本』（技術評論社）
P5.js – A library to make coding accessible for artists, designers, educators | Hacker News
For art performance in browsers, you may want to check hydra synth:https://hydra.ojack.xyz/ Here is the live coding performance I did for the Algorave 10th birthday online 24h streaming where I used Hydra for visuals: https://youtu.be/atoTujbQdwI?t=317 This is so cool! thanks for sharing it Olivia I had found this other cool project of yours from 2007 recently when looking into making generative m
あけましておめでとうございます。 本年もアウラをどうぞよろしくお願い申し上げます。 皆様、年末年始はどのようにお過ごしでしたでしょうか。 私は、せっかく頂けた長期休みなんだから何か実のあることをしたい！と考えた挙句、ゲーム作ってました（何故） Processing、そしてp5.js ひょんなことから、デジタルアートを作れるプログラミング言語「Processing」を知り、更にProcessingをJavaScriptに移植した「p5.js」を知りました。 楽しそうだし勉強にもなるし一石二鳥！とウキウキ触ってみると、これが結構楽しいのです。 お前、最近画像やらデジタルアートネタばっかりじゃないかと思ったそこのアナタ、私もそう思います。 でも、仕方がないんです。遊びがい学びがいのあるものに出会ってしまったら、堪能したくなるのが人の性（開き直り） まずは表示用のHTMLファイルを用意 今回は何も
この記事はProcessing Advent Calendar 2020の19日目の記事です。 ■ はじめに 12月になってこの度、五年付き合っている彼女と同棲を始めまして、平日の晩御飯は主に僕が担当しているんですが、如何せんもうすぐ２７歳なのに人生でここまでほとんど料理をしてこなかったので日々悪戦苦闘しています。今一番欲しいのは家庭科の教科書です。 そんな生活の中でふと思うのが「どこまでやって自分の料理と言えるか？」と言う問題です。例えばカレーライス。市販のレトルトカレーを湯煎してご飯にかけても立派なカレーライスだし、スパイスからこだわって絶妙なバランスで配合して作ったカレーもまた立派なカレーライスです。 結局は心の持ちようなのですが、ことp5.jsを使って作品を作る身となったとき、そこにはすでに様々な便利な関数が用意されています。市販のレトルトカレーがすでに他の人が作ったソースコードの
オフショア企業とのチームビルディングにP5.jsでワークショップをしたら最高だった ~オレたちの共通言語は英語じゃなくてプログラミング言語だ！~
オフショア企業とのチームビルディングにP5.jsでワークショップをしたら最高だった ~オレたちの共通言語は英語じゃなくてプログラミング言語だ！~ 概要UZUMAKIでは現在フロントエンドの業務の一部をGENKI SYSTEMと提携して仕事を進めています。業務で円滑にコミュニケーションするためにワークショップを実施しました。お互いがどんなキャラクターなのかを知り、仲良くなることが目的です。 ワークショップはp5.jsという、クリエイティブコーディング(簡単に説明すると、丸や四角や線などを描画して動かしたりする)のためのプログラミング言語を使って行いました。 全員初めて触れるプログラミング言語でしたが、日本、ベトナム双方のメンバーがソースコードを媒介に楽しそうにコミュニケーションを取っていました。 仕事上のチャットで使う共通言語は英語になりますが、ベトナム人メンバーも日本人メンバーもそれほど英
市松 七宝 鱗 青海波 網目 一の字繋ぎ 菱 矢絣 亀甲 檜垣 釘抜 紗綾形 立涌 角繋ぎ 籠目 ねじ梅 分銅繋ぎ 千鳥卍 蚊絣 麻の葉 市松 gin-graphic.hatenablog.com 七宝 gin-graphic.hatenablog.com 鱗 gin-graphic.hatenablog.com 青海波 gin-graphic.hatenablog.com 網目 gin-graphic.hatenablog.com 一の字繋ぎ gin-graphic.hatenablog.com 菱 gin-graphic.hatenablog.com 矢絣 gin-graphic.hatenablog.com 亀甲 gin-graphic.hatenablog.com 檜垣 gin-graphic.hatenablog.com 釘抜 gin-graphic.hatenablog.com
p5.jsをはじめよう｜文系大学生のためのp5.js入門
以下のツイートで掲載していたように、以前、p5.js Web Editor で opencv.js を利用する、ということをやったのですが、その時に行った内容の記事化です（大晦日ハッカソン2022 絡みで、この内容を活用いただけそうだったため、記事化し忘れていたのを書いて公開）。 前に試した時からライブラリのバージョンがあがっていました。そのため、今回は以下の最新版にしてから動作を確認しています。 p5.js 1.5.0 opencv.js 4.7.0 ソースコードの内容など p5.js Web Editor で opencv.js を使うために過去に試行錯誤して、sketch.js のみに手を加えるやり方で動作をさせることができていました。 その時に作ったプログラムを、以下に掲載します。 ちなみに、index.html と style.css は、p5.js Web Editor が生成
p5.js shaders
Interested in shaders? Check out our documentation website for using shaders inside p5.js
p5.jsで描ける図形まとめ - Qiita
p5.jsで描ける図形についてまとめました。 この記事は以下の記事のp5.js版です。 Processing で描ける図形まとめ - Qiita 円・楕円 ellipse() や circle() で描けます。 ellipseは横の大きさと縦の大きさを別々に指定できるため、楕円が描けます。 circleは直径を指定することでまんまるの円(正円、真円)が描けます。 function setup() { createCanvas(400, 400); } function draw() { background(255); // 中心線 strokeWeight(1); stroke(200); line(0, height / 2, width, height / 2); line(width / 2, 0, width / 2, height); noFill(); strokeWeigh
この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコンピュータグラフィックス描画できます。 p5.jsではWebGLに対応しているため、シェーダー言語のGLSLを用いた描画表現が可能です。 今回、この記事ではp5.js上でGLSLを扱った描画方法を紹介していきます。 GLSL自体はかなり奥が深く、筆者自身も初学者で誤った理解などあるかもしれません。ご了承下さい。 まず、「シェーダー」、「WebGL」、「GLSL」とは何かを簡単に抑えてから、p5.jsでGLSLを扱う方法を説明していきます。 用語 シェーダー WebGL GLSL シェーダーを試す 色を指定する グラデーション
P5.js 日本語リファレンス - Qiita
2024/05/10 更新: buildGeometry()を作成しました。 2024/05/08 更新: beginGeometry()、endGeometry()を作成しました。 2024/05/04 更新: normal()を作成しました。 2024/05/02 更新: beginClip()、endClip()、clip()を作成しました。 2024/05/02 更新: 3年半ぶりに更新を再開しました｡現時点での最新版であるv1.9.3までに追加されたAPIを一覧に追記しました｡内容については今後順次記載していきます｡ この記事は公式の p5.js Reference を日本語化し手直ししたものです。 このページは「P5.js 日本語リファレンス」のメインページ ( 目次 ) です。 API別に各々のページへリンクしています。 [3D] [Color] [Shape] [Const
JavaScript で Tweenアニメーションが扱えるライブラリを調べてみると、よく出てくるものがいくつかあります。 今回の記事では、調べてよく出てくるライブラリの中の1つである「anime.js」を使い、「p5.js」で Tweenアニメーションを試してみた、という話です。 他の Tweenアニメーション用JavaScriptライブラリと p5.js を組み合わせた事例 anime.js を試していく前に、他の Tweenアニメーションが扱えるライブラリと p5.js を組み合わせた事例が既にあるので、以下に記載してみます。 GSAP ●GSAP Basic - OpenProcessing https://openprocessing.org/sketch/1227453 こちらは GSAP というライブラリとの組み合わせです。 p5.js と組み合わせて使う場合の書き方は、以下の
p5.jsでスケッチを制作する際にどんな感じの環境でやってるのかを晒します。 OSはMacです。 もっと効率の良いツール情報もお待ちしております！！ あと色んな人の作業環境知りたい！あなたの作業環境もぜひ晒してください。 ターミナル 「p5-manager」を入れています。 p5.js用のファイル構成を自動で生成してくれたり、index.html中のライブラリロード記述をあらかじめやっといてくれる優れもの！ p5-manager - npm 毎回、p5 g -b PROJECT_NAMEしてプロジェクトディレクトリごとにp5.jsライブラリをダウンロードして使ってたんですが、 今調べてみたら一度親ディレクトリ生成のためにp5 new my_collectionして、その後にそのディレクトリ内でp5 g my_projectしていけば子ディレクトリが生成される上に、子ディレクトリ内のinde
p5.Geometryはp5.jsライブラリで定義されているクラスであり、この頂点バッファとインデックスバッファのもととなる頂点データやインデックス配列をクラス変数としてまとめて定義することができます。 reference : https://p5js.org/reference/#/p5.Geometry 0.2 p5.jsで立体を描画する関数 box()やsphere()などの立体を描画する関数の処理では、p5.Geometryの作成とそれをもとに作成されたバッファの呼び出しが行われています。p5.jsライブラリの立体描画のソースコードは、以下のリンクから見ることができます。 1. ドーナツ関数を書く 1.1 下準備 まずは、ドーナツ以外の背景や光の設定などを行いましょう。 作成するドーナツの代わりとして、トーラスを描画します。 function setup() { // WebGLモ
Processingで作品をつくった！ みんなに見てほしい！触ってほしい！遊んでほしい！ というわけでwebで公開するためにp5.jsに書き換えてみましょう〜！ 【2021/03/15 追記】 3Dの項目を追記 p5.jsとは p5.jsはProcessingの特徴を受け継いだJavaScriptライブラリです。 home | p5.js Processingの文法と一部は共通で、webでも柔軟にクリエイティブな表現ができるようになっています。 同じようなライブラリでProcessing.jsというライブラリもありましたが、 継続的なメンテナンスがされていないため、現在ではp5.jsの利用がオススメです。 Processing系作品投稿サービスのOpenProcessingでもProcessing.jsでの投稿はdeprecated(非推奨)とされています。 Processingjs De
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: https://b.hatena.ne.jp/q/p5.js
Alternative Proxies:
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
p5.jsでトゥーンシェーダーを書く - Qiita
こいつ…動くぞ！ p5.jsを触ってみたら思った以上に楽しかった話
p5.jsのnoise関数を自炊する。 - Continue(s)
【p5.jsで和柄】まとめ - ギンの備忘録
p5.js Web Editor で opencv.js を動的にロードして利用する - Qiita
p5.jsでのシェーダー（GLSL）入門(1)描画してみる - ギンの備忘録
p5.js と anime.js を組み合わせた Tweenアニメーション - Qiita
私の現時点のp5.jsの制作作業環境とか : だらっと学習帳
ビジュアル作成向けライブラリ「p5.js」でJavaScriptを学べる入門書が発売／『p5jsで学ぶJavaScript入門』【Book Watch/ニュース】
【p5.js】p5.Geometryであのドーナツをつくる - Qiita
Processingの作品をwebで公開するためにp5.jsに書き換えよう : だらっと学習帳
kokokki.com
note.com/kakio_ja
dic.pixiv.net
dl.ndl.go.jp
www.techinferno.com
search.app