ランダム・サークル【Processing】

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# はじめに
今回の短めスクリプトでは、「**ランダム・サークル**」というランダムに円が溢れるプロジェクトを作りたいと思います。
長さ：`７行`（`124文字`）

# 作品サンプル
<img width="300" alt="sample.gif" src="https://qiita-image-store.s3.amazonaws.com/0/240280/96194133-5842-e5f3-cff2-c9f4cc106d19.gif">

# 最終的なコード

```java:random_circles.pde
void setup(){
  size(500,500);
}

void draw(){
  fill(random(255), random(255), random(255), 200);
  ellipse(random(500), random(500), 40 , 40);
}
```

# コードの解説
## 1. `void setup(){}`
はじまった時に、{}の中身を**一度実行する**。

## 2. `size(500,500);`
**画面の横と縦の大きさ**をそれぞれ500pxにする。

## 3. `void draw(){}`
{}の中身を**ずっと実行する**。

## 4. `fill(random(255), random(255), random(255), 200);`
図形の内側の塗りつぶす色を、**透明度が0.78（200/255より）で、ランダムな色**に設定する。

#### \>> `fill(h, s, b, α);`
図形の内側の塗りつぶす色を設定する、色（[HSB](http://tomari.org/main/java/color/hsb.html)）が(a, b, c)で透明度がαの色で塗りつぶす。（`fill(255,255,255,255)`が最大の場合で、真っ白で無透明な色になる。）

#### \>> `random(255)`
0から255までのランダムな値（乱数）。

## 5. `ellipse(random(500), random(500), 40, 40);`
x座標とy座標それぞれ0〜500のランダムな場所に、直径40pxの円を描く。

#### \>>`ellipse(x, y, w, h);`
中心(x, y)の位置に、横直径wで、縦直径hの楕円(ellipse)を描く。

# アレンジ・コード
#### \>>`background(255,255,255);`
背景の色をHSB(255,255,255)（真っ白）にする。

#### \>>`frameRate(10);`
1秒間に画面を10回更新する。（`draw(){}`は1回の更新につき、1度実行されるため、結果的に1秒間に10回円を描くかという）。

#### \>>`colorMode(RGB,100,100,100);`
色の設定方法をHSBではなく、RGBに設定し、各引数の最大値を100とする。

#### \>>`strokeWeight(3);`
図形の線の太さを3pxにする。

### サンプルコード（アレンジ）
`java:random_circles_arrange.pde
void setup(){
  size(500,500);
  background(255,255,255);
  frameRate(10);
  colorMode(RGB,100,100,100);
  strokeWeight(3);
}

void draw(){
  fill(random(100), random(100), random(100), 200);
  ellipse(random(500), random(500), 40, 40);
}
`

## 3色の固定色でランダム化する方法

3色の情報を格納する配列`circle_color`を作成し、そこに色を記述します。
後述するコードでは、以下のように表示されます。

<img width="300" alt="sample_three_color.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/9da06c47-9852-efc9-b3fa-5fd6d973b8a9.gif">

`java:random_circles_three.pde
int[][] circle_color = {{255, 0, 0} ,
    {0, 255, 0} ,
    {0, 0, 255} };
int i_color;

void setup() {
    size(500, 500);
}

void draw() {
    i_color = (int)random(0, 3);
    fill(circle_color[i_color][0], circle_color[i_color][1], circle_color[i_color][2], 200);
    ellipse(random(500), random(500), 40 , 40);
}

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)