例題１ 円を描く
名前は「例題１」にしてください。
code:ex01.js
'use strict'
/*
この例は、幅600、高さ400ピクセルのキャンバスを作り、
その中心に直径400ピクセルの円を描く。
*/
function setup() {
createCanvas(600, 400);
colorMode(RGB, 255, 255, 255, 1);
background(220);
// widthはキャンバスの幅、heightは高さ
circle(width/2,height/2,400);
}
function draw() {
}
この例は、幅600、高さ400ピクセルのキャンバスを作り、その中心に直径400ピクセルの円を描きます。
また、この例では2つの関数 setup(), draw()を作成し、setup()関数の中で、4つの関数を呼び出しています。　このdraw()関数は、中身のない関数になっています。
関数には、通常パラメータ（引数, argument）があり、その値によって動作を変更します。JavaScriptの関数は位置づけ式なので、パラメータの順に値が割り当てられます。
例：
function test(a,b,c) {
...
}
これを、test(1,2,'abc') として呼び出す（使う）とパラメータ a には 1 、b には 2 、cには文字列 abc が割り当てられます。
funciton setup()
プログラムの開始に一度だけ実行される。
function draw()
setup()実行後、繰り返し呼ばれる。
createCanvas()
createCanvas(w, h, /renderer/)
w : キャンバスの幅
h : キャンバスの高さ
/renderer/ optional
Returns : p5.renderer
上の例では、幅600、高さ400のキャンバスを作成する。キャンバスのｘ座標（横軸）は左端が 0 、右端がこの例では600となり、y座標は上端が 0 、下端が400となる。
background()
background(color)
background(colorstring, /a/)
background(gray, /a/)
background(v1, v2, v3, /a/)
background(values)
background(image, /a/)
color : p5.colorオブジェクト　color()から作ることができる。
colorstring : color 表記文字（ 例 'red', 'blue' ）rgb(), rgba()関数 ( 例 'rgb(255,0,0)', 'rgba(0%,0%,100%,0.4)' ) 3桁もしくは6桁の16進数 (例 '#f00' '#0000ff' )
a : 透明度 0-100 ?
v1, v2, v3 : RGBの整数値（0~255）( 例 background(255,0,0) background(0,0,255,50)
values: Numbersの配列
image : p5.imageを使う。
background関数や、fill, color などでは、通常RGBで色を指定する。RGBの大きさの指定方法は上記のように何種類かある。カラーパネル
透明度も指定できるがCSS rgba関数は0~1を指定するが、p5.js のdefaultでは0~100(255?)なので、混乱を避けるために次のように指定すると、CSS rbga関数と同じく透明度を0~1で指定できる。
colorMode(RGB, 255, 255, 255, 1);
circle()
circle( x, y, diameter)
x : x 座標の値
y : y 座標の値
diameter : 直径
2次元の図形を作る関数がp5.js には存在する。
arc() : 円弧
ellipse() : 楕円
circle() : 円
line() : 直線
point() : 点
quad() : 四角形
rect() : 長方形
square() : 正方形
triangle() : 三角形
基本図形
また、circle, ellipse, arcのパラメータのモードを変更する関数として ellipseMode() がある。
ellipseMode(mode)
ellipseMode(CENTER) : defalut mode 最初の2つのパラメータは中心の x と y 座標、3,4 番目のパラメータは幅と高さ（circleの場合は直径）。
ellipseMode(RADIUS) 最初の2つのパラメータは中心の x と y 座標、3,4 番目のパラメータはxとy方向の半径（circleの場合は半径）。
ellipseMode(CORNER) 最初の2つのパラメータは内接する四角形の左上の x と y 座標、3,4 番目のパラメータはその四角形の幅と高さ。
ellipseMode(CORNERS) 最初の2つのパラメータは内接する四角形の左上端の x と y 座標、3,4 番目のパラメータはその四角形　の右下端の x と y 座標。
注意事項：このパラメータはすべて半角大文字で記述すること。JavaScript は大文字と小文字を区別する言語。
rectMode(mode)
rectMode(CORNER): default mode 最初の2つのパラメータは四角形の左上の x と y 座標、3,4 番目のパラメータはその四角形の幅と高さ。
rectMode(CORNERS) 最初の2つのパラメータは四角形の左上端の x と y 座標、3,4 番目のパラメータは四角形の右下端の x と y 座標。
rectMode(CENTER) : 最初の2つのパラメータは中心の x と y 座標、3,4 番目のパラメータは幅と高さ（squareの場合は１個）。
rectMode(RADIUS) 最初の2つのパラメータは中心の x と y 座標、3,4 番目のパラメータは幅と高さの半分（squareの場合は半径）。
注意事項：このパラメータはすべて半角大文字で記述すること。JavaScript は大文字と小文字を区別する言語。
例題2 小さい 円を大きくする