プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

ホーム
CG関連
プログラムで数学も身につく一石四鳥なクリエイティブコーディング

CG関連

2019.04.9

プログラムで数学も身につく一石四鳥なクリエイティブコーディング

2020年から小学校でもプログラミング教育が義務化になり、

子ども向け無料プログラミング体験場『CoderDojo熊本』を運営している身として、

ブロックを組み立ててゲームなどを作れる『スクラッチ』だけで終わるのではなく、

『スクラッチ』のその先へ

というテーマで、なにかうまい方法はないものかと探していたのですが、

先日とてもいい記事を見つけたので共有したいと思います。

初心者からやってきた3年間のことと、その過程で得たコツです。https://t.co/yL71gjQaWr

— Misaki Nakano (@misaki_mofu) April 7, 2019

記事の中で紹介されている『Three.js(スリージェイエス)』というツールは、

文字通り、3Dデザインができる仕組みなのですが、

しっかりやろうとすると、

プログラミング(JavaScript)
デザイン系プログラミング (Shader)
数学 (簡単な方式からそこそこ難解な方式まで)
物理 (加速度・ベクトルなど)
英語 (情報収集)

など、たくさんの知識が必要になります。

逆に言うと、

プログラミングをやりながら数学・物理・英語も合わせてまるっと身につけられるという事でもあります。

アオキ

20年前はこんな方法なかったよなぁ、進歩したもんですよ本当・・

もちろん最初から全て使いこなせるわけもなく、

ちょっとずつかいつまんで覚えていくといいのかなと。

2019/8/17追記
『Three.js』入門記事書きました。

もんプロ～問題発見と解決のためのプログラミング〜

【3Dプログラム】の基本を【Three.js】でまとめてみた【初心者向け】

https://coinbaby8.com/3dprogramming-basic.html

3Dプログラミングは難しい・・・なんたって数学多いし用語たっぷりだし・・・そんな風に考えていたこともあったけれど。プログラミングでかっこいい映像をつくりたいと始めた『TouchDesigner(タッチデザイナー)』のおかげで、いつのまにやら、『3Dプログラミング』の苦手意識がなくなってきた感があって。参考記事今回は、ホームページなどの『ウェブ』で3D表現するなら1番人気と思われる『Three.js(スリージェイエス)』と、少しだけ『TouchDesigner』の画像も交えて、『3Dプログラミングの基本』をまとめてみることにしました。3Dプロ...

そして、記事の中で紹介されていたのが『Coding Math(コーディングマス)』という動画で、

コーディング・・プログラミングを書くこと
マス・・数学という意味

なので、

これまた文字通り、

プログラミングで数学を使うという子どもにも(大人にも)ドンピシャな動画だったので、

物は試しと、早速やってみることにしました。

プログラミングで数学を覚える試しにやってみる

第１回目の動画はこちら。

解説はもちろん全編英語なのですが、

コードの中身などを真似するだけで作れるので、

英語のリスニングをしつつ、
プログラミングを覚えられて、
かつ数学や物理も身につくという、

一石四鳥な内容になっています。

とは言っても初見だとなかなかとっつきにくいかもなので、

簡単にですが解説を交えてみたいと思います。

アオキ

コードの内容としては、『HTML』と『JavaScript』に分かれています。

See the Pen
creating_coding_1 by aoki_monpro (@suica)
on CodePen.

プログラミングと数学第１回目のコード解説『HTML』

『HTML(エイチティーエムエル)』は、

『インターネットエクスプローラ』や『グーグルクロム』で表示できる、

ホームページ、Webサイトを表示できる言語です。

今回の動画にあったコードはこちら。

//index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
  <script type="text/javascript" src="main.js"></script>
  <style type="text/css">
  html, body{
    margin: 0px;
  }

  canvas{
    display: block;  
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

『HTML』は『タグ』というくの字で囲った書き方がされていて、

よくよく見ると、

<html>と</html>
<head>と</head>
<body>と</body>
<style>と</style>
<script>と</script>
<canvas>と</canvas>

という風に、同じタグでかこっているのがわかると思います。

デスクトップ上など適当な場所にフォルダを作って(フォルダ名は英語で)、

メモ帳などにこの『HTML』コードを書いて、フォルダの中に保存するのですが、

保存する時に注意があって、

文字コードを『UTF-8』にするのが慣例なので、『UTF-8』として保存します。

ファイル名は『index.html』とするのが慣例です。

動画の中では、

『subline text』というエディタが使われていて、

最近だと『VS Code』が一番人気かと思いますが、好きなエディタ(メモ帳)でいいのかなと思います。

続いては『JavaScript(ジャバスクリプト)』。

プログラミングと数学第１回目のコード解説『JavaScript』その1

『JavaScript(ジャバスクリプト)』は、

クライアントサイド言語と呼ばれたりしますが、

『インターネットエクスプローラ』や『グーグルクロム』上で動く
『プログラミング言語』になります。

『インターネットエクスプローラ』や『グーグルクロム』さえ入っていれば動くので、

ほぼ全てのパソコンで動かせるというのが大きなメリットだろうと思います。

アオキ

他の言語、例えばPHP(ピーエイチピー)やPython(パイソン)などはプログラミングを動かすための準備がちょっと手間だったりしますので。

動画の中で書かれていたコードがこちら。

//main.js

window.onload = function () {
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight;


  for (var i = 0; i < 100; i += 1){
    context.beginPath();
    context.moveTo(Math.random() * width, Math.random() * height);
    context.lineTo(Math.random() * width, Math.random() * height);
    context.stroke();
  };
};

『JavaScript(ジャバスクリプト)』の機能をもりっと使われているので

最初はとっつきにくいと思うのですが、次第に慣れていくと思うので順番に解説すると・・

window.onload・・画面が読み込まれた時に実行されます。
function( ){ } ・・関数(機能)のことです。なみかっこの中に実際の動作を書いていきます。
var ・・変数を指定します。 (今回は、canvas、context, width, heightを指定しています。)
document.getElementById(“canvas”) ・・

『JavaScript』側から、『HTML』のどの場所を動かすかというのを指定することができます。

document.getElementById(ドキュメント・ゲットエレメントバイアイディー)

という長いアンド英語そのまんまな命令ですが、

これを使うことで、『HTML』側の、id( アイディー)部分に適用すると言う意味になります。

今回は『HTML』側の、

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

の部分に適用させる、という意味になります。

ちなみに、『canvas(キャンバス)』は『HTML5』で追加された機能で、

文字通り、絵を描くキャンバス(画用紙)のような役割をします。

アオキ

キャンパス(画用紙)といったらやっぱこれが思い浮かびますね。(懐かしい・・)

マルマンスケッチブック図案シリーズ A3 画用紙 S115

created by Rinker

maruman(マルマン)

続いて、

canvas.getContext(“2d”)・・canvasで2Dを使う
width = canvas.width = window.innerWidth ・・横軸
height = canvas.height = window.innerHeight ・・縦軸

です。

width(ワイズ)は横軸で、数学でいうとX。
heigth(ヘイト)は縦軸で、数学でいうとYになります。

アオキ

この辺りは『canvas(キャンバス)』を使う時のお決まり、おまじないのようなものと思ってもらえれば・・

canvasの解説ページ

アオキ

『JavaScript』もうちょい続きます。

プログラミングと数学第１回目のコード解説『JavaScript』その2

『JavaScript』後半のコードの解説になります。

  for (var i = 0; i < 100; i += 1){
    context.beginPath();
    context.moveTo(Math.random() * width, Math.random() * height);
    context.lineTo(Math.random() * width, Math.random() * height);
    context.stroke();
}

for (var i = 0; i < 100; i += 1) ・・for文。0から100未満まで繰り返します。

プログラミングの得意技といえば『繰り返し』。

繰り返しを意味する『for文』は、

それはそれはしょっちゅうでてくるのでそのうちに覚えると思います。

アオキ

なみかっこの中の処理を、今回の場合は0から99で合計100回繰り返します。

続いて、

context.beginPath()・・現在のパスをリセット
context.moveTo()・・指定位置から新規のパスを生成
context.lineTo()・・指定した位置まで直線を引く
context.stroke()・・設定した方法で線を引く

この辺も『canvas』特有の書き方になります。

アオキ

パスというのは、小道とか、コースとか、道とか、そんな意味だそうです。

context.moveTo の後のかっこの中に、

Math.random() * width, Math.random() * height

という内容があります。

Math.random() というのは、『JavaScript』でランダムな数字を作る時に使う命令です。

アオキ

ちょい細かく書くと、Mathオブジェクトのrandomメソッドなのですが、

アオキ

Mathという教科書の中の、randomという道具を使う、みたいなイメージでいいかと思います。

ランダムな数字を使う時にはよく使う方法です。

アオキ

使い道としたら、例えばトランプを切ったり、ルーレットを回したり、サイコロ振ったり、おみくじひいたりなんかはランダムで表現できると思います。

Math.random() * width ・・ランダムな数 × 画面の横幅(X軸)
Math.random() * height ・・ランダムな数 × 画面の縦幅(Y軸)

まとめるとこのコードは、

  for (var i = 0; i < 100; i += 1){
    context.beginPath();
    context.moveTo(Math.random() * width, Math.random() * height);
    context.lineTo(Math.random() * width, Math.random() * height);
    context.stroke();
}

画面上の適当なところから適当なところまで線をひく(それを100回繰り返す)

という意味になります。

こんな感じですね。