THREE.MeshLineで、ヌルヌル動く線を作ろう！ - Workship MAGAZINE(ワークシップマガジン)
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
リサイズした画像がぼやける件 - omohayui blog
Image Resizing Algorithm 経緯 Retina対応等が進む中、大きい画像をWeb上で縮小表示し高解像度ディスプレイに対応するケースが多々あります。 がしかし、ブラウザ固有のリサイズのアルゴリズムや表示画像サイズによっては、レンダリングされた画像がぼやけることも。 そこで、リサイズのアルゴリズムを正しく理解した上で、適切な対応方法を検討したい、という話なのです。 縮小表示の例 表示サイズ width: 280px (原寸) width: 140px (4px → 1px) width: 145px (3.86...px → 1px) width: 145px (3.86...px → 1px) image-rendering auto auto auto pixelated 画像 （サンプル画像が古いことへの突っ込みは受け付けません。久しく絵と呼べるものを描いていないの
DALL·E: Creating images from text
We’ve trained a neural network called DALL·E that creates images from text captions for a wide range of concepts expressible in natural language. DALL·E is a 12-billion parameter version of GPT-3 trained to generate images from text descriptions, using a dataset of text–image pairs. We’ve found that it has a diverse set of capabilities, including creating anthropomorphized versions of animals and
JavaScriptでスクリプトを動的に読み込む３つの方法
createElementでscriptタグを作成してheadに入れる 一般的に広く使用されている方法。 var script = document.createElement("script"); script.setAttribute("src", "hoge.js"); document.getElementsByTagName("head")[0].appendChild(script); JQueryでscriptタグを作成してheadに入れる JQueryを使用した方法。チェーンメソッドで拡張可能。 $("<script>") .attr("src", "hoge.js") .appendTo("head"); JQueryの$.getScriptで読み込む 同じくJQueryを使用した方法だがコードは1行で済む。 $.getScript("hoge.js");
複数行を三点リーダーで省略する（EI11対応） - Qiita
テキスト省略をCSSで行たい理由 親要素の横幅に収まるように、テキストを三点リーダーで省略したい場合、 CSSで行うのが簡単でシンプルです。 サーバーサイドで文字数を元に切り捨てた場合、HTML上に全文が載らないため、 title属性やその他UIで全文を表示させる時に不便です。 また、レスポンシブの場合は尚更CSSで行えると実装が楽です。 注意 IE11対応とありますが、三点リーダーはIE11では表示されません。（行数で切り捨て表示するのみ） 単一行はCSSのみで実装 単一行の場合は、下記CSSを適用することで、親要素の横幅を超えた分を「...」で省略できます。 こちらはIE11を気にせず使用できます。 p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 複数行はJav
Frontend Developer Roadmap: What is Frontend Development?
Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity. What does a Frontend Developer do? As a front-end developer, you'll be responsible for creating the user inte
Nuxt.js + phina.js でブラウザゲーを作るためにやったことまとめ - Qiita
まず初めに phina.jsだけで完結できるところを、 あえて Nuxt.jsをかぶせて作ってます。 できたクリッカーゲームがこちら↓ 鬼姫無双-ONIHIMEMUSO- 最終的に使ったモノ ゲームライブラリ：phina.js フレームワーク：Nuxt.js データ：Firebase「Cloud Firestore」 サーバー：Heroku CDN：Cloudinary WebPush：OneSignal ドロワーソフト：Sketch App 画像編集：Photoshop 作成環境：phina-ts-seed + create-nuxt-app 作った手順 ゲームデザイン まずコンパイルが早いparcelで、phina.jsを使いゲーム自体を作る 中だるみを避けるためにここでキャラデザする Nuxt.jsを乗せてデータ連携・phinaとのつなぎ込み 細かい描写を入れていく ゲームデザイン
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
YouTube動画の埋め込みを軽くする - Qiita
YouTube動画の埋め込みコード。 サイトに複数貼り付けると重い。でも貼り付けたい。 そんな埋め込みコードを、自動でサムネイル画像に置換することで軽くする方法です。 JavaScript(jQuery)を使用します。 軽くする方法 基本はこちらの記事のコードを使用させていただきました。 http://qiita.com/yuyaonrails/items/5ecb24fca0d54abccdab それに加えて、 widthとheightも取得する 動画埋め込みオプションの「動画が終わったら関連動画を表示する」をOFFにする(URLパラメータが加わるので上記コードだとサムネイルが取得できない) サムネイルにYouTube公式のアイコンを付けて、通常の埋め込みと同じような見た目にする コード <!-- YouTubeの埋め込みコードをdivで囲む(複数貼り付ける時も動画1つずつ囲む) -->
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dancer
Raymarching
Suit Transition
Webgl Fluid Simulation
Tendrils - epok | Trust - Max Cooper
https://avseoul.net/particleEqualizer/
phiary
javascript image grid - Google 検索