記録

勉強したことに関するのノート。見返して分かるようにしてます。

ごり押しでProcessingでp5.jsと同じものを作る

yetirom.hatenablog.com

これで作った一番上の青色のコードを色々いじってシルクスクリーンのデザインにしようとしました。
色々アドバイスを頂きながら修正して完成したのがこちらです。

function setup() {
createCanvas(567, 822);
colorMode(HSB,360,100,100,100); 
}

function draw(){ 
push();
translate(0,-50);
stroke(0,0,0);
fill(0,0,0)
ellipse(frameCount*9%width,frameCount,3,random(50)%100+3);
pop();
}

function mousePressed() {
saveCanvas("0000.png");
}

こうすれば画像保存できるのか、へーと思いながらマウスをクリックしましたがエラーが出て保存ができなかったので、Processing版に変更するのと、300dpiになるようにキャンバスサイズを変更して……とかやってたらだいぶ時間がかかりました。

void setup() {
size(2363, 3426);
colorMode(HSB,360,100,100,100); 
background(0,0,100);
}

void draw(){ 
pushMatrix();
translate(20,-190);
stroke(0,0,0);
fill(0,0,0);
ellipse(frameCount*9%567*4.5,frameCount*4.55,3*5.5,(random(5,45)%100+3)*5);
popMatrix();
}

これに void mousePressed(){
save("Silkscrean.png");
}
とつけるとコードが完成します(OpenProcessingの方には付けてません)
いろいろ変更やデザイン改良したりで今日は疲れました。