p5.jsを使っているのですが

背景と針の色を変えたいのですがどうすればいいでしょうか？
var IMG;
function preload() {
IMG = loadImage("clock5.gif");

}

function setup() {
createCanvas(600,600);
frameRate(15);
}

function draw() {
//background(200, 200, 100);
image(IMG, 0, 0, 600, 600);
translate(305, 300);
/*var c = color(255,204,0);
fill(c);
for (var i = 0; i < 12; i++){
if(i % 3 == 0){
ellipse(200, 0, 60, 60);
}else{
ellipse(200, 0, 50, 50);
}
rotate(PI / 6.0);
}
*/

rotate(- PI / 2.0);


var t = new Date();
push();
rotate(TWO_PI * (t.getSeconds() / 60.0 + t.getMilliseconds() / 60000.0));
strokeWeight(3);
line(0, 0, 210, 0);
pop();
push();
rotate(TWO_PI * (t.getMinutes() / 60.0 + t.getSeconds() / 3600.0));
strokeWeight(8);
line(0, 0, 220, 0);

pop();
push();
rotate(TWO_PI * (t.getHours() / 12.0 + t.getMinutes() / 720.0));
strokeWeight(12);
line(0, 0, 190, 0);
pop();
}
分かるかたいたら教えて下さい
ソースコードもおねがいします

No.1 回答者： fujillin 回答日時： 2016/07/13 12:28

こんにちは

P5.jsはまったく存じませんので、リファレンスをテキトーに覗いてみただけですが…
P5って、canvas利用の描画ライブラリのようですね。


＞背景と針の色を変えたいのですがどうすればいいでしょうか
背景は画像を利用なさっているようですので、元画像を替えるのが妥当ではないでしょうか？
（canvas上で再取得して色変更することも可能ですが、あまり効率的とは思えません。）

針は描画する際に色を指定してあげれば良いはずです。
素のjavascriptでは、strokeStyleで指定が可能ですが、p5ではstroke()メソッドで指定できるようです。
http://p5js.org/reference/#/p5/stroke
指定方法は、色名でも#XYZ形式でもr,g,b形式でも良いみたいです。
モードを変えればHSB形式でも指定が可能なようです。

全部の針を纏めて指定するならpush()、pop()の外側で、個別に色を変えたいのなら、それぞれを描画する際に指定すれば宜しいでしょう。