プログラミングを春休みの自由研究にしてみる 2日目

by tokagi_rikka · 公開済み 2020年3月3日 · 更新済み 2020年3月21日

六花です。
https://komochiduki.net/ikupro/2020/03/01/234/の続き、2日目です。

たたき台として適当に描いた主人公機のラフを気に入ったらしく娘は気合が入っており、朝ご飯を食べる前から「プログラミングしよ！」と提案してきました。
やはり子供には〇と□は受けがいい。
↓主人公マスくんのラフ
(ここに画像)

娘には普段からの日課として市販のワーク、他には春休みに入ったことでお手伝いのお風呂掃除など、彼女が先にやっておくことがあったので、朝ご飯ができるまでマグネットのお絵描き盤でコンピュータとプログラミングの基礎について説明しました。
娘が本の虫だからか、それとも私がプログラミングをやっているところを見ているからなのか、マスくんを動かすことへの情熱がそうさせるのか、こちらの説明に対する娘の拒否感はほとんどありませんでした。
実際、後日訪ねても内容が全部身についているかといえばそうでもないと思いますが、知識というのは「覚えて忘れてまた覚えて」を繰り返すものだと思っているのでこれでいいのかなと。
読者の方が同様のことに挑戦する場合、各項目についてそれぞれ更にかみ砕いて説明した方が良いと思います。

・コンピュータとは与えられた課題に対して回答する(戻り値を戻す)道具である。(基本的には小学生が算数でやっている計算問題と変わらない)
・アプリケーションソフトウェアは与えられた情報を元に計算を行い、回答する。(この点で関数と同じであることを関数の説明の際に行う)
・コンピュータが扱う数字はメモリというスイッチの塊のところに2進数で保存されている(レジスタやキャッシュなどの説明は割愛)
・格納する数字(変数)には型というものがあり、それぞれ使用するビット数が違う。
・関数は与えられた変数を元に計算を行い、回答する。例えばint Plus(){ return 2 + 3; }は5と回答し、関数を呼んだ側でint(5)として扱われる。
　また、これをint Plus(int A, int B){ return A + B; }と書き、関数を呼ぶときにPlus(2, 3)と書いても同じ結果が得られる。
・問題：int Plus(int A, int B){ return A + B; }のとき、 result = Plus(3, 4) + Plus(1, 2); return result; の回答は何か？ -> 10
・分岐処理のif文について説明(上から下に実行される、という逐次処理の説明はせずとも、娘は受け入れていた模様……本当は必要だと思われる)

実際の説明については、厳密な正しさよりも把握しやすさを重視しました。
子供の内は飲み込みは早いですが忘れるのも早いので、細かいことにこだわって興味を失われるよりも、どんどん先に進ませる方がいいかなと思いました。

お昼ご飯を食べて、プログラミングを再開。
主要な開発環境はvisual studioとDXライブラリです。(十年以上前から愛用)
まず、数直線(1次元座標)と2次元座標について説明しました。
座標について感覚的に理解してもらうために、マスくんの体と腕を別の画像として保存しておき、それをプログラム上で組み合わせてもらうことにしました。
ウインドウの中にマスくんの体と腕を描画するところまでのお膳立ては私が記述しておき、娘はx座標とy座標のみを変更して体と腕のドッキング作業を楽しんでもらいます。
プログラミング教育ではなく自然にプログラミング始めた人の大抵は、おそらくパラメータだけをいじって変化を確認する遊びから始めたのではないのでしょうか？
↓ドッキング作業中

↓ドッキング作業完了

ドッキング作業を娘好みの形で終えた後、while文や構造体について軽く触れ、腕に回転機能を付けて遊んで本日は終了となりました。


#include "DxLib.h"

// プログラムは WinMain から始まります
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
    ChangeWindowMode(true); // ウインドウモードで起動
    SetWindowStyleMode(7); // 7:最大化ボタンが存在するウインドウモードに変更

    SetGraphMode(1920, 1080, 32);
    SetWindowSize(1920, 1080); // 初期ウインドウの大きさ

    SetWindowSizeChangeEnableFlag(true, true); // ウインドウサイズ変更を可能にする(縦横比変更不可)

    if (DxLib_Init() == -1)     // ＤＸライブラリ初期化処理
    {
        return -1;          // エラーが起きたら直ちに終了
    }

    SetTransColor(255, 255, 255);
    SetDrawScreen(DX_SCREEN_BACK);//裏画面

    int 画像_マスくん_立ち = LoadGraph("../../data/マスくん_立ち.png");
    int 画像_マスくんの手 = LoadGraph("../../data/マスくんの手.png");
    int 画像_マスくんの手_ドリル = LoadGraph("../../data/マスくんの手_ドリル.png");

    struct マスくんの手
    {
        int x = 1100;
        int y = 432;
        int x_中心 = 42;
        int y_中心 = 63;
        int x_中心差分 = 22;
        int y_中心差分 = 1;
        double 拡大率 = 4.0;
    };
    マスくんの手 左手;
    マスくんの手 右手;

    while (ProcessMessage() != -1)
    {
        ClearDrawScreen(); // 画面を掃除する

        static double angle_1 = 0.0;
        static double angle_2 = 0.0;
        angle_1 += 0.01;
        angle_2 -= 0.01;
        if (angle_1 >= 2.0 * 3.1415) { angle_1 = 0.0; }
        if (angle_2 <= 0.0) { angle_2 = 2.0 * 3.1415; }
        DrawRotaGraph2(int(左手.x - 左手.x_中心差分 * 左手.拡大率), int(左手.y - 左手.y_中心差分 * 左手.拡大率), 左手.x_中心, 左手.y_中心, 左手.拡大率, angle_1, 画像_マスくんの手, true);
        DrawRotaGraph(1000, 500, 4.0, 0.0, 画像_マスくん_立ち, true);
        DrawRotaGraph2(int(右手.x - 右手.x_中心差分 * 右手.拡大率), int(右手.y - 右手.y_中心差分 * 右手.拡大率), 右手.x_中心, 右手.y_中心, 右手.拡大率, angle_2, 画像_マスくんの手, true);

        ScreenCopy(); // 描画を反映する
    }

    DxLib_End();                // ＤＸライブラリ使用の終了処理

    return 0;               // ソフトの終了 
}

プログラミングを春休みの自由研究にしてみる 2日目

おすすめ

コメントを残すコメントをキャンセル

最近の投稿

カテゴリー

ブログ管理人について

プログラミングを春休みの自由研究にしてみる 2日目

おすすめ

2年生の娘が受けてきた、日能研のテストが面白かった

ニューラルネットワークの検算、GradientCheckingの実装[Eigen vs Arrayfire]

【tiny-dnn】ミニバッチやエポックの区切りで処理させたいとき

コメントを残す コメントをキャンセル

最近の投稿

カテゴリー

タグ

ブログ管理人について

コメントを残すコメントをキャンセル