この書籍はCreative Commons Attribution-NonCommercialの ライセンス で公開されています。 また、PDFとしてレンダリングしたバージョンは以下からダウンロードすることができます。
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし(青木)はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json · GitHub メインクエスト : この json を使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブコンポーネントに分けて、それらを管理するルートコンポーネントに state の更新内容を書き戻す 進捗 割と実践的で、構築しながら説明と言う感じだった。実際 GitHub - dolpen/react-tutorial のコミットログを見た方が何をしたかは分かりやすいのではないかと思うので大胆に割愛。 コンポーネントは何を与えられるべきか React 自体は data => view を担当するのが主機能なので、view を出力するコンポーネントの構築に、この data に当たるもの以
第14回HTML5ビギナーズで、JavaScript のデバッグ作業を短くする「多段式エラープルーフ」について発表してきました。 スライド speakerdeck.com コードのサンプル github.com まとめ JavaScript のデバッグ作業を素早くこなすなら、多段式エラープルーフが必要です。
これは、元はReactの公式ブログへ投稿されたものです。 個人的な見解になりますが、ReactはJavaScriptを使用した大規模で高速なWebアプリケーションを開発する、 最も優れた方法であると考えています。 これは、FacebookとInstagramにおいて、我々にとって良い結果をもたらしてくれています。 Reactの優れた点の1つに、アプリケーションの構築を、どのように考えさせるかという事が挙げられます。 このページでは、Reactを使用した検索可能な商品データのテーブルを構築する過程を通して、学んでいきます。 まずは、モック作りから ステップ1: UIをコンポーネント階層に分割 ステップ2: Reactの静的版の構築 ステップ3: UIステートの必要最小限構成 ステップ4: ステートを使用するべき場所の特定 ステップ5: 別(逆)データフローの追加 最後に まずは、モック作りか
TypeScript の .d.ts ファイルを管理する tsd コマンドが非推奨になったみたいです。 typings というツールが十分使えるようになったから、だそうです。 簡単に試してみました。 インストール $ npm install -g typings npm install で普通にインストールできます。 普通に使ってみる まずは適当なライブラリの型定義ファイルを検索してインストールしてみます。 $ typings search bluebird レジストリは github.com/typings/registry にあります。デフォルトではここの npm ディレクトリを見るらしいです。 レジストリにあるのは JSON ファイルで、実際の定義ファイルは他のレポジトリのものが指定されています。 見つかった定義をインストールするには typings install を使います。 $
(のちにキャッチーでポップな気の利いた文章に差し替える) いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。 dev.twitter.com 目次 1. 公式ボタンの設置方法 1.1 ボタンの種類と入力項目 1.2 ページ内に公式ボタンを複数置きたい場合 1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合 1.4 ユーザーを複数入力したい場合 1.5 推奨ユーザーを複数入力したい場合 1.6 ハッシュタグを複数入力したい場合 1.7 画像付きツイートを投稿させたい場合 1.8 動画付きツイートを投稿させたい場合
こんにちは、らこです。 この記事はPascal Precht氏によるAngular 2 Change Detection Explainedを日本語訳したものです。 Angular 2を使う上で必修ともいうべき Change Detection に関する貴重な資料なので、許可をもらって日本語に訳しました。Thank you, Pascal! けっこう長いので、先に要点だけ書いておきます。できれば全部読んで、原文も読んで、スライドも見てください。 レンダリングとはモデルをDOMに可視化することである Change Detectionとはモデルの変更を検知し、UIに反映することである モデルの変更を引き起こすのは常に非同期的な処理の結果である Angularはあらゆる非同期処理の後にChange Detectionを行う(Zoneを使って) 変更を検知する際にはオブジェクトの参照が変わったかど
日々の仕事の中で役に立つES2015(ES6)のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です! 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
はじめまして、入社半年のkatsuraです。初投稿です。よろしくお願いします。 品質管理グループにてHTMLメールのテストを日々の業務で行っていた中で、テストを補助するツールを作成しました。今回はそのツールについて紹介したいと思います。 HTMLメールのテスト HTMLメールのテスト項目の一つに、リンクチェックというものがあります。 リンクチェックとは、HTMLメール内のリンクテキストや画像とリンク先のURLが、リンク仕様書通りに正しく記載されているかのテストです(下の図参照)。 これを行うことにより、例えば「商品画像をクリックしたら、別の商品のページが開いてしまった」というような事故を防ぐことができます。 このリンクチェックというテストは、誰にでも出来る単純なテストですが、正確にテストしようとすると面倒なテストです。 リンクのURLが上の図のようにわかりやすいものであれば良いのですが、商
This example shows how to use image-strips / sprite-sheets as animated hotspot images. The images will be animated by dynamically changing the crop setting (which 'cuts-out' a certain region of the image) by xml action scripting. The do_crop_animation <action> in this example has no dependencies and can be easily reused in own examples. It supports vertical, horizontal and tiled image-strips and l
藤井聡太が勝ち続ける理由 藤井聡太 “運命のライバル”永瀬拓矢と王座戦で再戦 9月4日に開幕する第72期王座戦五番勝負は、藤井聡太王座と前王座の永瀬拓矢九段の対戦になりました。『藤井聡太が勝ち続ける理由 王座戦――八冠の先へ』(日本経済新聞社編/日本経済新聞出版)の抜粋から、“運命のライバル”といえる2人の関係性をひもときます。 ビジョナリーが伝えたい「生きるための最高の知恵」 『WIRED』創刊編集長「他の人が考えないような方法で考える」 テクノロジーと人類のポジティブな未来像を示し続けてきたケヴィン・ケリー氏。米SNSでも話題を呼んだ同氏の新刊『生きるための最高の知恵』をもとに、常識を打破する方法とマインドを変え続けることの意義について深掘り。
JavaScript Advent Calendar 2011 WebGL駅伝参加者の方々、ありがとうございました。めでたく(?)最後のランナーまで辿り着きましたので、ここからは一人で走ってみたいと思います。(気力の続く限り…) もし僕の代わりに何日か書いてもいいよという人がいましたらコメントで教えてください。 とりあえず、これまでの方々の記事へのリンクを貼っておきます。 JavaScript Advent Calendar 2011/WebGLコース初日、WebGLの基本的な考え方 - by edvakf in hatena THREE.js で WebGL | ヨモツネット 空が狭い: WebGL Advent calender 3日目 PhiloGLでのカメラの移動処理 - 強火で進め 3DCG Arts: THREE.js での輪郭線表示 ステレオ3Dビュー解説 JavaScrip
2014-12-29 射影変換について 3D数学 OpenGL ES 射影変換についてあまり理解していなかったのでメモ。 射影変換とは、カメラ空間から同次クリップ空間へと変換することです。 ゲームプログラミングのための3Dグラフィックス数学 という書籍を参考にしています。 カメラ空間について カメラ空間は3次元空間上において、見えるものすべてを包含する空間領域です。 カメラが原点に配置され、x軸が右方向、y軸が上方向を指し、z軸はOpenGLのような右手座標系の場合はカメラが向いている方向とは逆方向を指します。 OpenGLにおけるカメラ空間 同次クリップ空間について 同次クリップ空間は、OpenGLの場合だと中心が原点にあり、大きさがx、y、zの各軸が-1から1までの立方体の空間です。 透視射影変換 透視射影変換では、上図のようにカメラ空間内で見える範囲にある任意の点を同次クリップ空間に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く