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 によ
私が感動した Processing 製の作品のソースコードを解析してみた
こんにちは．株式会社ゆめみの Keeth こと桑原です．Twitter には #つぶやきProcessing という魅力的なタグがあり，毎日数々の美しい作品がこのタグを付けて投稿されています．これを眺めるだけでも一日中過ごせるくらいです（個人の感覚です）． 今日はその中でも特に度肝を抜かれ，かつ感動した作品が 2022/11/04 に投稿されておりましたので，個人の拙い能力で解析に挑戦してみました💁 ※一部解析しきれていない部分がありますが，ご容赦いただけますと幸いです…何分勉強中の者でして… 作品 なにはともあれ今回対象の作品． 初めてみたときは思わず言葉を失いました．いや，これ twitter のツイートですのでかなり文字数も少ないんですよ！なのにこの表現ってどうなってんの！？と… これはかなり学びになると思い解析を試みようと思い立った次第です．それにしても美しい… ソースコード で
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
Aaron Koblin - Flight Patterns
Awards/Festivals National Science Foundation 1st Pl. Science Visualization Japan Media Arts Festival Ars Electronica SIGGRAPH Coachella Golden Horse Taiwan iDat Singapore Media Art Fiesland Boston Cyber Arts TED MediaMatic Todays Art This work was originally developed as a series of experiments for the project "Celestial Mechanics" by colleagues Scott Hessels and Gabriel Dunne at UCLA. FAA data wa
2D and 3D Perlin noise
In many of the programs we build with p5.js, from video games to generative art to interactive applications, we sometimes like to have a bit of randomness to create unexpected and dynamic behavior. Many times though, the random() function is too random -- sometimes we want a function that wanders around but remains smooth and organic. For this reason, p5.js has a function called noise(), which gen
#1 なめらかな多角形から始まるジェネラティブアート｜梶田悠｜note
シリーズ概要下記のツイートのpolygon distortionを作るまでの工程をわかりやすく解説し、更により良いものにしていくまでを道のりをいくつかのnoteに分けて書いていこと思います。 作成ツールはprocessingを用います。(processing初めての方はなめらかサンショウウオさんのnoteやサイトにチュートリアルあるのでそちらも参考に。) #1 僕編 シリーズ初回の今回はまずこのnoteのメインビジュアルにある曲線的な三角形を作ります。これは僕のSNSアイコンとして使っているので僕編です。 僕の作り方を解説していきます。みんなも僕を作ってね~ 論理的な解説便宜上今回作るモノを「僕」と名前をつけます。 「僕」の構造は単純で三角形が毎フレーム描画されそれが集まってできているだけです。前のフレームで描画した三角形より少し大きくした三角形を描くので徐々に大きくなります。画像のよう
アートを切り替えて不思議に魅せる技法について（Processing Advent Calendar 2020 Day1） - gotutiyan’s blog
本記事は，Processing Advent Calendar 2020の1日目の記事です．10周年だそうで，おめでとうございます！ 目次 目次 2020振り返り・Processingコミュニティについて はじめに 雛形 簡単な実例で！ 市松模様で作るアート 前準備 「黒タイル側」の実装 「白タイル側」の実装 拡張：切り替わる速さの調節 考察：この技法はどのようなアートに適用できるか？ おわりに 2020振り返り・Processingコミュニティについて せっかくのアドカレの記事なので，簡単な振り返り（という名の過去作の宣伝）と，コミュニティ関係の話を少しだけ書きます． 今年もアート制作という形でProcessingにたくさん触れました．今年は20個ほど作品を作っていて，今までの分と合わせてGitHubで公開しています．GitHubにはそれなりに厳選して載せているので，つぶやきProces
Generative Bad Handwriting
So.. I made a popular tweet last week in the #つぶやきProcessing circles. j=24,m=0,draw=(a=>{for(v=(i=>w/3*(n=noise)(i)-k),createCanvas(w=1e3,w),noFill(),background('#fd7'),translate(0,m--),i=0,y=0;y<w-m;y+=j)for(x=k=90;x<w-k;x+=9)if(y+k>-m?curve(v(i++)+x,v(i++)+y,x,j+y,x+9,j+y,v(i++)+x,v(i++)+y):i+=4,x+=v(i++)%9,n(x*y)<.13)y+=j});//#つぶやきProcessing pic.twitter.com/WNIwAAAXjQ — atulvinayak (@atulvinaya
プログラミングガイド「コードとデザイン」 概要 | Yasushi Noguchi Class
こちらでは、pdfで配布されるプログラミングガイド「コードとデザイン」 の、プログラミング実習の部分を公開しています。 全てのページをご覧になりたい方は、pdfをダウンロードしてください。 タイトル デザイナー、アーティストのためのプログラミングガイド 野口靖 ダウンロード 先日ver.0.9を公開しましたが、現在ver.1.0を校正中です。pdf版は少々お待ちください。 サンプルコードはダウンロードできます。 code_design_samples 学生作品ページ https://r-dimension.xsrv.jp/classes_j/p5_study/ はじめに 本書は、デザイン、アート、情報学関連の大学に在籍する学生や、プログラミングに興味はあるけれどもちょっと敷居が高いなと感じているデザイナーやアーティストのみなさんに、プログラミングによる造形表現の楽しさを実感していただくこと
Robert Hodgin – Portfolio v2
Google Maps API x Houdini 3D Renders of Google Data Google Maps API x Houdini3D Renders of Google Data Individuation Paper Simulation IndividuationPaper Simulation Akari Lanterns Procedural Lantern Generator Akari LanternsProcedural Lantern Generator Meander Procedural Map Generator for Meandering Rivers MeanderProcedural Map Generator for Meandering Rivers Traffic Simulation TrafficSimulation Sta
GitHub - terkelg/awesome-creative-coding: Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
Generative Art: A Practical Guide - Practical guide using Processing. Generative Design - Visualize, Program, and Create with Processing. The Nature of Code - Simulating natural systems with Processing. Programming Design Systems - Practical introduction to the new foundations of graphic design. Learning Modern 3D Graphics Programming - Series of tutorials on using OpenGL to do graphical rendering
p5.js shaders
Interested in shaders? Check out our documentation website for using shaders inside p5.js
日常とプログラミングをつなぐ習慣「デイリーコーディング」とは？ 第一人者に聞く
プログラミングでつくるアートや表現に興味のある人々の間で広がりを見せている「デイリーコーディング」。第一人者でもあり、自らも実践している甲南女子大学講師の高尾俊介さんにお話をうかがいました。 甲南女子大学講師の高尾俊介さんにインタビュー この連載ではこれまで、忙しい社会人や非理科系の学生さんなどプログラミングを集中的に学ぶ環境から少し距離のある人たちが、はじめてプログラミングに挑戦し楽しく継続的に学んでいくためのアプローチを紹介してきました。 今回は、プログラミングでつくるアートや表現に興味のある人々の間で広がりを見せている「デイリーコーディング」を紹介します。デイリーコーディングは、直訳すれば「毎日、コードを書く」こと。毎日コードを書くのはちょっとハードルが高そうな感じがしますが、実際はどうなのでしょうか。 デイリーコーディングを実践し、Twitterやプログラミング作品の共有サービスで
おまたせ！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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using Processing for Music Visualization
Trying to understand the "Substrate" algorithm
Glitch Effect
リアルタイム 3D サーフェースシェーダ in WebGL | LAB | Q'TECHNICAL
Maps, Maps, Maps!
最近の品 (1/3 ~ 2/12)｜おかず｜note