CG関連

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

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

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

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

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

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

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

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

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

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

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

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

逆に言うと、


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

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

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

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

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

そして、記事の中で紹介されていたのが『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(マルマン)
¥461 (2019/08/21 13:49:41時点 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/08/21 03:00:11時点 Amazon調べ-詳細)
created by Rinker
¥4,320 (2019/08/21 12:36:08時点 Amazon調べ-詳細)

『数学・物理』関係ではこんな記事も読まれています。

1. 【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

2. プログラミングで【加速度】をわかりやすくするために実際に動かしてみる(5)【P5.js】

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

4. 【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】

5. 【図解】波の用語や動きをプログラミングも交えてまとめてみる【数学&物理】

6. 【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】

7. 【極座標 】とは?【直交座標 】との違いや変換方法についてまとめてみた

↓ ここから下はちょいムズカシイ

1. 【ベクトル解析 勾配(grad)】わかりやすくまとめてみた

2. 【ベクトル解析 発散(div)】わかりやすくまとめてみた

3. 【テイラー展開】をわかりやすくまとめてみた【おすすめ動画あり】

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

1. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり(6)【P5.js】

7. プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラミングで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ【P5.js】(9)

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

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

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

コメント

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

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

CAPTCHA


関連記事

  1. CG関連

    【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その1と2

    前回の記事で『TouchDesigner』と『GLSL』を連携させる方…

  2. CG関連

    【P5.js】プログラミングで移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)

    遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも…

  3. CG関連

    【GLSL(シェーダー)】プログラミングでかっこいい映像をつくる『レイマーチング』

    プログラミングでかっこいい映像をつくるには、『GLSL(ジーエルエスエ…

  4. CG関連

    【Unity】よく使う用語集【初心者向け】※随時更新

    『Unity』で覚えておいた方がいい用語をまとめてみました。初心者…

  5. CG関連

    【TouchDesigner】で『ShaderToys』を使う方法【画像たっぷり】 (動画5-1)…

    連日の『TouchDesigner』で『GLSL』を使ってみる動画のメ…

  6. CG関連

    【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その4 描画(step関数…

    引き続き【TouchDesigner】で『GLSL』を使う動画を見つつ…

Sponsored link

最近の記事

  1. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  2. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  3. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. CG関連

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  5. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述