クリエイティブコーディング

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

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

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

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

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

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

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

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

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

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

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

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

逆に言うと、


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

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

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

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

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

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

なので、

これまた文字通り、

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

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

Sponsored link

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よくよく見ると、

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

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

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

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

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

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

動画の中では、

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

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

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

Sponsored link

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

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

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

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

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

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

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

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

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

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

  • window.onload・・画面が読み込まれた時に実行されます。

  • function( ){ } ・・ 関数(機能)のことです。なみかっこの中に実際の動作を書いていきます。

  • var ・・変数を指定します。 (今回は、canvas、context, width, heightを指定しています。)

  • document.getElementById(“canvas”) ・・

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

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

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

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

今回は『HTML』側の、

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

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

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

アオキ
キャンパス(画用紙)といったらやっぱこれが思い浮かびますね。(懐かしい・・)
created by Rinker
maruman(マルマン)
¥462 (2019/04/19 23:47:29時点 Amazon調べ-詳細)

続いて、

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

です。

  • width(ワイズ)は横軸で、数学でいうとX。
  • heigth(ヘイト)は縦軸で、数学でいうとYになります。
アオキ
この辺りは『canvas(キャンバス)』を使う時のお決まり、おまじないのようなものと思ってもらえれば・・

canvasの解説ページ

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

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

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

  • 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軸)

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

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

という意味になります。

こんな感じですね。

アオキ
100本の線が書かれています。(数えてないけど)

保存する時は、『main.js』という名前で、さきほどの『index.html』と同じフォルダ内に保存すればOKです。

文字コードを『UTF-8』にするのを忘れずに。

保存して、『index.html』を開いたら、ランダムな線がずらっと表示されます。

再読み込みするたびにランダムに表示されるのがわかると思います。

アオキ
ほんの0.1秒だかの間に100回繰り返すんですよね、プログラミングすごい・・
Sponsored link

プログラミングと数学の第1回目の動画を見てみて

ちまたでは今回のようなデザインをするプログラミングのことを、

『クリエイティブコーディング』と言うそうなんですが、

『スクラッチ』の次の一歩として、

今回のような『クリエイティブコーディング』を取り入れてみるのは面白いんじゃないかと思います。

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

といった知識をまるっと身につけられて、しかも見た目がすぐに変わるので大人がやっても楽しいんじゃないかなと。

これからも時間をつくってちょくちょく『クリエイティブコーディング』に挑戦してみようかなと思います。

アオキ
どーせやるなら楽しくやっていきたいもんですね。

参考図書

created by Rinker
¥3,218 (2019/04/19 23:47:08時点 Amazon調べ-詳細)
created by Rinker
¥4,320 (2019/04/20 11:50:35時点 Amazon調べ-詳細)

『クリエイティブコーディング』関係ではこんな記事も読まれています。

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

2. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

    前回の記事で、プログラミングを使って数学がわかるという『コー…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
  2. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  3. Laravel

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
  4. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して
  5. MySQL

    検索システムのデータベースの作り方や考え方を8ステップで書き連ねてみる
PAGE TOP