JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
JavaScriptで取り組むクリエイティブコーディング - パーリンノイズを使いこなせ - ICS MEDIA
HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内容を記事として紹介します。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次のモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル。実装する上で重要な表現のエッセンスだけを絞って解説します サンプルを別ウインドウで開く コードを確認する ステップ① 描画のためのcanvasを用意 サンプ
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
Isomer – an isometric graphics library for HTML5 canvas
About Isomer allows you to draw isometric graphics with ease. Let's draw a simple cube. var Shape = Isomer.Shape; var Point = Isomer.Point; iso.add(Shape.Prism(new Point(0, 0, 0))); The Grid Here is the same cube overlayed with a 3D grid. This is how objects look under an isometric projection. /** * This is the 3D isometric grid that * we will be drawing on. * * The blue grid is the xy-plane. * Th
『スマートフォン向けJavaScriptライブラリ tofu.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ 現在ブラウザベースの新規ゲームの立ち上げをしています、2013年入社のチャーリー@charlie10151015です！ 主にフロント側をメインにJavaScriptというへんてこな言語を書いています。 最近のマイブームは3D関連でthreejs, webGL, Blenderなどに手を伸ばしております。 tofu.jsについてお話できればと思います。 tofu.jsとは？tofu.jsはHTML5に組み込まれたcanvasをFlashライクなコードで利用できるJavaScriptのライブラリです。 弊社の主席エンジニアが開発し、
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
Shifty!
Shifty is a tweening engine built in JavaScript. It is designed to fit any number of tweening needs. Features include: Speed - Shifty is optimized for performance. Works well as the base function in a prototype chain. Modular, extensible architecture allows you to use only the Shifty components you need. Small download: Full library (with all extensions) is about 3K minified and gzipped. The cor
Canvasをより手軽に使いやすくするフレームワーク·KineticJS MOONGIFT
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS
クリエイティブコーディングを補助するフレームワーク·sketch.js MOONGIFT
sketch.jsはマウスの入力に反応するデジタルアートを作成するフレームワークです。 Webは表現の場です。必ずしも何かのサービスを作らないといけない訳ではありません。そこで今回はsketch.jsを紹介しします。クリエイティブなコーディングを助けてくれるJavaScriptフレームワークになります。 デモの作品です。マウスを動かすとボールが表示されます。 最初は大きく、次第に小さくなっていきます。 sketch.jsはProcessingやOpen Frameworksを使った事がある方であればすぐに使い方が習得できるそうです。基本的にはマウスの動きによって何らかのオブジェクトを描いたりアクションを起こすという使い方になるそうです。グラフィックスはCanvasまたはWebGLを使って描きます。 sketch.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウ
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
– このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
SeuratJS - A Raphaël plugin for creating beautiful pointillized animations.
A Raphaël plugin for creating beautiful pointillized animations. Download ZIP File Download TAR Ball View On GitHub View the Project on GitHub gsmith85/seuratjs Pointillize and Pixelize all on the Client Side SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an im
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://yamineko.lv9.org/Fabric.js%20Javascript%20Canvas%20Library/fabric-intro-part-1/fabric-intro-part-1.html
GitHub - DaRaFF/jsgamewiki: A collection of good links for gaming with javascript
http://www.cmmntr.com/m/22
Updating