GaussianRandomWalker

In this example below you will see how to do a GaussianRandomWalker with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by umadash, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright umadash ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>GaussianRandomWalker</title>
  
  
  
  
  
</head>

<body>

  <canvas id="canvas"></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/umadash/gaussianrandomwalker-PWQaWm */
(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
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var CanvasBase = function () {
  function CanvasBase(canvasId, width, height) {
    var retina = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;

    _classCallCheck(this, CanvasBase);

    this.canvas = document.getElementById(canvasId);

    if (retina) {
      this.dpr = window.devicePixelRatio || 1;
    } else {
      this.dpr = 1;
    }

    // 描画APIにアクセスするための、コンテキストオブジェクトの取得
    var context = this.canvas.getContext('2d');
    if (context) {
      this.context = context;
    } else {
      alert('canvas-unsupported');
    }

    this.resize(width, height);
  }

  _createClass(CanvasBase, [{
    key: 'resize',
    value: function resize(width, height) {

      // 見た目上の高さと幅
      this.width = width;
      this.height = height;
      this.dpr = 1;

      // Canvasの幅と高さ
      this.canvasWidth = width * this.dpr;
      this.canvasHeight = height * this.dpr;

      // <canvas style="width: ; height: ;">
      this.canvas.style.width = width + 'px';
      this.canvas.style.height = height + 'px';

      // <canvas width="" height="">
      this.canvas.width = this.canvasWidth;
      this.canvas.height = this.canvasHeight;

      // console.log('==========');
      // console.log('this.width:', this.width);
      // console.log('this.height:', this.height);
      // console.log('this.canvasWidth:', this.canvasWidth);
      // console.log('this.canvasHeight:', this.canvasHeight);
      // console.log('==========');
    }
  }]);

  return CanvasBase;
}();

exports.default = CanvasBase;

},{}],2:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _Randomer = require('./Randomer');

var _Randomer2 = _interopRequireDefault(_Randomer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var GaussianRandomWalker = function () {
  function GaussianRandomWalker(canvas, x, y) {
    _classCallCheck(this, GaussianRandomWalker);

    this.canvas = canvas;
    this.x = x;
    this.y = y;
  }

  _createClass(GaussianRandomWalker, [{
    key: 'update',
    value: function update() {
      var stepX = _Randomer2.default.getNormal() * 5 | 0;
      var stepY = _Randomer2.default.getNormal() * 5 | 0;
      this.x += stepX;
      this.y += stepY;
    }
  }, {
    key: 'draw',
    value: function draw(context) {
      context.fillStyle = '#0f0';
      context.fillRect(this.x, this.y, 10, 10);
    }
  }]);

  return GaussianRandomWalker;
}();

exports.default = GaussianRandomWalker;

},{"./Randomer":4}],3:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _CanvasBase2 = require('./CanvasBase');

var _CanvasBase3 = _interopRequireDefault(_CanvasBase2);

var _GaussianRandomWalker = require('./GaussianRandomWalker');

var _GaussianRandomWalker2 = _interopRequireDefault(_GaussianRandomWalker);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var MyCanvas = function (_CanvasBase) {
  _inherits(MyCanvas, _CanvasBase);

  function MyCanvas(canvasId, width, height) {
    _classCallCheck(this, MyCanvas);

    var _this = _possibleConstructorReturn(this, (MyCanvas.__proto__ || Object.getPrototypeOf(MyCanvas)).call(this, canvasId, width, height, false));

    _this.randomWalker = new _GaussianRandomWalker2.default(_this.canvas, width / 2, height / 2);
    return _this;
  }

  _createClass(MyCanvas, [{
    key: 'draw',
    value: function draw() {
      if (this.context) {
        this.context.clearRect(0, 0, this.width, this.height);
        this.randomWalker.draw(this.context);
      }
    }
  }, {
    key: 'update',
    value: function update() {
      this.randomWalker.update();
    }
  }, {
    key: 'start',
    value: function start() {
      var self = this;
      var update = function update() {
        self.update();
        self.draw();
        self.requestId = requestAnimationFrame(update);
      };
      update();
    }
  }, {
    key: 'stop',
    value: function stop() {
      if (this.requestId) {
        cancelAnimationFrame(this.requestId);
      }
    }
  }]);

  return MyCanvas;
}(_CanvasBase3.default);

exports.default = MyCanvas;

},{"./CanvasBase":1,"./GaussianRandomWalker":2}],4:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Randomer = function () {
  function Randomer() {
    _classCallCheck(this, Randomer);
  }

  _createClass(Randomer, null, [{
    key: "getNormal",


    /**
     * ボックス・ミューラー方による、正規分布
     * -1 ~ 1の数字を返します
     */
    value: function getNormal() {
      var r1 = Math.random();
      var r2 = Math.random();
      var v = Math.sqrt(-2 * Math.log(r1));

      if (Math.random < 0.5) {
        return v * Math.cos(2 * Math.PI * r2);
      } else {
        return v * Math.sin(2 * Math.PI * r2);
      }
    }
  }]);

  return Randomer;
}();

exports.default = Randomer;

},{}],5:[function(require,module,exports){
'use strict';

var _MyCanvas = require('./MyCanvas');

var _MyCanvas2 = _interopRequireDefault(_MyCanvas);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvas = new _MyCanvas2.default('canvas', canvasWidth, canvasHeight);
canvas.start();

},{"./MyCanvas":3}]},{},[5]);

Comments