JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
WebAssembly で画像のリサイズ処理をやってみたら JavaScript + Canvas API より遅かった話 - Qiita
WebAssembly(WASM) は JavaScript より計算処理が速いという話題がしばしば聞かれます。 では、単純な数値計算ではないけれど、JavaScript を利用した通常のフロントエンド開発だと時間がかかる処理を移植するとどうなるのでしょうか1。本記事ではその一例として、巨大画像（4K～）を指定したピクセル数までリサイズする処理を書いてみました。 リポジトリ: https://github.com/yokra9/wasm-image-resizer JavaScript + Canvas API でリサイズしてみる まず、比較のため JavaScript でリサイズ処理を書いておきましょう。とはいえ、TypeScript からコンパイルして生成します。 const url = "./img/sample.jpg"; const resp = await fetch(url)
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
Fetch APIのStream機能を使ってデータを読み込みながら地図を描画する
地理空間データはどうしてもデータサイズが大きくなりがちです。 通常のデータ読み込みでは、読み込みが終わるまで地図の描画を始めることができないのですが、Fetch APIのReadableStreamを使うことで、「一部データを読み込んでは地図の一部分を描画する」という分割したレンダリングを実装することができます。 サンプルコード 約50MBのポリゴンデータを読み込みながら逐次描画しています。 DEMO //地理データをstreamを使って読み込む fetch("city.txt").then((response) => { const reader = response.body.getReader(); const stream = new ReadableStream({ start(controller) { function push() { reader.read().then(
表情認識で SNOW 的なアプリ - こくぶん研究室
はじめに 身のまわりの顔認識 スマホアプリ SNOW は、カメラで顔を認識して顔にスタンプ画像を貼り付けたり、顔を変形させたり、他の人と顔を交換したりと、不思議な体験ができて人気です（iOS 用／Android 用）。スマホのカメラアプリやデジタルカメラには、顔を認識してピントを合わせたり、笑顔でシャッターを切る機能がついています。パソコンには、パスワードなしにログインできる顔認証機能が付いているものもあります。顔からユーザの年令や性別を判別する自動販売機もあります。運転手が居眠りやよそ見をしていたら警報を鳴らす装置が付いている自動車もあります。ロボットの Pepper はユーザの顔や表情を見ながら対話しています。 顔認識の方法 コンピュータでカメラの映像や画像から顔を認識する方法はいくつもありますが、基本は同じです。まず画像の中から「顔っぽい」部分を探します。顔っぽい部分が見つかったらさ
JSで3分でできる「 顔認識 」Shape Detection API（ネット接続も不要） - Qiita
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Face Detection API sample</title> </head> <body> <img src="***顔写真のある画像を指定***" id="image"> <canvas id="canvas"></canvas> <script> const image = document.getElementById('image'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let scale = 1; image.onload = function() { canvas.width = image.wi
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita
はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ
Webでどこまで遊べるか試してみた - Qiita
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
JavaScriptの三角関数とcanvasで円運動アニメーションを作る
アニメーションにおいて三角関数を使うと、面白い動きを作ることができます。JavaScriptを使って、三角関数とcanvasで円運動アニメーションを作ってみましょう。 三角比・三角関数のおさらい アニメーションにおいて、三角関数を使うと、様々な複雑な動きを表現することができます。 しかし、数学的な物事を扱うには、ある程度の知識が必要です。まずは三角比・三角関数について、軽くおさらいしておきましょう。 直角三角形と比 三角比・三角関数について知るには、まず直角三角形について知る必要があります。直角三角形って覚えてますか？ひとつの角の角度が90度の、あれです。あいつです。 直角三角形には面白い性質があります。それは次のようなものです： 角度が決まると、辺の比も決まる。 これは本当でしょうか？ 実際に確かめてみる 幾何学的に込み入った話にもできますが、今回はカジュアルに行きましょう。実際に測って
JavaScriptで取り組むクリエイティブコーディング - パーリンノイズを使いこなせ - ICS MEDIA
HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内容を記事として紹介します。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次のモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル。実装する上で重要な表現のエッセンスだけを絞って解説します サンプルを別ウインドウで開く コードを確認する ステップ① 描画のためのcanvasを用意 サンプ
【Javascript】Promiseを使ってローカルファイルからcanvasへ画像を読み込む - Qiita
document.getElementById("file").onchange = (event) => { const fileObject = event.target.files[0]; // 画像ファイル以外の場合は処理を終了する if(!fileObject.type.match(/^image\/(png|jpeg|gif)$/)) return ; // ローカルにある画像ファイルのURLを取得する const reader = new FileReader(); reader.readAsDataURL(fileObject); // 画像のソースを読み込む const img = new Image(); img.src = result; // canvasにImageオブジェクトを描画する const canvas = document.getElementById
スライドがすごいサイトのまとめ | バシャログ。
雪の降る日は犬の如くカメラを片手に新宿を駆け回ってパシャりとしておりました。gamiです。 フォトジェニックだもの。仕方ないね。 さて、シーブレインの社内チャットには様々なチャンネルがあります。案件ごとの真面目なチャンネルからひたすら動物写真を挙げる癒されチャンネルまで。 そのなかで気になるデザインをまとめるDesignClipというチャンネルが存在します。そこに投稿された中でスライドショーが気になるサイトが幾つかありましたのでまとめてお送りしたいと思います。 HII ARCHITECTS 工二建築設計事務所 スライド中央にあるロゴが面白い動きをしています。どうやらPrism Effect Slider with Canvasというのを使用しているようです。 【虎屋】虎尾名物。地瓜糕點專賣 虎屋（台湾）さつまいもを使ったお菓子のサイト。ファーストビューのスライドにマウスオンすると左右の矢印
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
2020年末でサポート終了するFlash Playerを支えた、Flashテクノロジーの全盛期と衰退を振り返ってみた
2020年末でサポート終了するFlash Playerを支えた、Flashテクノロジーの全盛期と衰退を振り返ってみた 馬場 美由紀（HTML5 Experts.jp編集部） こんにちは、HTML5 Experts.jp編集部の馬場美由紀です。【懐テク】トークライブ第二弾、今回のテーマは、Adobeが2020年にサポートを終了すると発表した「Flash」です。 Flashに造詣の深い池田泰延さん、沖良矢さん、轟啓介さんをゲストにお迎えし、Flashという技術の歴史、またFlashの役割を受け継ぐ新たな技術とは何なのか、とことん語り合っていただきました。 ※「懐かしさ」には個人差があるので、「Flashはまだ懐かしむ段階じゃない」というツッコミもあるかもしれません。そこはどうかご笑覧ください！ 今回のゲスト紹介 白石：今回ファシリテーターを務める、HTML5 Experts.jp編集長の白石俊
Socket.ioを使ってサーバーの画像が更新されたらブラウザ側も更新させるメモ - Qiita
画像ストリーミング表示っぽいものを作ってみます。 この辺りの続きです。 Node.js v8.4.0です Node.jsで画像アップロードと表示 Node.jsで画像アップロードを受けつけるサーバー とりあえずポーリングで対応 フロント側のJavaScriptで定期的に画像を更新するようにします。 ctx.clearRect()とctx.beginPath()で描画をリセットできます。 (canvasあんまり触ってないから使い方怪しいかも) 'use strict'; const canvas = document.getElementById('myCanvas'); if(!canvas || !canvas.getContext) console.log('canvasが使えないよ'); const draw = () => { const ctx = canvas.getConte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jeeliz/jeelizFaceFilter: Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.
JavaScriptでテキストの幅を取得する方法 - Qiita
本当は怖い HTML5 Canvas の Retina対応 - Qiita
canvasでピクセル単位で画像作成 - Qiita
File APIを使ってJavaScriptで画像を読み込む。canvasを使って画像を出力 - Qiita
