processingで虹色鉛筆を再現


#はじめに
この記事は SLP KBIT Advent Calendar 2020 の3日目(12月3日)の記事です。

作るもの
![Videotogif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920896/b1cc643c-94b4-f9f9-5aa4-9c65b86a2425.gif)
(GIFに変換したときにだいぶ暗くなってしまいました...実物はもっと彩度高いです。)
100均で虹色鉛筆を発見、作れないかな~?と思い、題材にさせていただきました。
#processingの導入
[processing公式サイト](https://processing.org/)
上のリンクから公式サイトに飛びDownloadからお使いのOSのものをダウンロードしてください。

>https://qiita.com/greatnekochan/items/010237ab3313757d0b0b
大変丁寧に教えてくれているためおススメです。

#作成する
###まずは線を描く
[公式サイト ExamplesからDrawingのContinuous Line](https://processing.org/examples/continuouslines.html)

```java
void setup() {
  size(640, 360);
  background(102);
}

void draw() {
  stroke(255);
  if (mousePressed == true) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}
```
これでマウスを押しながらドラッグしたとき線が描けます。
###色を付ける
######<font color="FireBrick">アプローチその1</font>
[公式サイト ExamplesからCororのhue](https://processing.org/examples/hue.html)
を利用し背景に色をつけ、線を引いたところのみ背景の色を表示するプログラムを書こうと思いました。
結果
![スクリーンショット (91).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920896/100c2c8f-f3e0-2e6f-fc0d-e4032d37a77e.png)
適当にくっつけただけではうまくいきませんでした。~~あたりまえ~~

この後試行錯誤するも**実力不足**により断念。。。

######<font color="blue">アプローチその2</font>
そもそもランダムな色の線が出力されればいいのでは⁉
ということで

```java

color strokeColour = color(0); 

void setup() {
  size(1280, 1280);　//ウィンドウサイズの決定
  background(255);　//背景を白にする
}

void draw() {
	strokeWeight(8);　//線の太さの決定
	stroke(strokeColour);
	if(mousePressed==true && mouseButton==LEFT){　//左ボタンをクリックしたときに線を表示
		line(mouseX, mouseY, pmouseX, pmouseY);
		strokeColour = color(random(256), random(256), random(256));　//ストローク中にランダムな色へ変化
```
**<font color="Gold">成功!!!</font>**
ストローク中にランダムで色が変わるようになりました！
![スクリーンショット (92).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920896/4e395470-358c-9042-531f-6a079b092a87.png)


#最低限の枠とデリート機能をつける
こちらの記事をもとにさせていただきました。
https://qiita.com/lunaHello/items/a794e0bae9e20804af10

```java
fill(207);　//以下の図形を灰色に塗りつぶす
		noStroke();
		rect(0,0,60,1280);
		rect(0,0,1280,60);
		rect(1100,0,200,1280);
		rect(0,1100,1280,1280);

	fill(255);　//以下の図形を白色に塗りつぶす
		rect(1200,1200,1280,1280);
		fill(0);
		text("clear",1220,1240);　//clearの表示

		}
	}
	
	void mouseClicked(){　
		if(120<mouseX && mouseX<1280 && 1200<mouseY && mouseY<1280){
		background(255);　//clearの箱をクリックした時、全消し
	}
}
```
#まとめ
```java

color strokeColour = color(0); 

void setup() {
  size(1280, 1280);　//ウィンドウサイズの決定
  background(255);　//背景を白にする
}

void draw() {
	strokeWeight(8);　//線の太さの決定
	stroke(strokeColour);
	if(mousePressed==true && mouseButton==LEFT){　//左ボタンをクリックしたときに線を表示
		line(mouseX, mouseY, pmouseX, pmouseY);
		strokeColour = color(random(256), random(256), random(256));　//ストローク中にランダムな色へ変化
	
	fill(207);　//以下の四角を灰色に塗りつぶす
		noStroke();
		rect(0,0,60,1280);
		rect(0,0,1280,60);
		rect(1100,0,200,1280);
		rect(0,1100,1280,1280);

	fill(255);　//以下の四角を白色に塗りつぶす
		rect(1200,1200,1280,1280);
		fill(0);
		text("clear",1220,1240);　//clearの表示

		}
	}
	
	void mouseClicked(){　
		if(120<mouseX && mouseX<1280 && 1200<mouseY && mouseY<1280){
		background(255);　//clearの四角をクリックした時、全消し
	}
}
```
#おわりに
諦めたアプローチ方法も完成させたいです。また、線の太さが変えられたり、消しゴム機能をつけたりと改良していきたいです。

自分でイメージしたものを作っていくこと、記事を書くことを初めて行ったため拙くなってしまいました。次回はもっと読みやすいものを目指します。