[B! Canvas] mut00tumのブックマーク

mut00tum id:mut00tum

Canvasに関するmut00tumのブックマーク (19)

HTML canvasを画面いっぱいに表示したい - Qiita
canvasのサイズをwindowサイズに合わせて画面いっぱいに表示させたい。そんなとき、canvasのサイズ指定をjQueryの.css()を使ってやろうとするとうまくいきません。具体的に書くと、 HTML:
mut00tum 2016/05/10
Canvas

画面

サイズ
リンク
パーティクル編集ツール Particle Develop - ICS
Particle DevelopはHTML5製のデザインツールです。雪や炎、キラキラなどのパーティクル表現を作成でき、ベクター画像として保存することができます。
mut00tum 2016/04/14
パーティクル

CreateJS

Canvas

エフェクト
リンク
CreateJS での画像の表示方法 - ICS MEDIA
CreateJSでは、画像ファイル形式のPNG画像/JPEG画像/GIF画像/SVG画像を画面に表示することができます。Adobe PhotoshopやIllustratorなどのソフトウェアでグラフィックや写真・イラストを作成することで、表現の幅が広がるでしょう。それらのソフトウェアで汎用フォーマットのPNG形式もしくはJPEG形式で保存しておきます。 CreateJSで画像を表示するにはcreatejs.Bit mapクラスを利用します。コンストラクターの引数には画像のURLを設定します。書式 new createjs.Bit map(画像のURL); サンプル var bmp = new createjs.Bit map("sample.png"); stage.addChild(bmp); サンプルを再生するサンプルのソースコードを確認する ※このサンプルでは、createjs.Ti
mut00tum 2016/04/14
“ローカル上ではHTML5 Canvasのセキュリティーの制限”

Canvas

CreateJS
リンク
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日︵火︶、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料﹁CreateJSで制作するスペシャルコンテンツ﹂のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。なお、前編︵CanvasとWebGLの比較︶と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは﹁HTML CanvasとWebGLの使い分け﹂です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト︶は従
mut00tum 2016/03/29
Canvas

WebGL
リンク
HTML5 Canvasでシューティングゲーム
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLAtsushi Tadokoro
mut00tum 2016/03/09
Canvas

game

開発
リンク
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー﹁ParticleJS﹂を公開しました。﹁ParticleJS﹂は大量の粒子︵パーティクル︶の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。また、﹁Particle Develop﹂という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを﹁ParticleJS﹂にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
mut00tum 2016/03/03
パーティクル

effect

Canvas

ライブラリ
リンク
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク﹁CreateJS﹂の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。導入編 webのリッチコンテンツを作るためのフレームワーク﹁CreateJS﹂。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例簡単なサンプルを試そうブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
mut00tum 2016/01/18
CreateJS

Canvas
リンク
CryptArisMission.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
mut00tum 2015/12/26
game

Canvas

WebGL
リンク
iPhoneでビデオプレーヤーを立ち上げること無く、Safari内でムービーが流れているようにみせる - みかづきブログその3
iPhoneでvideoタグのplayを叩くと、ビデオプレイヤーが立ち上がってしまいますがそのままブラウザ内で見たいというケースもあると思います。そんなときにつかえるようなつかえないような技を紹介します。（iOS9.0.2 の iPhone6 では動きました）用意するもの再生したいムービー（mp4など）再生したいムービーの音だけ切り出したもの（mp3など） ※ 音とムービーが同じ長さであることを前提としています ※ どちらもiOSで再生できるコーデックで書き出してください方針 canvas、video、audioを用意 videoのsrcにmp4パスをいれる audioでmp3を再生 audioのcurrentTimeを取得 videoのcurrentTimeをaudioのcurrentTimeにあわせる（playはしない） canvasにvideoをレンダリング audioの再
mut00tum 2015/10/15
iPhone

Canvas

video
リンク
「ActionScript3.0アニメーション」をcanvasで置き換える　引き合うパーティクル | nouv.labo
今回はChapter12のノードガーデンを作成する。パーティクルをランダムに移動させ、それぞれの距離が200ピクセルより近ければ、近いパーティクル方向へより加速させる。 [Flash] http://nouv.biz/labo/20120902_nodeGarden/flash/NodeGardenTest.html [ javascript] http://nouv.biz/labo/20120902_nodeGarden/javascript/nodeGarden.html 線を描画するときの透明度指定が少々ぎこちない。javascriptではこんな風なのだろうか。 var alpha=1-dist/minDist;//距離が遠いほど小さい→遠いほど透明になる var rgba=’rgba(255, 255, 255,’ + alpha + ‘)’; context.strokeSt
mut00tum 2015/09/04
node garden

Canvas

アニメーション
リンク
◎「点と線」と名付けられたJavaScriptによる画像のうねうねした動きが面白いのでご紹介！
mut00tum 2015/09/04
node garden 線と点のアニメーション

Canvas

アニメーション
リンク
第6回　アニメーションする粒子間に引合う力を加える | gihyo.jp
今回のお題は、ランダムに動く粒子の間に相互作用を加えたアニメーションだ。ランダムな動きにオブジェクト同士のインタラクションを交えると、有機的なアニメーションになってくる。Jared Tarbell氏がかつて﹁Node Garden﹂という作品を発表された。Keith Peters氏はそのノード間にバネ運動を加えて、著書﹃ActionScript 3.0アニメーション﹄で解説している。本稿はその表現をCreateJSで書いてみようと思う。ステージのランダムな位置に、ランダムな方向と速さで動く小さなオブジェクトをたくさん置く。それらのオブジェクトの間に引っぱり合うバネのような力を与え、さらに互いを線で結ぶ︵図1⁠︶⁠。できあがりのコードは、jsdo.itに上げてある︵例によって後で書き直すかもしれないが⁠︶⁠。図1　ランダムに動くオブジェクトの間に引合う力を与えて線で結ぶランダムに置いた
mut00tum 2015/09/04
node garden 線と点のアニメーション

CreateJS

アニメーション

Canvas
リンク
Spire : Global Data and Analytics
We hear you, EarthThe space company focused on the future of Planet Earth™Spire designs, builds and operates the world’s largest multipurpose satellite constellation. With our proven history in space infrastructure, we provide you with unprecedented access and insights from the ultimate vantage point – space. We empower you to navigate our changing world, reduce the cost of climate change and weat
mut00tum 2015/07/27
Canvas

アニメーション

見せ方

かっこいい

宇宙
リンク
CreateJSでHTML5 Canvasを操る | 第1回 CreateJSとは
CreateJSでHTML5 Canvasを操る第1回 CreateJSとは第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。これまで、ウェブの動的コ
mut00tum 2015/07/07
CreateJS

Canvas

アニメーション
リンク
Canvasアニメーションの要点 - Qiita
はじめにいまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。アニメーションサンプルなお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順ざっくりと以下のような流れになります要素を削除
mut00tum 2015/07/07
Canvas

アニメーション
リンク
高機能なモーション制作用JSライブラリGSAP/TweenMaxを使ったタイムリマップ表現 | ICS MEDIA
皆さんはHTMLでモーションを作るときにどのトゥイーンライブラリを使用していますか？ GSAP︵グリーン・ソック・アニメーション・プラットフォーム︶は、Flash全盛時代から存在する歴史あるトゥイーンライブラリです。 GSAPはCSS/HTML Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。GSAPの詳しい使い方は次の記事で解説しているので、使い方を知りたい方は以下の記事から参照ください。 GSAP入門︵前編︶ - 基本的な使い方 GSAP入門︵後編︶ - タイムライン機能などこの記事では、GSAPのタイムスケールという機能を中心に解説します。作成したモーションデモを紹介今回はGSAPの機能の1つ﹁タイムスケール﹂を使って、3Dの表現を試してみました。まずは次の2つ
mut00tum 2015/06/30
モーション

HTML5

Canvas

アニメーション

TweenMax
リンク
https://h2md.axell-embedded.com/
mut00tum 2015/03/13
動画を部品として扱えるのはすごい。表現力が格段に上がりそう。だが有償。

●Canvas

●動画

●JavaScript

●有料
リンク
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
mut00tum 2015/02/07
2010...

MEMO

HTML5

Canvas
リンク
1