フロントエンドエンジニアもどきの備忘録

デザイナーやらコーダーを経てフロントエンドに落ち着きました。

Canvas

Pixi.jsでAndroid4.0系だけCROS時にSECURITY_ERR: DOM Exception 18 エラー

情報がなくて2日もはまってしまいました。。。 結論、Android4.0系の標準ブラウザでWebGLを使うとどうあがいてもこのエラーになる場合があります。なので、Canvasを使うようにしてあげるといいです。(4.1とかは大丈夫) PIXI.autoDetectRendererの第4引数…

PIXI.js用にスプライトのテクスチャをGulpで生成する

gulp.spritesmithとspritesmith-texturepackerを使います。 インストールは省略。 var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); var spritesmith_texturepacker = require('spritesmith-texturepacker'); gulp.task('make_s…

マウス追尾で円のcos,sinを表示

codepen.io 最近よくお世話になっている東大生が教えるビジュアル数学というサイトの三角関数のページにおいてあるFlashを、一からCanvasで再現してみました。 円の上にマウスをホバーさせてやると、それに追尾してその位置のcos,sinを表示します。 アークタ…

Canvasでシンプルなアナログ時計

codepen.io シンプルな時計の実装です。 三角関数で現在の時間の位置を求めて描画を繰り返します。 フレームレート的には1fpsで十分なのでrequestAnimationFrameを使わなくても良かったかもしれません。 針の描画 三角関数で現在の時間のそれぞれの針の位置…

Canvasでシンプルな正弦波

正弦波のお勉強メモ。 正弦波は 振幅 * sin( 角度速度 * 時間 ) で表すことができます。 角度速度は 角度速度 = 2π / 周期 で計算することができます。 処理の流れとしてはcanvasの左端から1pxづつの距離を時間としてループで描画しています。 codepen.io