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

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

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

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

そんなものあるのだろうか…?

今回はそんなことができそうな以下の学習サイトをやってみた。
f:id:andron:20161217141644p:plain
Crunchzilla

読み物ベースなので手を動かしたくない人でも安心。
当然のように文章は英語ですが、英語なんて読めなくてもコード眺めてたらなんとかなると思います。コードが読めなくても、英語が読めればなんとかなるので問題無いですね(?)。

ふわっと読んだ限りだと統計とか、プログラミングの基礎とかそんな内容が学べるっぽいです。

とりあえずCodeMonsterを終わらせてみた

ボリューミーですが斜め読みなので、「へーこんなのあるんだ」と言うことで終わってしまった。やりこみ要素が欲しい。前回使ってた学習サイトがProcessingベースの何かでお絵かきだったけど、このサイトではCanvasをつかってるっぽいね。


CanvasJavaScriptを使って図形を描くことのできる仕様だとか
参考資料
Canvas - HTML5.JP


さて、とりあえず、ランダムカラーペンでお絵かきできるキャンバスとか作れるようになるっぽいので作ってみた。
f:id:andron:20161217144006p:plain

毎度、この手のやつを自分の環境で動かそうとすると写しだけで動かせなくてもんやりする。動くように微改造して、以下ソースコード

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

<script>
var c = document.getElementById('myCan');
var ctx = c.getContext("2d");
var s = 3;

c.onmousemove = function(evt) {
  ctx.fillStyle = randomRGBA();
  var x = evt.clientX;
  var y = evt.clientY;
  ctx.fillRect(x - s / 2, y - s / 2, s, s);};

function randomRGBA() {
  var r = randInt(255);
  var g = randInt(255);
  var b = randInt(255);
  var a = Math.random();
  var rgba = [r,g,b,a].join(",");
  return "rgba(" + rgba + ")";
}
function randInt(limit) {
  var x = Math.random() * limit;
  return Math.floor(x);
}
</script>
</body>
</html>