three.jsでジェネラティブアートっぽいことするのに必要な知識 - Processing中毒者の嘔吐物
タイトルの通り。 去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。 点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつとか、そういうのをthree.jsで作るにはどんな知識が必要かというのを書いておく。本当はthree.jsの入門サイト作って体系的に解説したいところだけど、入門サイトはP5 Code Schoolで手一杯です。入門サイト運営するのくっそ面倒なんですわ。 大前提 JavaScriptはオブジェクトとか含めてしっかり理解していること。 three.jsの基礎知識 当たり前だけど、three.jsの基礎は押さえてないといけない。僕はLearning Three.js読んだ。英語だけどすごい読みやすいのでオススメ。 Learni
テストがないJS環境にモダンなテスト環境を導入していく - Qiita
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
Valiant360 - Webベースの全天球動画プレーヤー
全天球動画が人気です。RICOH THETA Sやfly 360など全天球動画が撮影できるレコーダーも数多く出てきています。さらにFacebook、YouTube、Flickrなどが再生に対応しています。 今回紹介するValiant360はWebブラウザベースの全天球動画プレーヤーになります。デスクトップのブラウザで見られるのは便利です。 Valiant360の使い方 Valiant360のデモです。画面上にある動画が全天球となっています。 再生しているところ。マウスでグリグリと視点が変えられます。 Valiant360のいいところはWebブラウザで手軽に全天球動画が試せるところでしょう。ヘッドマウントディスプレイで体験する方が没入感はありますが、手軽とはいえません。このくらいカジュアルに見られると普及が進むのではないでしょうか。 Valiant360はJavaScript製のオープンソー
ThetaViewer.js - RICOH THETAの画像をアニメーションGIF化 MOONGIFT
全天球写真、動画は大きな可能性を秘めていると思っています。その可能性を感じさせてくれるデバイスの一つがRICOH THETAです。最新機種では1080pに対応し、高画質な動画を作成できるようになっています。 そんなRICOH THETAで撮影した写真をアニメーションGIFで楽しめるのがThetaViewer.jsです。つまり全天球アニメーションGIFです。 ThetaViewer.jsの使い方 ThetaViewer.jsのデモサイトです。アニメーションGIFなので刻々と移り変わります。さらにマウスでぐりぐりと動かせます。 動かしているところです。全天球なのが面白いです。 RICOH THETAであれば動画が録画できるのですが、アニメーションGIFもまた違った面白さがあります。ぜひデモサイトで試してみてください。 ThetaViewer.jsはHTML5/JavaScript製のオープンソ
JavaScript で実装してみる Deep Learning
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに はじめまして、安藤義裕と申します。ヤフー株式会社データ＆サイエンスソリューション統括本部ソリューション本部でプログラマーをしております。趣味はカミさんの手料理です。 機械学習で用いられるアルゴリズムの一つにニューラルネットワークがあります。ニューラルネットワークは脳細胞の働きにヒントを得て考えられたものです。今回扱う多層ニューラルネットワークはニューラルネットワークの中間層と呼ばれる部分を多層化したものです。近年話題に上ることの多い Deep Learning ではこの多層ニューラルネットワークが利用されています。 多層ニューラルネットワークは用途に応じて異なるネットワークが利用されます。画像処理では畳込みニューラルネッ
ゲームの会話シーンを簡単実装できる JavaScript ライブラリ「MessageViewJS」を公開しました！
どもです。 先日、MacBookPro15インチ上位モデルを購入しまして、ウキウキで今回もそれについて書こうかと思いましたが、やっぱりやめました。w と。なんとなく、オープンソースってやつ、やってないなと思って作ってみました。 （なんかモテると噂で聞いたのでw あ。嘘です。） iPhoneアプリとかのゲーム内でもよくある会話シーン。 こんな感じの会話シーンがあるかと思うのですが、これをhtml、JavaScriptで簡単実装できる、JavaScriptライブラリです。 その名も「MessageViewJS」 Github https://github.com/webcyou/MessageViewJS デモページ http://webcyou.com/message_view_js/demo/ 会社でも色々と作らさせていただいておりまして、公開したいなーと思っているのが、特許を取ってしまっ
TouchPoint.js·マウスクリックをビジュアル化 MOONGIFT
プレゼンでデモをやったり、デモ動画を撮る時に思うのはキーボードやマウスの入力を見ている人がはっきりと分かるようにするというのは難しいと言うことです。突然文字が入力されたり、小さなマウスポインタが動いたりするのは分かりづらいことこの上ありません。 そこで使ってみたいのがTouchPoint.jsです。Webブラウザにおけるマウスポインタのクリックをビジュアル化してくれるライブラリです。 TouchPoint.jsの使い方 TouchPoint.jsを使ったデモのアニメーションGIFになります。クリックすると赤い波紋が広がります。 色は変更できます。 スクリーンキャスティングはもちろん、ユーザテストの際に使ったりしても面白いかと思います。Webサイトのデモを見せる時に使うと聴衆も分かりやすくなるでしょう。 TouchPoint.jsはJavaScript製、MIT Licenseのオープンソー
gulp なしの Web フロントエンド開発
JavaScript コンパイルとファイル監視 JavaScript ビルドは Browserify、ES6 から ES5 へのコンパイルは babelify を利用する。Source Maps ファイルは exorcist が生成。ファイル監視は watchify が担当。コマンド定義は以下。 { "scripts": { "build:js": "browserify -t babelify ./src/js/App.js -d | exorcist ./src/bundle.js.map > ./src/bundle.js", "watch:js": "watchify -v -t babelify ./src/js/App.js -o \"exorcist ./src/bundle.js.map > ./src/bundle.js\" -d", "release:js": "bro
CircuitJS1 - JavaScriptで作られたWebベースの電子回路シミュレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ここ数年のハードウェアやIoTブームがあり、電子や電気系に注目が集まっています。抵抗や電源、スイッチなどを使って回路を組み立てて自分の思ったとおりの動きを得られた時のうれしさはとても大きいでしょう。 それらの部品を買ってきても良いですが、まずはシミュレータで確認するのが良いでしょう。今回はWebブラウザ上で回路設計を行えるCircuitJS1を紹介します。 CircuitJS1の使い方 ごくごく簡単な回路。コンデンサ、抵抗、スイッチなどが並んでいます。 電気の流れる方向に動いています。 実際に動かしてみたところ。電気の流れが分かるでしょうか。 こんな複雑な回路や、 より実践的な回路もデモで用意されています。 CircuitJS1は元々用意されているものだけでなく、自分で回路図を作成
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(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成します。
OSC in the browser - 音の鳴るブログ
openFrameworks や Max/MSP, SuperCollider などで良く使われるメッセージングプロトコルに OSC (Open Sound Control) というのがあって、どんなものかについては この辺 を参照して欲しいのだけど、node-osc-min というライブラリを使えば OSC のメッセージを JavaScript でも解釈できるのでそれで遊ぶ話です。 名前に node と付いているけどバージョン 0.2.0 からブラウザにも対応していて、以下のコマンドでブラウザバージョンをビルドできます。 $ git clone https://github.com/russellmcc/node-osc-min.git $ cd node-osc-min $ npm install --dev $ npm run-script browserify $ ls build
JavaScript/HTML5でプレゼン用スライドをつくる方法まとめ - Qiita
勉強会で発表資料を作る際などに プレゼン用スライドを作る方法は たくさんあります。 この前、ふとしたきっかけで Reveal.jsを使ってみたところ とても好評だったので、類似のライブラリを 探してみました。 デフォルトのテンプレートから綺麗なものが 多く、すぐに勉強会の発表資料などに 作れるものがたくさんありました。 個人的には ・Impress.js ・Reveal.js ・Jmpress.js 合わせて読みたい 【Tig全まとめ】Gitを自由自在に操るための必殺ツール 【おすすめ】MacのFinderをカスタマイズする魔法のコマンドたち たった一行でブラウザをメモ帳に変える不思議なコード ライブラリ一覧 1. Deck.js Demo http://imakewebthings.com/deck.js/#intro GitHub https://github.com/imakeweb
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A-Frame – Building Blocks for the VR Web
koba04.com
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
GitHub - sakiyamaK/OpenCVjs: Image Processing in javascript
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
