mieki256のブックマーク - はてなブックマーク

テクスチャマッピング入門 - jsdo.it - Share JavaScript, HTML5 and CSS

下記サイトを参考に作成してみました。最速チュパカブラ研究会 Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題） http://d.hatena.ne.jp/gyuque/20090211 角度を指定できるように修正しました。角度を変更すると変化が元に戻ってしまいます。 var marks = []; var dragFlag = false; var markNo; var move = new Point(); var vertexs = []; var ct = new Point(); var offset = {x: 100, y:100}; function Point(x, y) { this.x = x; this.y = y; } //テクスチャオブジェクト定義 var texture = [/*{ x : 0, y : 0, width :

mieki256 2015/09/21

JavaScript

リンク

テクスチャマッピング入門　メッシュ編 - jsdo.it - Share JavaScript, HTML5 and CSS

下記サイトを参考に作成してみました。 Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題）最速チュパカブラ研究会四角形の自由変形前回は1面でしたが、今回は25面に挑戦しました。各赤い点をマウスで動かして画像を変形させることができます。各入力コントロールの説明 meshは、三角形の線が引きます。 degreesは、画像を回転させます。waveと同時に使えません waveにチェックすると画像がゆらゆらします。 cycleは、揺れの周期です。 swingは、振れ幅です。 speedは、揺れの速さです。 var frame = 0; var marks = []; var dragFlag = false; var markNo; var move = new Point(); var vertexs = []; var offset = {x: 160, y:

mieki256 2015/09/21

JavaScript

リンク

PlayCanvas でドミノっぽくドット絵を作るテスト - jsdo.it - Share JavaScript, HTML5 and CSS

PlayCanvas でドミノっぽくドット絵を作るテスト＜対応した点＞・box をドット絵になるよう配置。＜対応できていない点＞・真ん中へんのドミノ碑がうまく倒れてくれない。。。＜○○でドミノっぽくドット絵を作るシリーズ＞ ■ PlayCanvas でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/emEI ■ Three.js + Oimo.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/8ReN ■ Babylon.js + Cannon.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/6Etw ■ Cubic VR.js + ammo.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/iBox // forked from cx20's "PlayCa

mieki256 2014/06/06

リンク

テクスチャマッピング入門射影変換(ホモグラフィ) - jsdo.it - Share JavaScript, HTML5 and CSS

以前、作成したテクスチャマッピング入門では、2つの三角形に分割した方法でした。テクスチャマッピング入門今回は、4つの点からホモグラフィ行列(平面射影変換行列)を使った方法になります。 shogo82148氏のCSS3 Transf orm 3D Testでは、CSSで実現していましたが Canvasを使った方法はどうすれば出来るのか挑戦してみました。アルゴリズムに関しては、下記サイトを参照してください。射影変換(ホモグラフィ)について理解してみる ■パラメータ説明 degreea 回転角度 0度の時に回転させる形状を保存します。 0度以外で形状を変形しても元に戻ってしまいます。本当は、形状を回転途中で変形しても保持して回転出来るようにしたかったんですが、面倒くさそうだし、今回の目的とは違うので追求するのはやめました。 drawType 画像補間方法・Nearest(ニアレストネ

mieki256 2014/06/05

射影変換

リンク

射影変換 (Homography) - jsdo.it - Share JavaScript, HTML5 and CSS

var IMG_URL = 'http://jsrun.it/assets/4/W/u/U/4WuUH.png', SPACE = 10, SRC_WIDTH = 295, SRC_HEIGHT = 295, DST_WIDTH = 465 - SRC_WIDTH - SPACE * 3, DST_HEIGHT = 465 - SRC_HEIGHT - SPACE * 3; var img, canvas, context, points, srcImageData, draggingPoint = null; window.addEventListener('DOMContentLoaded', function() { canvas = document.getElementById('c'); context = canvas.getContext('2d'); srcBounds

mieki256 2014/06/05

射影変換

リンク

CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS

CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お　詫"; } p:nth-child(1):after{ content: "　び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c