【超基礎】簡単にプログラミング（Processing）で円を描く！

今回はプログラミング（Processing）で丸（円）を描く方法を教えます！！！

安心してください、簡単です

本当にプログラミングって聞いただけで拒否反応を起こさないで！！！

いろんな人にこのコードを見せたら「何これ！それだけ？」って言われました

簡単なんです

みてみてください

まずやること

Processingのダウンロードは→こちら

ダウンロード方法については次回解説するかもです

今回はこんなのを描くことを目標にします

目がチカチカしますね笑

Processingを開いてここにコードを書いていきます

まずは自分が絶対に書くコードです

こちらです

                      //上
void setup(){
  size(400,400);
  
}
                      //中
void draw(){

}
                      //下
void keyPressed(){
  if(key==' '){
    save("test.png");
    println("saved");
  }
}

上中下三段です

順番に行きましょう

上

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

setup()は実行ボタン（再生マークのやつ）を押した時に一回だけ{}の中身が処理される場所です

ここには自分は基本size()を書きます

sizeはウィンドウのサイズを変えるものです

size(A,B);

Aは横、Bは縦の大きさです

かけたら実行ボタンを押してみてください

こんなウィンドウが出たら成功！

今回は400で進めますが、色々試してみましょう！

※改善されたかもしれませんが、Windowsだとこの関数がバグる事がありました

ここまでは大丈夫ですか？

ゆっくり進んでいきましょうね

中

void draw(){

}

drawは実行されてから繰り返し{}の中身を処理する場所です

ここが一番書く量が多いです

ここの中身は後ほど

下

void keyPressed(){
  if(key==' '){
    save("test.png");
    println("saved");
  }
}

keyPressed()は指定したキーを押した時に一回{}の中身が処理される場所です

ここには自分はいつも、スペースキーを押すとスクリーンショットが取れるような処理をしています

基本的にはこれをコピペしてもらえばOK！

ifは英語で「もし」って意味があるのは知っていますよね

ここでもそんな意味で使っています

文章でこの中身を説明すると

もしスペースキーを押した時”test.png”という名前のスクショを保存して、「saved(保存したよ)」って言います

って感じです

注意：このコードではスクショは一枚しか保存されません

例：3回スペースキーを押したら最後の一枚が保存される

3枚のスクショが欲しかったら一回ずつ画像を他のフォルダに移動です

わからなかったらコメントお願いします！

円を描く！

円（丸）を描いていきましょう！

void draw(){

  stroke(0,0,255);
  fill(0,255,255);
  ellipse(200,200,100,100);

}

この真ん中3行だけでいいです！

drawの{}内に書いてみましょう

これだけでできてしまいます！！！

実行を押すと。。。。。

ぜひスペースキーでスクショを保存して、他のフォルダに移動しておきましょう！

はい、これだけですこれだけで円は描けます

すいません、解説します

上2行は次の章で解説するので3行目です

ellipse(a,b,c,d);

※数字などの要素は,（カンマ）で区切るようにしましょう！

a：x座標　b：y座標　c：横直径　d：縦直径

なので上のコードを説明すると

x座標200、y座標200、横直径100、縦直径100の円を描きます

って感じですね

色を変える！

ちょっとアートっぽくしていきましょう

色を変えます

基本は線と中身の色を変えられます

線：stroke()  中身：fill()

このカッコの中は基本的にR,G,BかH,S,Vか#000000で書きます

R,G,Bが一番簡単なのでおすすめです！

今回はR,G,Bの書き方を紹介しておきます

R,G,BはRed,Green,Blueの頭文字で0～255の値を入れましょう

例：線を赤にする場合→stroke(255,0,0);

好きなように変えてみてください！

この、stroke()とfill()を

noStroke(); noFill();

と変えるとそれぞれ色を消す事ができるんです

いらない（NO）と書くだけです！

• 

• 

---

さらに、線は太さを変える事ができます

strokeWeight();

これを書き足してカッコの中に好きな数字を入れてみてください

色についてはこんな感じです

ランダムを使う！

ここまでは大丈夫でしょうか？

ここから一気にアート化しましょう！

ランダムの使い方です！

基本的な書き方はこうです

random(a,b)

aとbは範囲です

a~bまでの範囲でランダムで数字を出します

って感じですね

これを使ってみましょう

色

まずは一つ前でやった線と中身の色をランダムにしてみましょう

色（R,G,B）の範囲は覚えていますか？

0~255！

なのでランダムの書き方は(0,255)です

fill(random(255),random(255),random(255)); 
stroke(random(255),random(255),random(255));

どうでしょうか？

画像では伝わりにくいので無しにしますね

目がチカチカしますよね

うっとおしい！って人はさっきのに戻しておいてもいいです

座標

次は円の座標で使ってみましょう

ここでウィンドウの大きさを思い出してください

今回は400,400で作ったのでそれよりも円の座標が大きな値になると円が見えなくなるんです

なので範囲は(0,400)にします

ellipse(random(0,400),random(0,400),100,100);

どうですか？

だいぶカオスになりましたよね

                      //上
void setup(){
  size(400,400);
  
}
                      //中
void draw(){
  fill(random(255),random(255),random(255)); 
  stroke(random(255),random(255),random(255));
  ellipse(random(400),random(400),50,50);
}
                      //下
void keyPressed(){
  if(key==' '){
    save("test.png");
    println("saved");
  }
}

↑最終的なコードです！

その結果がこちらです

思っていたよりもコードが少ないと感じた人も多いと思います！

ランダムの値を変えてみたり

いろんな場所にランダムを使ってみたり

自分の好きなように遊んで自分だけのアートを作りましょう！

ぜひ作ってみたら#アートを服にでコメントお願いします!

最後

今回は円を描く方法でした！

予想していたより簡単でしたか？難しかったでしたか？

プログラミングって意外と簡単なんだよっていう事が伝われば自分も嬉しいです

作ったアートはぜひ見せてくださいね！#アートを服にでお待ちしてます

こういった電子アート柄の服も販売しています！→こちら

この記事が少しでもいいなって思ってくださった方はツイッター、インスタのいいねやフォローお願いします！

以上です！

それでは！

（この記事はMAN WITH A MISSIONのdistanceを聴きながら書きました）