はじめてのp5.js@praxiSpace

このイベントでやること 図形を組み合わせて絵をかきます。 色をぬる 図形をかく 色を混ぜて 新しい色を作ります。 位置や大きさを決めて 図形をかきます。 1 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

使うツール p5.jsで絵をかきます。 ［ p5.js ］プログラミングで絵をかくツール https://editor.p5js.org/ プログラムを書く場所 2 結果が出る場所 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

• https://editor.p5js.org/

プログラミングで絵をかこう！ 3 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

p5.jsのプログラムの書き方 • プログラムは「 ( );」で書きます。 ：図形をかく、色を変える、など。 ：位置や大きさなど。複数ある時には、「,（カンマ）」で区切る。 • 1行の終わりには「;（セミコロン）」を書く。 • プログラムはすべて半角で書く。 ［例］背景を灰色に変える ( ); （色の表し方はこの後に説明します） 4 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

［ワーク］色を変えよう！ 、 、 の3つの色を混ぜて、新しい色を作ります。 、 background( , , 、 の順に数字を書く。 • 0～255の間の数にする ); • 数字と数字の間は 「,」（カンマ）で区切る 5 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

R, G, Bの意味 Red（赤）、Green（緑）、Blue（青）の色の強さを表します。 強い （明るい） RGBを組み合わせた色 弱い （暗い） 6 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

［参考］RGBの組み合わせ例 R 255 255 255 178 102 102 102 102 102 178 255 255 192 G 102 178 255 255 255 255 255 178 102 102 102 102 192 B 102 102 102 102 102 178 255 255 255 255 255 178 192 R 255 255 255 128 0 0 0 0 0 127 255 255 128 G 0 128 255 255 255 255 255 128 0 0 0 0 128 B 0 0 0 0 0 128 255 255 255 255 255 127 128 R 153 153 153 76 0 0 0 0 0 76 153 153 64 G 0 76 153 153 153 153 153 76 0 0 0 0 64 B 0 0 0 0 0 76 153 153 153 153 153 76 64 7 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

図形の基本 かきたい位置と大きさを、数字（単位：ピクセル）で表します。 位置 左上を基準にして、 、 の順番で表す。 大きさ 、 の順番で表す。 円の中心は , 8 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

［参考］ピクセルとは ピクセルは画像の大きさの単位です。 1ピクセルは1つの点で、点が集まって画像ができています。 横128ピクセル 縦128ピクセルの画像 1ピクセル 9 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

円のかき方 ellipse( , , , ) 10 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

［ワーク］絵をかこう！ 図形を組み合わせてイラストを作ります。 （参考）長方形、三角形のプログラム 長方形 rect( , , , 三角形 triangle( ) 11 , , , , , ) 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

おわりに 12 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

まとめ p5.jsを使うと、プログラミングで絵をかけます。 プログラムは「 ( );」の方法で書く。 ：図形をかく、色を変える、など。 ：位置や大きさなど。複数ある時には、「,（カンマ）」で区切る。 13 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

ふり返り 学んだことをふり返りましょう（1分） ［例］ • どんなところが、面白かった？ • どんなところが、難しかった？ • 学んだことを今後どうしていきたい？ 14 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

作ったプログラムの保存 アカウントを作成すると、 作ったプログラムは自動で保存されます。 作ったプログラムは、ファイルメニュー から確認できます。 15 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

本資料の権利と留意事項 ［使用画像の出典］ 画像・イラストは以下のサイトよりダウンロードして利用しております。 • Loose Drawing https://loosedrawing.com/ ［本資料のライセンス］ • 注記があるものを除いて本資料の「文章」は、株式会社まなび梯（以下「当社」）よりクリエイティブ・コモンズ・ライセンス （CC-BY 4.0）のもとに提供されています。 • なお、本資料のほかの部分（画像・ロゴなど）には、他の条件でライセンスされている第三者の コンテンツが含まれている場合があります。 ［留意事項］ • 本資料に掲載されている会社名、製品名などの固有名詞は、各団体の商標または登録商標です。 • 本資料に掲載されている製品名などには、必ずしも商標表示（™、®）を付記しておりません。 • 本資料の内容について正確な記述につとめましたが、当社は本資料の内容に対して何らかの保証をするものではありません。 • 本資料で得られた情報の使用から生じるいかなる損害についても、当社は責任を負わないものとします。 16 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

• https://loosedrawing.com/