制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
（補足） デスクトップブラウザにおいては、スクリーンサイズに統一性を持たせるために開発ツールで下記端末のスクリーンをエミュレートして検証します。 iPhone 6/7/8 Plus相当（414×736、DPR 3） 4.検証結果 検証時点でのFlutterのバージョンは 2.0.2 です。 CanvasKitは 0.24.0 （https://unpkg.com/[email protected]/bin/canvaskit.wasm）が利用されていました。 それでは各ブラウザにおける結果を見ていきたいと思います。 1.MacBook Pro (13-inch, 2020) , macOS 10.15.7 , Chrome (89.0.4389.82) , Blink パーティクル数4,000あたりから差が出始め、CanvasKitの方が30〜40%程度高いパフォーマンスを出しているように
OffscreenCanvas—speed up your canvas operations with a web worker Stay organized with collections Save and categorize content based on your preferences. Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful
TL; DR JavaScriptでブラウザゲームを作りました。 UFOを操作して動物を誘拐するゲームです。 TwitterのOGPを設定すると、ツイートに埋め込むことができます。 『Alien Abduction』 こちらからプレイできます。 https://alien.laineus.com/ 画面をタップするだけのミニゲーム的なやつです。 ツイートに埋め込む なんとツイートに埋め込むことができました！ UFOを操作して動物を誘拐するゲームを作りました！ PCだとタイムライン上で直接プレイできます↓ Alien Abduction https://t.co/7qAtPXTnGj #phina_js — らいね (@Laineus) 2018年4月25日 （↑ぜひリツイートお願いします！） TwitterのOGPのカードタイプに、playerというものがあり、オリジナルの音声・動画プレイ
レンダリングスレッドとは DirectXやOpenGLといったグラフィックスAPIを叩く処理を行うスレッドのことです。 メインスレッドとは別のスレッドで行うことで、ゲームプログラミングの世界ではCPUの負荷分散を目的に行われています。 Emscriptenスレッド対応 今まではEmscriptenでスレッドは使用できなかったのですが、新機能のSharedArraryBufferを活用してスレッドが使えるようになりました。 参考記事: EmscriptenからSSEとかpthreadを使って爆速にする ※なお、WebAssemblyではスレッドはまだ使えません。今のところasm.jsのみです。残念… WebGLのWebWorker対応 WebGLをWebWorkerから使うことも新機能のOffscreenCanvasを使うことで可能になったようです。 参考記事1: メインスレッド以外での W
プレゼン資料を作っている時に「このコミットグラフをMarkdownかテキストで書けたらな」と思ったことがある人、結構いるのではないでしょうか。 GitGraph.js を使うと、JavaScriptで記述したコミットログをcanvasを使って可視化できることを知りました。なかなかおもしろいです。 準備 まず GitGraph.js の JavaScript と CSS ファイルを読み込みます。GitHub からソースをcloneするなり、bowerを使うなり、CDNを使うなり、お好みで。ここではコミットグラフを定義するコードも別ファイル index.js に書くことにします。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GitGraph.js</title> <link rel="stylesheet" type=
Canvas#drawImage を使ってかなり大きな画像を縮小表示すると、派手にジャギーが発生する事があります。(drawImage のデフォルトのフィルターが速度優先らしく、現状このようになってしまうとか) antialias を効かせるか、もうちょっと綺麗に表示する方法が無いか色々と探ってみました。 方法1. canvasContext.drawImage(source, sx, sy, sw, sh, tx, ty, tw, th) を使って描画する方法 画像1 と 2 の Original がこれです 方法2. HTML5 Rocks にあるように ratio = devicePixelRatio / backingStoreRatio を計算し、canvas のサイズ(width, height)と canvas のviewサイズ(style.width, style.heig
帳票・レポート 日本仕様の帳票開発に必要な機能を搭載したコンポーネント ActiveReports for .NET ActiveReportsJS 表計算・グリッド Excel風のビューと表計算機能を実現するUIコンポーネント SPREAD for Windows Forms SPREAD for ASP.NET SPREAD for WPF SpreadJS 入力支援 快適な入力を実現する日本仕様入力コンポーネントセット InputManPlus for Windows Forms InputManPlus for ASP.NET InputManPlus for WPF InputManJS 多段明細 1レコード複数行&日付表示に 最適なグリッドコンポーネント MultiRowPlus for Windows Forms 戻る コンポーネントセット Visual Studioで利用す
Open Source HTML5 Game Framework For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Phaser Editor Phaser Editor enables you to visually create Phaser games. Instead of entering numbers in your code to position Game Objects, you can drag and drop them into place, tweak their animations, adjust their physics bodies, enable special effects and more. It's
この記事はACCESS Advent Calendar 1日目の記事です。 こんにちは ACCESS開発本部IoT開発部の渡辺 (@sassy_watson) です。 今回は私がSVGをcanvasで使う方法についての記事を書こうと思います。 SVGとCanvas SVGはただのベクターグラフィックスというだけでなく、 マスクやクリップだったらグラデーションやフィルターだったり いろいろ高機能なのが魅力です。 ただ、XMLなのでJavaScriptでなにかしようするときのDOM操作が面倒くさいです。 一方、CanvasはAPIが簡単なのでJavaScriptで扱いやすいというメリットがあります。 SVGをCanvasで使う そこで、SVGで使いたい機能をSVGで書いて、canvasに貼り付けるというアプローチが考えられます。 素材はillustratorでつくって、Canvasでペタペタ貼
どうも、Electronを触っているけど頑なにAtomエディタは使わない @Quramy です(Vim好きだからね！). 何年も前に一世を風靡したAntinnyよろしく、5分毎にデスクトップのキャプチャを取得し、画像をTwitterにuploadするアプリケーションを作成しました. Quramy/electron-disclosure このアプリを使って、作成されたツイートが下記です： Captured by https://t.co/Iiwtinz3f7 at Sun, 31 May 2015 08:46:49 GMT pic.twitter.com/jS09qh8cqs — quramy_dev (@Quramy_dev) 2015, 5月 31 このエントリでは, electron-disclosureを作成する上で利用したElectronのちょっとしたTipsを紹介したいと思います
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
と私が勝手に思っているだけですが 早速それを紹介？ではなくメモります。 #理由 誰かが、情報発信をしないとダメかなと思い、気づいたメモとして残します。 ちょっと変わり種を紹介したかった 将来的に流行ったりした時に少しうれしいからです。 #JS 正確には、JavaScriptです そして、私はJSエンジニアではありませんが、初めてJSに触れたのは小学生の頃初めて買ってもらったWindows98のPCです。あの頃は意味もなく動いたりすることが面白くて仕方なかったのです。 今回は、そんな幼少の気持ちを奮い起こしたものを紹介します。 #それでは紹介 順番は適当です。見た方が面白いと感じたものを使っていただければという感じです。そして、一介のエンジニアたる私の独断と偏見でメモしてるだけですので、あまり内容は気にしないでください。ああ、JSも知らない残念なやつだと罵ってくださっても構いません、実際その
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く