タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、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 公開！
東京では2月に第二回 Processing Community Day が行われました［画像の説明：Processing Community Day 東京の参加者らが両手でＰのポーズを作って笑っています。］ 原文：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 はクリエイティブな表現やウェブ上でのコーディングを可能にし、アーティ
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 によ
こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いました。 可視化の方法としては、発生させる音を文字で表示するということもできるのですが、 今回は音楽再生ソフトの視覚エフェクトをイメージして作成することにしました。 Web audioを扱うTone.jsとCanvasを扱うp5.jsの2つライブラリを使用して、円環状に配置した音程に対応したバーが伸び縮みするアニメーションをCanvasに表示させます。 完成したページは以下のようになります。 音楽再生アプリの画面 完成品はこちらアップロードしておりますので、ぜひ見てみてください。 開発環境 OS MacOS Mojave バージ
ご注意: 2019年4月に執筆した書籍につき、情報が古い可能性があります。 ■ 1行でわかるこの本の趣旨 『まずは遊び感覚で機械学習に触れてみようよ!!』 ■ このキーワードにピンときたらサークルチェック！ 機械学習 / AI / アート / クリエイティブコーディング / JavaScript / Webゲーム / p5.js / ml5.js / Processing / 画像認識 / 姿勢推定 ■目次 1章 はじめに 1.1 機械学習とは 1.2 p5.js 1.3 ml5.js 1.4 実行環境の構築 1.5 サンプルを動かしてみよう 1.6 筆者の動作確認環境 2章 ImageClassifier: 画像分類器 3章 poseNet: リアルタイム姿勢推定 ■ できるようになること - Webフロントエンドで様々な機械学習を使う方法がわかる - 画像認識を使ったコンテンツが作れる
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
2020/6/5追記 ベクトルに関する動画を追加しました。遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエイティブコーディング』を、『P5.js(ProcessingのJavaScript版)』を使っていろいろ試しているうちに、もっと自然に、ボールや図形を動かしたいなと思うようになってきて。自然に動かすとなると『数学』や『物理』の知識が必要になってきます。今回のお題は『ベクトル』。できるだけわかりやすく、使えるこなせるようになるために、『ベクトル』についてまとめてみることにしました。『ベクトル』とは、ただの... 参考記事内で設定しているコードはこちら。 See the Pen p5.js vector-test2 by aoki_monpro (@suica) on CodePen. let vecLocation; let vecVelocity; function
この記事は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 でゲーム制作
p5.js でゲーム制作 JavaScript と p5.js を使って、一からゲームを作り上げるまでの過程をレクチャーします。 Tweet このサイトについて このサイトは、2020年2月1日の Processing Community Day Tokyo にて実施したワークショップ「p5.js でゲーム制作」に向けて作成した資料を、独習できるように修正して公開したものです。 資料の読み方 画面左側にあるのは、全体の目次です。 画面右側にあるのは、今見ているページの目次です。 タブレットなどで閲覧する場合、それぞれ左上と右上のアイコンをタップして開きます。 「補足」 主に初心者さん向けの補足です。 「余談」 発展的な内容、もしくは細かいことが気になる人向けの補足です。 本文を上回る量と密度なので、お暇なときにでもどうぞ。 内容について 概要 p5.js を使ったミニゲーム作りを体験します
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ファイルを用意 今回は何も
オフショア企業とのチームビルディングにP5.jsでワークショップをしたら最高だった ~オレたちの共通言語は英語じゃなくてプログラミング言語だ！~
UZUMAKIでは現在フロントエンドの業務の一部をGENKI SYSTEMと提携して仕事を進めています。業務で円滑にコミュニケーションするためにワークショップを実施しました。お互いがどんなキャラクターなのかを知り、仲良くなることが目的です。
この記事はProcessing Advent Calendar 2020の19日目の記事です。 ■ はじめに 12月になってこの度、五年付き合っている彼女と同棲を始めまして、平日の晩御飯は主に僕が担当しているんですが、如何せんもうすぐ２７歳なのに人生でここまでほとんど料理をしてこなかったので日々悪戦苦闘しています。今一番欲しいのは家庭科の教科書です。 そんな生活の中でふと思うのが「どこまでやって自分の料理と言えるか？」と言う問題です。例えばカレーライス。市販のレトルトカレーを湯煎してご飯にかけても立派なカレーライスだし、スパイスからこだわって絶妙なバランスで配合して作ったカレーもまた立派なカレーライスです。 結局は心の持ちようなのですが、こと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
Processing Advent Calendar 2019 4日目の記事です。遅刻！ ※ この記事は連載（の予定）です。前置きや前提知識などを書いたこちらの記事もどうぞ。 はじめに ジェネ1といえばランダム、ランダムといえばジェネである（諸説あり）。 座標、大きさ、色、そのほか数値で表せるようなありとあらゆる属性は、作り手が決め打ちしてもいいし、コンピュータ任せでランダムに決めてもいい。結果として、作り手すら予想しなかったような絵や動きができあがる、これはクリエイティブコーディングの醍醐味の一つと言えるでしょう。 日常的にお世話になるものですから、この機会に、 用途に応じた特殊系をいろいろ用意しておくのも悪くないのではないか。 ということで、やっていきましょう。 ［備考］ ・たいへん地味な内容なので、お暇でない人はとりあえず下の方の 作例 だけでもどうぞ。 ・乱数アルゴリズムとかの話で
p5.js 1.0 is Here!
Artists in Santiago, Chile learn p5.js in workshop led by Aarón Montoya-Moraga [Image description: Large group of smiling artists display their laptops with first colorful sketches made with p5.js] Puedes leer la versión en español de este artículo aquí. Você pode ler a versão em português deste artigo aqui. 日本語版はこちらです！ Today we are excited to announce the 1.0 Release of p5.js! p5.js is a JavaScri
こちらの本を読んで、ド文系の私がジェネラティブアートに目覚めてしまったというのが前回のエントリ。 ■ [普及版]ジェネラティブ・アート―Processingによる実践ガイド 気分がノっているので（笑）、しばらくこの本とp5.jsの話を続けます。 この本で紹介されている作品作りの考え方そのものは、特定の環境や言語に依存するものではありません。しかし、基本的にはサブタイトルにある「Processing」で作ることを前提に、解説やサンプルコードが書かれています。「Processing」を使うのであれば、書いてあるコードをそのまま打ち込めばちゃんと動きます。 Processingは、2000年代のはじめごろからOSSとして開発が続けられている由緒正しいツールであります。アーティストによるメディアアート作品にも、Processingが使われていることが結構あります。大規模な作品になると、最近は「op
p5.js shaders
Interested in shaders? Check out our documentation website for using shaders inside 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で描ける図形まとめ - 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
2020/10/20 更新：下記を追記しました。 [Material] textureMode( )、ambientMaterial( )、emissiveMaterial( )、specularMaterial( ) この記事は公式の p5.js Reference を日本語化し手直ししたものです。 このページは「P5.js 日本語リファレンス」のメインページ ( 目次 ) です。 関数別に各々のページへリンクしています。 まだ大部分が未完成ですが、完成しだい順次公開していきます。🐹💦 サンプルソースの実行検証環境： MacOS Mojave 10.14.6、p5.js-web-editor [Color] [Shape] [Constants] [Environment] [Structure] [DOM] [Rendering] [Foundation] [Transform]
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
piqcy on Twitter: "アートのためのコーディングを教える授業の教材がGitHubで公開。p5.jsやTone.jsをつかったサンプルが掲載されているほか、参考資料もかなり充実している。 https://t.co/F7OqYk1FDo"
アートのためのコーディングを教える授業の教材がGitHubで公開。p5.jsやTone.jsをつかったサンプルが掲載されているほか、参考資料もかなり充実している。 https://t.co/F7OqYk1FDo
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 Advent Calendar 2019 参加記事 p5.jsには実はたくさんのライブラリが存在します。コミッターの皆様には足を向けて寝られません。 libraries | p5.js 今回はその中からp5.speechを利用して遊んでみたいと思います！ p5.speech | Speech synthesis and recognition for p5.js p5.speechは音声認識と音声合成のためのライブラリで、これらの機能をサクッと簡単に使えるようなしくみになっています。 しゃべらせよう 音声合成のサンプルが以下のページで公開されています。 https://idmnyu.github.io/p5.js-speech/examples/02speechbox.html テキストボックスに適当な文言を入力して(日本語もいけます)、Speakボタンを押すと読み上
クリエイティブコーダー．甲南女子大学メディア表現学科講師．デイリーコーディングを提唱、実践している．
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
Tone.jsとp5.jsで音の発生を可視化する - 虎の穴開発室ブログ
【PDF版】ml5.jsとp5.jsでつくる機械学習コンテンツプログラミング - きゃべ - BOOTH
プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】
p5.jsでトゥーンシェーダーを書く - Qiita
こいつ…動くぞ！ p5.jsを触ってみたら思った以上に楽しかった話
p5.jsのnoise関数を自炊する。 - Continue(s)
【p5.jsで和柄】まとめ - ギンの備忘録
p5.js向け 有用無用道具箱 - ランダム編 - Qiita
「p5.jsでやってみよう」と思ったワケ - infosmith.biz
p5.js Web Editor で opencv.js を動的にロードして利用する - Qiita
p5.jsでのシェーダー（GLSL）入門(1)描画してみる - ギンの備忘録
p5.js と anime.js を組み合わせた Tweenアニメーション - Qiita
私の現時点のp5.jsの制作作業環境とか : だらっと学習帳
【p5.js】p5.Geometryであのドーナツをつくる - Qiita
p5.jsとp5.speechで音声合成と音声認識 : だらっと学習帳
p5.jsではじめるデイリーコーディング@Kyoto.js 17
news.yahoo.co.jp
www.gizmodo.jp
reiapapa.hatenablog.com
qiita.com/shota0616
coinpost.jp
www.google.com