この書籍は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 のデバッグ作業を素早くこなすなら、多段式エラープルーフが必要です。

（のちにキャッチーでポップな気の利いた文章に差し替える） いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。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

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Math function easeInSine(x) { return 1 - Math.cos((x * Math.PI) / 2); } CSS transition: transform 0.5s cubic-bezier(0.12, 0, 0.39, 0) Math function easeOutSine(x) { return Math.sin((x * Math.PI) / 2); } CSS transition: transform 0.5s cubic-bezier(0.61, 1, 0.88, 1)

「答えを急がない」ほうがうまくいく 私たちは「社会心理学」とどのように付き合うべきか 人の思考や行動は、状況の影響を受けている。社会心理学では、行動を通じて心の変化を観察、確率的なデータから傾向を導き出す。科学的研究は不確実なものを確実にしていく営みで、答えを疑い、検証し続けるものだ。 キーエンス流「性弱説経営」 キーエンス流「性弱説経営」　本質つかみソリューション事業を簡単化 日本を代表する高収益企業キーエンス。その経営の根底に流れるのは「性弱説」に基づく考え方だ。多くの企業を指導してきたキーエンス出身のコンサルタントである高杉康成氏が、キーエンス流の性弱説に基づいた経営について紹介する。連載第2回。

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

Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode

2014-12-29 射影変換について 3D数学 OpenGL ES 射影変換についてあまり理解していなかったのでメモ。 射影変換とは、カメラ空間から同次クリップ空間へと変換することです。 ゲームプログラミングのための3Dグラフィックス数学 という書籍を参考にしています。 カメラ空間について カメラ空間は3次元空間上において、見えるものすべてを包含する空間領域です。 カメラが原点に配置され、x軸が右方向、y軸が上方向を指し、z軸はOpenGLのような右手座標系の場合はカメラが向いている方向とは逆方向を指します。 OpenGLにおけるカメラ空間 同次クリップ空間について 同次クリップ空間は、OpenGLの場合だと中心が原点にあり、大きさがx、y、zの各軸が-1から1までの立方体の空間です。 透視射影変換 透視射影変換では、上図のようにカメラ空間内で見える範囲にある任意の点を同次クリップ空間に