データサイエンスとはインターネットに蓄積されるビックデータをAIを使って分析し活用する学問分野である。新しい学習指導要領では、小学校、中学校、高校を通して「データの分析」や「データの活用」を行うデータサイエンス教育の必要...

GUI（Graphical User Interface）要素は、ユーザーがコンピューターやデバイスと対話するために使用される視覚的なコントロールである。JavaScriptでは一般にDOM(Document Objec...

p5.jsではイメージの処理を簡単に行うことができる。 ■イメージのアップロードimgフォルダ（名前は任意）を作成し、イメージファイルをアップロードしておく。 ■イメージのロードと表示次の手順でイメージのロードと表示を行...

アニメーションはp5.jsの最も得意な分野の一つである。この章で取り上げる内容は大きく分けると以下の３種類である。 イメージ処理 以下の３段階でイメージ処理を行う。 アニメーション アニメーションを行うための基本的な機能...

sin関数を使ってリサジュー曲線を描く。 例題 3-6-1 リサジュー曲線は、波ＡをオシロスコープのＸ軸に、波ＢをＹ軸に入れたときに出来る図形でもある。オシロスコープは電気信号（電圧変動）の時間的変化を観測するための装置...

1/√2の長方形を敷き詰める。 例題 3-5-1 長辺と短辺の比率が2：1の長方形を1つ描き，その長方形の長辺の半分を短辺，元の短辺を長辺とする長方形を90c横にして描き，これを繰り返す．すると，長方形の対角線は角度を9...

正多角形を描くプログラムを応用して、渦巻模様を描く。 例題 3-4-1 正多角形を描くところで説明したように、４角形を書くには90°回転した。この回転角度を少しずらした89°にし、さらに直線を引くたびに長さを「-1」して...

forの中にforがある構造を二重ループと呼ぶ。 二重ループでは内側のループの変数が先に変化していく。外側のiが1の状態で、内側のjが1,2とくり返し、次にiが2となり、内側のjが1,2とくり返す。これをiが3になるまで...

3角形、4角形、5角形など個々の多角形を書く問題を一般化して「n角形」を書くという問題 に置き換える。 プログラム的には変数nを使ってn角形を書くということになる。 繰り返す回数は「3」⇒「n」、回転する角度は「360/...

３角形、４角形などの正多角形を描く。 開始点から右に200進み、90°向きを回転し、200進む。さらに90°向きを回転し、200進む。さらに90°向きを回転し、200進む。これで開始点に戻り、正４角形が描ける。 開始点か...