1 - 22 件 / 22件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
ウェブサイトにおけるダイナミックなクリエイティブ表現の裏側には、多くの場合JavaScriptライブラリの力があります。有名なものにThree.jsがありますが、HTML Canvasを利用したライブラリであるp5.jsの表現力も決して劣りません。本記事では、まだあまり知られていないp5.jsを使ったウェブサイトを通して、p5.jsのウェブ制作への活用方法を紹介します。 p5.jsの表現力を活かしたウェブサイト/アプリケーション紹介 p5.jsは、ProcessingをベースにしたJavaScriptライブラリで、ビジュアル表現やインタラクションの実装を得意とします。描画はHTMLの<canvas>タグに出力されるため、既存のコンポーネントやフレームワークとも統合できます。 本記事では、p5.jsの活用事例のうち、Awwwardsで評価されたものを紹介します。 ※(注記)Awwwardsとは、優れ
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code(以下VS Code)とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
去年の年末くらいから、会社のメンバーで「WeeklyCodingしてみよう & p5jsさわってみよう」という、ゆるい取り組みがはじまりました。 それがきっかけで個人的にデイリーコーディングをし始めたので、備忘も兼ねてソースを載せていきたいと思います! (デイリーコーディング続けられたよ、という記事も書いたのでぜひ・・・) この1ヶ月は、1日1つを目標に「和柄」をかいてみました。 パターン(繰り返す)ときのアイデアメモ✏️ 作ってる途中で気づいたのですが、私はこう作ってたようです。 というのを先にメモしておきます。 「1」とする単位(柄)を決めて作る この柄を1として、それが繰り返してるな〜をさがします。 それを1つのfunctionにまとめて書きます。 さらにその柄の中でも繰り返してる部分があれば、細分化をしていきます。 パターン以外でも、絵を分解する意識するとコードに落とし込むのが捗る
この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。 上記の内容は、以下の 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サイト事例集』では、p5.jsを活用してクリエイティブな表現を実現しているウェブサイトを紹介しました。本記事では次のステップとして、実際にp5.jsを活用しウェブサイトのヒーローエリアを実装する作例と実装時の注意点を紹介します。本記事では、三角関数を用いた周期的なアニメーション、p5.jsによるマウスインタラクション、そしてp5.jsを全画面に展開したWebページの実装例を学べます。 作例とコードの解説 今回用意した作例では、波のようなビジュアル表現と、マウス操作によってビジュアルが変化する表現を組み合わせています。カーソル移動やクリックによってビジュアルが変化します。なおTypeScriptでコードを記述し、Viteを使
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
この記事は 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と銘打っていますが、テキストベースのプログラミングの入門書として書いています。文系でなくても(大学生ですらなくても)、これから初めてテキストベースのプログラミングを勉強する人には参考になるかもしれません。 このオンラインテキストをベースに、図やイラストを追加して充実させたものが本になりました。Scratchからのステップアップを目指しているので趣旨はすこし異なりますが、こちらもぜひ ↓ 『はじめての "文字で打ちこむ" プログラミングの本』(技術評論社)
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
オフショア企業とのチームビルディングにP5.jsでワークショップをしたら最高だった ~オレたちの共通言語は英語じゃなくてプログラミング言語だ!~ 概要UZUMAKIでは現在フロントエンドの業務の一部をGENKI SYSTEMと提携して仕事を進めています。業務で円滑にコミュニケーションするためにワークショップを実施しました。お互いがどんなキャラクターなのかを知り、仲良くなることが目的です。 ワークショップはp5.jsという、クリエイティブコーディング(簡単に説明すると、丸や四角や線などを描画して動かしたりする)のためのプログラミング言語を使って行いました。 全員初めて触れるプログラミング言語でしたが、日本、ベトナム双方のメンバーがソースコードを媒介に楽しそうにコミュニケーションを取っていました。 仕事上のチャットで使う共通言語は英語になりますが、ベトナム人メンバーも日本人メンバーもそれほど英
この記事はProcessing Advent Calendar 2020の19日目の記事です。 ■しかく はじめに 12月になってこの度、五年付き合っている彼女と同棲を始めまして、平日の晩御飯は主に僕が担当しているんですが、如何せんもうすぐ27歳なのに人生でここまでほとんど料理をしてこなかったので日々悪戦苦闘しています。今一番欲しいのは家庭科の教科書です。 そんな生活の中でふと思うのが「どこまでやって自分の料理と言えるか?」と言う問題です。例えばカレーライス。市販のレトルトカレーを湯煎してご飯にかけても立派なカレーライスだし、スパイスからこだわって絶妙なバランスで配合して作ったカレーもまた立派なカレーライスです。 結局は心の持ちようなのですが、こと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版です。 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 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は知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコンピュータグラフィックス描画できます。 p5.jsではWebGLに対応しているため、シェーダー言語のGLSLを用いた描画表現が可能です。 今回、この記事ではp5.js上でGLSLを扱った描画方法を紹介していきます。 GLSL自体はかなり奥が深く、筆者自身も初学者で誤った理解などあるかもしれません。ご了承下さい。 まず、「シェーダー」、「WebGL」、「GLSL」とは何かを簡単に抑えてから、p5.jsでGLSLを扱う方法を説明していきます。 用語 シェーダー WebGL GLSL シェーダーを試す 色を指定する グラデーション
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 と組み合わせて使う場合の書き方は、以下の
この記事は、Processing Advent Calendar 2021 3日目の記事です。 みんな大好きなあのドーナツを、p5.jsのクラスp5.Geometryを活用して作っていきます。 (この記事を書いた際に使ったp5.jsのバージョンは、1.4.0です) ソースコードは下のOpenProcessingのリンクから見ることができます。 0. はじめに 0.1 p5.Geometryって何? WebGLでは3Dモデルを描画する際に、あらかじめ作成した各頂点の位置ベクトルや法線ベクトルなどの頂点データが入った頂点バッファと、どの頂点3つを用いた3角形を描くかの情報(インデックス配列)が入ったインデックスバッファを呼び出すことで同じ形状のモデルを効率的に描画しています。 例えば、以下の頂点の位置情報が入った頂点バッファと、[ 0, 1, 2 ]の頂点3つと[ 1, 3, 2 ]の頂点3つ
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ページを開く