[B! javascript][canvas] soratomoのブックマーク

JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA

パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。作例の紹介本記事のチュートリアルの完成形はこちらになります。別タブで再生するソースコードを確認するこの記事で学べること 2Dテキストを粒子化して動かす表現パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用）制作の技術本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思

soratomo 2022/12/17

リンク

canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、フロントエンドエンジニアのぜんちゃんです。最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。今回作るアニメーションはこちらです。円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi

soratomo 2021/07/13

リンク

Processing.js基礎最速入門 - catch.jp-wiki

関連：p5.js、日本語っぽいプログラミング言語そら豆スクリプト、HTML5+JavaScript Processing.jsは、ビジュアルデザイン用プログラミング言語の先輩格である「Processing」をベースに、最新のWeb環境(HTML5のCanvas要素、Javascriptあたり)で手軽に使えるようにしたものです。この記事は、そんなProcessing.jsの簡単な入門記事です。先に書いたProcessing基礎最速入門の姉妹編になります。本記事の対象読者は、基本的にまるでプログラミング体験のない人。でもまあ、Webデザインとか少しでも知っているほうが、取り組みやすいかも知れません。自分でいろいろ調べたり探究するのが好きなほうが良いでしょう。 2011-06-06:Processing-1.2.1.js で動作確認しています。 ●なんと、日本語っぽいコードをProcessi

soratomo 2013/02/06

パーティクルとかのやつ。

リンク

要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話

2012 年 9 月 26 日追記しました。要約エントリー。元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします）もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2