Canvas の scale でアニメーションしてみる

とくに何も考えずにスケールアップしてみると、右下のほうに動いていって驚いた。

イメージとしては対象のオブジェクトだけをスケールしたつもりなのだけれど、実際は ctx.scale(x, y) しているので、canvas 全体がスケールされる。

つまり、オブジェクトの位置もスケールされている。

例えば x = 10 y = 10 の座標を持ったオブジェクトは、1.1倍にスケールされると x = 11 y = 11 の座標に描画される。

こんな風に。

こいつをなんとかオブジェクトの中心を起点にスケールさせたい。

一番簡単な方法は、元の位置からスケールした分を引き算すればいい。

さらに、オブジェクトの中心に座標を移動させるため、オブジェクトの幅と高さの半分を座標から引く。

ひとつひとつ順を追っていけば案外簡単なのだけれど、スキップして考えようとすると、案外ハマる。うーん。

var transformedPoint = { x: mylocation.x - (mylocation.x * myscale.x) - (mysize.w * myscale.x * 0.5), y: mylocation.y - (mylocation.y * myscale.y) - (mysize.h * myscale.y * 0.5) } ctx.transform(myscale.x, 0, 0, myscale.y, transformedPoint.x, transformedPoint.y);

これで無事中心でスケールされるようになった。

孵る

Canvas で translate して transform して rotate してみる

伸縮x :

傾斜y :

傾斜x :

伸縮y :

移動x :

移動y :

回転 :

既成概念を捨てろ

的な事がよく言われる。

けれど、では一体、既成概念を捨てるいうのは具体的にはどういう事なのだろうか?

全く同じものでも違うコンセプト(概念)で捉えればそれは全く別のものになり、違うものでも同じコンセプトで捉えればそれは同じものになる。

例えば椅子を机だと捉えれば、それは椅子ではなく机として使える。

グラスは花瓶にもなるし、レシートを本の栞としても扱える。そうしてそれは逆もまた真となる。

けれどどうだろう? それではまだ"捨てた"とは言い難い。ただコンセプトを置き換えたに過ぎない。ある用途で利用されていたものを、別のよく似たものとして使ったに過ぎない。

つまり、昨日捨てた椅子に今日座ることはできないように、もうそれは無いものでければならない。

全く未知のものとして椅子と向き合うのなら、それを椅子と呼ぶこともできないはずだ。それは足のついた何かで、ひょっとすると生き物かもしれないと思うほど無知になれば、椅子(と過去に呼ばれていたそれ)は、恐怖の対象ですらあるはずだ。

四方八方から眺めてみる。噛みつかないのなら持ち上げて裏返しにしてみてもいいかもしれない。害がなければ舐めてみると何か分かるかもしれない。

もしもそれを行儀が悪い、躾がなっていない。そう思うのならそれはまだ既成概念に縛られ、保守的な価値観に埋もれているからで、一体全く未知のものが、食べられないなど、誰に分かるというのか。

何も分からないのなら、全てが発見になる。椅子が硬い(もしくは柔らかい)ことも、持ち上げられるほどに軽いことも、そして座ることができるという事実すら、驚きと感動になるかもしれない。一周回って座るものとして使ったとしても、誰かに教わってそれに座るのと、自分で発見して座るのでは、それはまた全く別のコンセプトではないか。

?

プリミティブな感覚

ひとには視覚、聴覚、触覚、味覚、嗅覚の五感がある。

ひとは産まれた時からひとで、死ぬまでひとだから、まさか他の生き物が自分たちとは全く違う世界に生きてるなんてあまり考えない。

だからいろんな生き物を擬人化し、まるでひとのように扱うのだけれど、言葉をもたないひと以外の生き物が、果たして内省することが可能なのだろうか?

言葉がないとしたら、概念はどのように抽象化されるのだろうか?

目も耳も鼻も口もない生き物は、世界の構造をどのように捉え、何を手掛かりに行動するのだろうか?

高等動物のように感覚の発達していない生き物は、もっとシンプルで純粋な世界観で生きているのか、あるいは、空間や他者という概念すらないまま、唯、刺激に反応しているだけなのだろうか?

プリミティブな感覚、生き物が初めて世界と繋がったときの、はじまりの感覚はなんだったのだろう? ひょっとすると、そのはじまりの感覚は、光も音も無い世界で、何か捉えることができるものなのかもしれない。

光、音、熱、化学反応、圧力、それらに対する五感は、プリミティブな感覚からはじまり、進化の過程でそれぞれの刺激に特化し、分化していったがために、あるいは、それ以前の純粋な刺激(?)というものを受容する機能が鈍化しているのかもしれない。

シンプルな入力、シンプルな出力。生命の誕生というは、きっと世界と繋がったこというそれ自体の事じゃないだろうか。

では、なぜ、最初の生き物は世界と繋がる必要があったのだろう? 敵もなく、それ以前に己すらない世界で。

ひょっとすると、ぼくらが生きるための手掛かりだと思っている感覚というのは、ほんとうは全く別の目的からはじまったのかもしれない。

ブラウザで ES2015 の import export を使えるようにしてみる

手順は以下のとおり

  1. Node.js をインストール
  2. browserify をインストール

    sudo npm install --g browserify

  3. babelify をインストール

    npm install --save-dev babelify

  4. babel-preset-es2015 をインストール

    npm install --save-dev babel-preset-es2015

  5. .babelrc を作成

    { "presets": ["es2015"] }

  6. export するファイルを作成 ./src/ExportTest.js

    export class ExportTest{ constructor(src) { document.getElementById("export-test").innerHTML = "success!"; } };

  7. import するファイルを作成 ./src/importTest.js

    "use strict"; import { ExportTest } from './ExportTest.js'; new ExportTest();

  8. コマンドラインを実行

    browserify ./src/importTest.js -t babelify --outfile ./dist/importTest.js

出力結果

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var ExportTest = exports.ExportTest = function ExportTest(src) { _classCallCheck(this, ExportTest); document.getElementById("export-test").innerHTML = "success!"; }; ; },{}],2:[function(require,module,exports){ "use strict"; var _ExportTest = require("./ExportTest.js"); new _ExportTest.ExportTest(); },{"./ExportTest.js":1}]},{},[2]);

参考文献

現代的なデザイン

あなたの世界はあなたの見るものでできている。

わたしの世界はわたしの聞くことでできている。

あなたが見ることができるのはあなたの見えるものだけで、わたしが聞くことができるのはわたしの知っている言葉だけだ。

わたしの知らない言葉はわたしにとってはただの音の連続で、あなたはあなたの見えないものがあることにすら気付いていないのかもしれない。

現代的なデザインというのは、つまりあなたの見えないものをあなたに気付かせ、あなたに聞こえない言葉をあなたの言葉に翻訳する。そういうことじゃなかろうか。

 

WordPress に移行しました

新しいフィードは http://vosegus.org/feed になっています。よろしくお願いします。

three.js で遊んでみる – 追いかける

※マウス操作でカメラをコントロールできます。

three.js で遊んでみる – ひろがる