HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
Visualizer - jsdo.it - Share JavaScript, HTML5 and CSS
mp3 visualizer for webkit browsers (web audio API) Source: Puru – Koyuki (06R Remix) var D = { width: 300, height: 150, theme: { name: 'b', list: ['a', 'b', 'c'] }, stc: 0.8, ftt: 512, volume: 0.3, A: { size: 5, space: 3, color: 'rgba(43,43,43,1)', Init: function() { D.A.width = D.A.size + D.A.space; D.A.length = D.width / D.A.width; }, Draw: function() { D.ctx.fillStyle = D.A.color; for (var i =
HTML5のCanvasを使いやすくするライブラリまとめ
Posted: 2013.12.20 / Category: HTML&CSS, javascript / Tag: HTML5 HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。 CREATEJS CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。 Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。 sample code var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild
forked from: テレビの砂嵐 - jsdo.it - Share JavaScript, HTML5 and CSS
// forked from hakobera's "テレビの砂嵐" http://jsdo.it/hakobera/nZe4 var world = document.getElementById('world'); var world_cx = world.getContext('2d'); var world_w, world_h; var display = document.getElementById('display'); var rgb = document.getElementById('rgb'); var interlace = document.getElementById('interlace'); var cv = document.createElement('canvas'); var cx = cv.getContext('2d'); var cw = c
Fire Effect - jsdo.it - Share JavaScript, HTML5 and CSS
var canvas; var ctx; var mouseX = 232, mouseY = 232; var balls = []; function mouse(e){ mouseX = e.clientX; mouseY = e.clientY; } function init(){ document.getElementById("canvas").addEventListener("mousemove", mouse); canvas = document.getElementById("canvas"); ctx=canvas.getContext("2d"); draw(); } function draw(){ //塗りつぶし ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgb(0, 0,
StackBlur - A fast, almost Gaussian blur for Canvas by Mario Klingemann, Quasimondo
This is a demo for a Javascript / Canvas based implementation of my StackBlur algorithm. Usage: stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); or: stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius ); or: stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius ); Download source: StackBlur v0.5 Thank you to Mike Shaver for fixing my
ハロウィーンということでHTML5で動くパーティー用のVJツールを作ってみました
Tweet2013 - 10 - 27 Happy Halloween VJもうすぐハロウィーンですね。 みなさんは、ハロウィーンパーティーなどに繰り出して、パーティーを盛り上げていることだと思いますが、ハッカーのはしくれは技術でハロウィーンを盛り上げます。 というわけで、ハロウィーンのパーティーとかで使えるVJツールを作ってみました。 Happy Halloween VJ » http://halloween.ryooopan.com スクリーンショットはこんな感じ。 ブラウザは今のところChromeをサポートしています。（他のブラウザだとうまく動かないかも） マイクをONにすると、周りの音を拾ってきていい感じにエフェクトがかかる感じになっています。 特にパーティー会場でプロジェクターとかで写すといい感じです。 HTML5 + Canvas実装はすべてHTML5で書いてます。 ちなみに画
Canvasできれいな色相環を描画する : document
8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用います。 function hsvToRGB(hue, saturation, value) { var hi; var f; var p; var q; var t; while (hue < 0) { hue += 360; } hue = hue % 360; saturation = saturation < 0 ? 0 : saturation > 1 ? 1 : saturation; v
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvasでお絵かきアプリ (全8回) - プログラミングならドットインストール