NVIDIA Canvas App: AI-Powered PaintingNVIDIA Canvas Use AI to turn simple brushstrokes into realistic landscape images. Create backgrounds quickly, or speed up your concept exploration so you can spend more time visualizing ideas.
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(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
Perl 初心者がとある JavaScript コードを読むための基礎知識 - あらびき日記
この記事は abicky.net の Perl 初心者がとある JavaScript コードを読むための基礎知識 に移行しました
ヒッグス粒子ってなあに？
このファイルは 高校生程度の知識を持っている人向けに、図とアニメーションで「ヒッグス粒子って何なのか、を雰囲気だけでも理解してもらおう、という意図で作りました。 数式などは使っていませんが、 ヒッグス粒子って何なのか、を理解するために必要なのは、 です。実はこれは、数式を操って物理を理解することよりもずっとずっと難しいことかもしれません。 では、その１から挑戦をはじめましょう。 なお、ファイル中で このような枠と緑の字で示したのは実際にこのファイルを元に講演した時に出た質問 であり、 このような枠と赤の字で示したのはそれに対する答 です（ただし、質問も答も実際のままではなく、編集してあります）。 android(2.1以上）をお持ちの方は、アプリ化したもの（apkファイル）を右のアイコンからダウンロードできます（apkファイルには、Q&Aの部分は入っていません）。 プログラムについて御質問
Shumpei Shiraishi's Weblog: ついにHTML5が勧告候補に！そしてそれが意味するもの
2012年12月18日火曜日 ついにHTML5が勧告候補に！そしてそれが意味するもの ついに！ HTML5の仕様が確定しました！ 厳密に言うと、HTML5とCanvas 2D Contextの2仕様が、Candidate Recommendation（勧告候補）という段階に達しました。CRに到達した仕様は、仕様そのものが今後ドラスティックに変更されることはなく、広く実装が呼びかけられるという段階です。 W3Cのプレスリリースはこちらです。 今後はテストケースの整備が行われつつ、仕様を完全に満たす実装の登場を待つばかりです。そうした実装が2つ以上登場し、テストケースに完全にパスするだけではなく、それらの間で完全な相互運用性が確認できれば、晴れてProposed Recommendation（勧告案）、そしてRecommendation（勧告）という最終段階に到達します。 現在の予定
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開 Motorola Mobilityが今月公開したHTML5オーサリングツール「Ninja」のバージョン0.7は、SVGやCanvas、WebGLなどを用いたHTML5でのアニメーション効果の開発を得意としたオーサリングツールです（それにしてもNinjaという名称は海外で人気がありますね……）。オープンソースソフトウェアとして開発されています。 Ninjaは、同じくMotorola MobilityがリリースしたHTML5対応のフレームワーク「Montage」をベースにしています。Montageは、Adobe Flash/Flexのような形でHTML5のアプリケーション開発ができるようにという意図で開発されたフレームワーク。 Ninjaの画面
これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」 - Chrome Life
前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。 誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。 これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか？筆者もそのうちの一人です。 しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。 そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。（CAATは、Canvas Advanced Animation Tookitの略） 「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。 CAATの機能と特徴 オンスクリーン
アボガドロ数を実感する
6×1023個というのがどれほどの大きな数なのか、をアニメーションで見ます。 ちなみに水ならこれだけで約18グラムになります。「18gの水を見ているのだ」と思って以下のアニメを見てください。 2倍ズーム ←どちらかのボタンを押してズームしてください→連続ズーム 1/2倍ズーム←どちらかのボタンを押してズームアウトしてください→連続ズームアウト ここに1モル（6×1023個）の分子があります。 は全体を6×10×10=6×102に分割したものです。 粒子はまだ見えていません。 スピードが遅い場合は、以下のチェックを付けたり外したりして調整してください。 塗りつぶし無しの描画 粒子をグラデーションで表現 ↑機種・ブラウザによってはグラデーションが遅い場合がありますので、その場合はこれを外してください。 リセット プログラムについて御質問、御要望、バグ報告などございましたら、前野［いろもの物理学
ベクレルってなあに？（表紙）
ニュースなので目にする「ベクレル」。「放射性物質の量を表す単位らしいけど、どういう意味だかわからない」という方もいるかもしれません。ここでは、ベクレルという言葉の意味を、アニメーションで語ってみようと思います。 ちなみに、下のが（最初は）「１ベクレルの放射性物質」のイメージアニメーションです。
キモかわ微生物 - jsdo.it - Share JavaScript, HTML5 and CSS
まるで生きているようにみえるけど、実は、オブジェクト同士の関係性は一切持っておらず、それぞれが独立して動いてます。 （最初は持たせようとしましたが、やらなくても十分相互作用しているように見えるので） 全体として複雑そうな動きをしているように見えて、個体を見るとシンプルな動きをしています。面白いですねー。 window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, eleme
HTML5入門 Canvasを使ってみる02(マウス追随) - jsdo.it - Share JavaScript, HTML5 and CSS
var canvas; var ctx; var r = 10; //円の直径 var mouseX = 0; //マウスのX座標 var mouseY = 0; //マウスのY座標 var moveX = 0; //オブジェクトのX座標 var moveY = 0; //オブジェクトのY座標 var speed = 0.06; //スピード $(function(){ //canvas要素を取得 canvas = document.getElementById('sample'); //canvas要素のチェック if(!canvas || !canvas.getContext) return false; //2Dコンテキスト ctx = canvas.getContext('2d'); //マウスイベントの登録 canvas.addEventListener("mousemove",
HTML5 Genetic Algorithm 2D Car Thingy - Chrome recommended
Controls Suprise: Toggles drawing, makes the simulation faster. New Population: Keeps the generated track and restarts the whole car population. Create new world with seed: The same seed always creates the same track, so you can agree on a seed with your friends and compete. :) Mutation rate: The chance that each gene in each individual will mutate to a random value when a new generation is born.
HTML5とJavaScriptで作られた自動車の進化シミュレーターがかわいい | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 みんなのブロックチェーンは，ブロックチェーンの入門書。暗号やハッシュなどを含め，基礎からブロックチェーンの仕組みを学べる書籍です。 いろんな方に「新しい技術を学ぶことの楽しさ」を感じ取ってくれたら著者として嬉しいです:-)。お金は技術的にどのように定義されるのか。 みんなのIoTは，モノのインターネットと呼ばれるIoTの入門書です。IoTの基本について，読者に寄り添って優しく解説しました。裏テーマは一番とっつきやすいPython入門書。サポートページはこちら みんなのPython 第四版は，より分かりやすい入門書を目指し，機械学習やデータサイエンスの章も追加して第三版を大幅に書き換えました。Python 3.6にも華
これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌
21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの？っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代のWEBが楽しみです。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 HTML5ベースのTODOリスト「5List」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 CSSでスキン作成が可能なHTML5動画プレイヤー実
HTML5のcanvasを使って醤油ラーメンを描いてみた！！ | HOPS Laboratory
ホップスの辻です。 今なにかと話題のHTML5。先日はcache manifest（キャッシュマニフェスト）のお話をしましたね。 HTML5のcache manifest（キャッシュマニフェスト）を導入してみよう！ HTML5の中でも今もっとも注目度の高い機能に「canvas（キャンバス）」というものがある。このタグを使うと、javascriptと組み合わせて簡単に図形を書いたり、アニメーションをしたりできます。Flashではプラグインという形でFlash Playerを入れなければいけませんが、canvasはブラウザ側が既に実装しているので何も必要ありません。 今回は今もっとも熱いcanvas（キャンバス）タグを使って、醤油ラーメンを描きたいと思います。 canvas使ってモテたい！でもその前に・・・ ようしcanvas使っちゃぞ！その前にcanvasが動くブラウザの準備です。 20
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ローランド、'90年代の定番音源「Sound Canvas」をソフトウェア化
Google、日本の小中高校生に「Raspberry Pi」でプログラミング実習を開始 コンピューターサイエンス教育支援でCANVASと協力
HTML5入門 Canvasを使ってみる01(様々な図形を描く) - jsdo.it - Share JavaScript, HTML5 and CSS