プログラミングでイラスト制作！はじめてのp5.js@praxiSpace

プログラミングでイラスト制作！ はじめてのp5.js 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

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

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

• https://editor.p5js.org/

プログラミングで イラストを作ろう！ ● ● ● ● ● ● 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) プログラムの書き方 色を変えよう！ RGBの意味 図形の基本 図形のかき方 イラストを作ろう！ 4

p5.jsのプログラムの書き方 プログラムは「やりたいこと(必要な情報);」で書きます。 ● ● ● やりたいこと：図形をかく、色を変えるなど。 必要な情報 ：位置、大きさなど。 複数ある時には「,（カンマ）」で区切る。 1行の終わりには「;（セミコロン）」を書く。 (例) 図形を黒でぬりつぶす fill(0); 図形をぬりつぶす 色は黒（0） （色の表し方はこの後に説明します） 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 5

書き方のルール いくつかのルールを守ってプログラミングしましょう。 ● プログラムはすべて半角で書きます。 fill(0) は動きますが、ｆｉｌｌ （０）は動きません。 ● 大文字と小文字は別のものです。 fill(0) と FILL(0) は別です。 ● プログラムは上から下の順に実行されます。 順番を考えてプログラムを書きましょう。 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 6

プログラムを書く場所 プログラムはdraw(){} の中に書きます。 はじめから入っているプログラム （今回は使いません） イラストの大きさを決めるプログラムが 書かれています。 プログラムは{}の中に書きます。 イラストの後ろを ぬりつぶすプログラム 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 7

［ワーク］色を変えよう！ 赤、緑、青の3つの色を混ぜて、新しい色を作ります。 イラストの後ろをぬりつぶす [例] background(Red, Green, Blue); background(255, 128, 0); 赤、緑、青の順に数字を書く。 ● 0～255の間の数にする ● 数字と数字の間は 「,」（カンマ）で区切る background(0, 0, 0); background(0); ()の中に数字を1つだけ入れた場合、 他の2つも同じ数字が入ったことになります。 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 8

R, G, Bの数字の意味 Red（赤）、Green（緑）、Blue（青）の光の強さを表します。 Red （赤） 0 Green （緑） 0 0 Blue （青） 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 黒 64 0 0 128 0 0 192 0 0 255 0 0 0 64 0 0 128 0 0 192 0 0 255 0 0 0 64 0 0 128 0 0 192 0 0 255 9

［参考］RGBの組み合わせ例 数字を組み合わせることで、さまざまな色を作れます。 255 0 255 0 0 255 255 0 0 255 255 255 0 255 255 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 255 255 0 128 0 128 0 255 0 0 0 128 128 0 0 128 128 128 0 128 128 128 128 0 0 128 0 数字の順番 Red（赤） Green（緑） Blue（青） 10

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

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

図形（円や長方形）のかき方 どちらの図形も横, たて, はば, 高さが必要です。 円 ellipse(300, 200, 150, 250); 300 長方形 rect(150, 100, 150, 250); 150 200 200 250 150 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 250 150 13

［ワーク］イラストを作ろう！ 図形を組み合わせてイラストを作ります。 (例) カエル カエルの顔 カエルの目 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ［参考］図形をぬりつぶす fill(Red, Green, Blue) 14

おわりに ● ● ● 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) まとめ ふり返り ご案内 15

まとめ p5.jsを使って、プログラミングでイラストをかきました。 図形をかく 色をぬりつぶす 円 ellipse(横, たて, はば, 高さ); イラストの後ろ background(Red, Green, Blue); 長方形 rect(横, たて, はば, 高さ); ［参考］図形の後ろ fill(Red, Green, Blue) 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 16

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

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

• https://loosedrawing.com/
• https://creativecommons.org/licenses/by/4.0/deed.ja

株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)