proseccingでつくるイラスト

実現したいこと

息子がプログラミングに興味をもってイラストを作りたいといいました。自分は一切プログラミングに触れたことがなく、息子もEテレでみたことがあるくらいの初心者です。
簡単でいいのでproseccingで家のイラストを描くコード（？）を知りたいです。

また、塗り絵のように煙突や窓を押したらランダムに色が変わるみたいな要素がもし実現可能なら教えていただけると息子も楽しめるのかなと思いますのでお手数ですが教えていただけると嬉しいです。

よろしくおねがいします。

発生している問題・分からないこと

上記のままです、よろしくお願いいたします。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

上記のままです、よろしくお願いいたします。

補足

特になし

行動規範の内容に同意します

回答2件

ベストアンサー

息子がプログラミングに興味をもってイラストを作りたいといいました。自分は一切プログラミングに触れたことがなく、息子もEテレでみたことがあるくらいの初心者です。

つまりお絵描きがしたいというよりは、なんらかのプログラミングをしてみたいということですね？

息子さんの年齢が分かりませんが、ProcessingはScratchのようなビジュアルプログラミング言語ではないのでやや難しめかとは思います。

わたしも小学生の時BASICで遊んでいたので、早すぎるとかはないでしょう。
何かわかりやすそうな本を、１冊買っていただくといいんじゃないでしょうか^^

簡単でいいのでproseccingで家のイラストを描くコード（？）を知りたいです。

基本的には円や四角を描く命令の組み合わせで描くことになります。
Reference / Processing.org

色を決めて、描く図形の座標や大きさを数字で指定します（わたしなんかからしたらぶっちゃけめんどくさいですが^^;

描く順番も重要です^^

センスがないので申し訳ないですが、例えばこんなです。

java
1size(600, 400);
2
3// そら
4background(#00A2E8);
5
6// たいよう
7fill(#FFC90E);
8circle(600, 0, 200);
9
10// じめん
11fill(#22B14C);
12rect(-1, 300, 601, 100);
13
14// えんとつ
15fill(#880015);
16rect(180, 80, 50, 80);
17
18// やね
19fill(#B97A57);
20triangle(300, 100, 500, 200, 100, 200);
21
22// かべ
23fill(#EFE4B0);
24rect(150, 200, 300, 150);
25
26// まど
27fill(#99D9EA);
28rect(300, 220, 100, 100);

また、塗り絵のように煙突や窓を押したらランダムに色が変わるみたいな要素がもし実現可能なら教えていただけると息子も楽しめるのかなと思いますのでお手数ですが教えていただけると嬉しいです。

Processingは主にアート用途ということで、図形の当たり判定のような機能が（標準では）ありません。意外とこういうのは難しいです。
Scratchとかのほうが向いているかもしれません（知らないですが^^;

それでは何なので簡易的な方法での例です（偶然同じ色になると一緒に色が変わってしまいます）

java
1// それぞれのいろのへんすう
2color そら = #00A2E8;
3color たいよう = #FFC90E;
4color じめん = #22B14C;
5color えんとつ = #880015;
6color やね = #B97A57;
7color かべ = #EFE4B0;
8color まど = #99D9EA;
9
10void setup() {
11  size(600, 400);
12}
13
14void draw() {
15  background(そら);
16
17  fill(たいよう);
18  circle(600, 0, 200);
19
20  fill(じめん);
21  rect(-1, 300, 601, 100);
22
23  fill(えんとつ);
24  rect(180, 80, 50, 80);
25
26  fill(やね);
27  triangle(300, 100, 500, 200, 100, 200);
28
29  fill(かべ);
30  rect(150, 200, 300, 150);
31
32  fill(まど);
33  rect(300, 220, 100, 100);
34}
35
36// クリックしたとき
37void mouseClicked() {
38  // クリックしたばしょのいろ
39  color c = get(mouseX, mouseY);
40
41  // もし クリックしたばしょのいろ が そら とおなじなら...
42  if (c == そら)
43    // そらのいろをランダムにかえる
44    そら = color(random(256), random(256), random(256));
45
46  // ほかのいろもおなじように
47  if (c == たいよう) たいよう = color(random(256), random(256), random(256));
48  if (c == じめん) じめん = color(random(256), random(256), random(256));
49  if (c == えんとつ) えんとつ = color(random(256), random(256), random(256));
50  if (c == やね) やね = color(random(256), random(256), random(256));
51  if (c == かべ) かべ = color(random(256), random(256), random(256));
52  if (c == まど) まど = color(random(256), random(256), random(256));
53}

世界中の人が作ったコードを公開している、こういうサイトもあります。
Browse Sketches - OpenProcessing

気になったのを選んで上部の</>ボタンを押すとコードが見れます。
ただしほとんどがp5.jsモードのコードです（回答コードはJavaモード）

あるいはＡＩを活用してもいいでしょう^^

Microsoft EdgeのCopilot機能で、

「proseccingで家のイラストを描くコード」

と聞いてみたところ、下記コードが返ってきました（まだ私のほうがセンスがありそうですｗ
もっと詳細を指定すればよりよくなるとは思いますが、叩き台程度にはなるでしょう^^

java
1void setup() {
2  size(400, 400);
3  background(255);
4  drawHouse();
5}
6
7void drawHouse() {
8  // 家の本体
9  fill(150, 75, 0); // 茶色
10  rect(100, 200, 200, 150);
11
12  // 屋根
13  fill(255, 0, 0); // 赤色
14  triangle(100, 200, 200, 100, 300, 200);
15
16  // ドア
17  fill(100, 50, 0); // 濃い茶色
18  rect(180, 280, 40, 70);
19
20  // 窓
21  fill(0, 191, 255); // 青色
22  rect(130, 230, 40, 40);
23  rect(230, 230, 40, 40);
24}