NVIDIA 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.
canvasに関するItisangoのブックマーク (18)
-
Itisango 2022/02/11
-
-
HTML5+Canvasでパーティクルっぽいのを作ってみる
HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 投稿日2015年07月16日 更新日2019年04月13日 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 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の画面
-
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.
-
アボガドロ数を実感する
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サービス運営中。 免責事項 プライバシーポリシー 自動車の進化シミュレーターを見つけました。いわゆる遺伝的アルゴリズムを使って，二輪車の形状を突然変異させながら，でこぼこ道をスイスイ走れるような形状に進化させてゆくシミュレーター。突然変異率などを変えて，進化の過程を目で確認できるようになっている。 HTML5(Canvas)とJavaScriptを使っていて，ブラウザだけで動くよう作られている(Chrome推奨，重いけどiPhoneやAndroidでも動く)。進化の過程でいろいろな形の車ができておもしろい。最初からコケて走らないヤツ，平らな道では早く走るけどでこぼこ道で動かなくなるヤツ，遅いけど悪路に強いヤツ。見ていると進化する車を応
-
これは見ておくべき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
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました