コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

なにかやったという報告 こーどめいぶん編

続・読んで覚えるプログラミング

これは僕の持論ですけど、何かを覚えてできるようになるってインプットとアウトプットがなければできないものだと思うのですよね。実際どうなんでしょうね?


まあ、そんな持論を展開したところで話としても面白く無いので、今回は以前紹介した読んで覚えるプログラミング学習サイトを使って勉強したよという話をします。
Crunchzilla


前回
inujini.hatenablog.com

パパっとCodeMavenをやってみました

あいかわらず読み物として見るとボリューミーですが、前回の復習みたいな内容なので安心です。前回が何ヶ月も前だから僕も忘れてたけどね……。だからといって内容を読み込まず斜め読みというね……。

で、なんか作りました。マウスに追従する円みたいのがつくれるようになるっぽいのでつくりました。
f:id:andron:20170129181717p:plain


この手のサンプルは実環境で動かそうとすると動かないので、例のごとく微修正を加えて動くようにさせます。動くはずのものが動かないほうがコードも読むことになるし、手を動かすから勉強になっていいですよ。

エラー探しですが、コードが長くなるとエラーがどこにあるのかわからなくなりがちなので、ブラウザについている開発ツールを使うと開発ツールの便利さが実感できていい感じです。でもそんなのIDEとかカスタマイズしたテキストエディタ使えば一発だとか野暮な話はご勘弁。


以下、微修正ソースコード

<html>
<head>
</head>
<body>
<canvas id="myCan" width="480" height="320" style="border:1px solid #d3d3d3;">

</canvas>
<script>
var canvas = document.getElementById('myCan');
var c = canvas.getContext("2d");

// ボールの処理
function Ball(x, y, r, dx, dy) {
  this.x = x;
  this.y = y;
  this.r = r;
  this.dx = dx;
  this.dy = dy;
  this.ddx = 0;
  this.ddy = 0;

  this.accel = function(x2, y2) {
    // 加速
    var diffX = x2 - this.x;
    var diffY = y2 - this.y;
    var dist2 = diffX * diffX + diffY * diffY;
    dist2 += 1;
    this.ddx = accel * Math.abs(diffX);
    this.ddx *= diffX / dist2;
    this.ddy = accel * Math.abs(diffY);
    this.ddy *= diffY / dist2;
  };
  this.update = function() {
    this.dx *= airFriction;
    this.dy *= airFriction;
    
    // 画面端でのバウンド
    if (this.x - this.r + this.dx < 0 ||
        this.x + this.r + this.dx > w) {
      this.dx = -this.dx * surfaceFriction;
    } else {
      this.dx += this.ddx;
    }
    if (this.y - this.r + this.dy < 0 ||
        this.y + this.r + this.dy > h) {
      this.dy = -this.dy * surfaceFriction;
    } else {
      this.dy += this.ddy;
    }
    
    this.x = this.x + this.dx;
    this.y = this.y + this.dy;
    
    // 境界の設定
    this.x = Math.max(this.r, this.x);
    this.x = Math.min(w - this.r, this.x);
    this.y = Math.max(this.r, this.y);
    this.y = Math.min(h - this.r, this.y);
    
    this.stroke();
  };
  
  this.stroke = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.r,
                 0, Math.PI * 2);
    c.stroke();
  };
}

var accel = 0.1;
var surfaceFriction = 0.8;
var airFriction = 0.96;
var mouseX = 0;
var mouseY = 0;
var timeStep = 25;
var w = c.canvas.width;
var h = c.canvas.height;
var cmTID;

// 更新処理
function updateAll() {
  c.clearRect(0, 0, w, h);
  for (var i = 0; i < balls.length; i = i + 1) {
    if (i > 0) {
      balls[i].accel(balls[i-1].x, balls[i-1].y);
    } else {
      balls[i].accel(mouseX, mouseY);
    }
    balls[i].update();
  }
  clearTimeout(cmTID);
  cmTID = setTimeout(updateAll, timeStep);
}

// ボールの生成
var balls = [];
var r = 40;
for (var i = 0; i < 10; i = i + 1) {
  balls.push(new Ball(0, 0, r, 0, 0));
}
// 画面の更新
updateAll();

// マウス座標取得など
var pane = document.getElementById('myCan');
pane.onmousemove = function(evt) {
  mouseX = evt.clientX;
  mouseY = evt.clientY;
};
</script>
</body>
</html>

ほぼコピペだけどちゃんとソース読んで修正してるから許してね。