p5.jsを使った簡単なペイントプログラム

Question

私はp5.jsを使って簡単なペイントプログラムを作成しています。これまで私はペイントパレットを作成し、キャンバスに描画することができました。私は、mouseIsPressedメソッドを使用してパレットの色を変更すると助けが必要です。色をクリックしてキャンバスに描きたいこれは私がこれまで持っていたものです。ここで

function setup(){ 
createCanvas(500,500); 
} 

function draw() { 
noStroke(); 
//red 
fill(255,0,0); 
rect(0,0,20,20); 
//orange 
fill(255,165,0); 
rect(0,20,20,20); 
//yellow 
fill(255,255,0); 
rect(0,40,20,20); 
//green 
fill(0,255,0); 
rect(0,60,20,20); 
//cyan 
fill(0,255,255); 
rect(0,80,20,20); 
//blue 
fill(0,0,255); 
rect(0,100,20,20); 
//magenta 
fill(255,0,255); 
rect(0,120,20,20); 
//brown 
fill(165,42,42); 
rect(0,140,20,20); 
//white 
fill(255); 
rect(0,160,20,20); 
//black 
fill(0); 
rect(0,180,20,20); 

if(mouseIsPressed){ 
    if(mouseIsPressed && mouseX == 0 && mouseY == 0){ 
    strokeWeight(10); 
    stroke(0); 
    line(pmouseX,pmouseY,mouseX,mouseY); 
    } 
} 
} 

Answer 1

屋に行く：そのない場合

var selected; 

function setup(){ 
createCanvas(500,500); 
} 

function draw() { 
noStroke(); 
//red 
fill(255,0,0); 
rect(0,0,20,20); 
//orange 
fill(255,165,0); 
rect(0,20,20,20); 
//yellow 
fill(255,255,0); 
rect(0,40,20,20); 
//green 
fill(0,255,0); 
rect(0,60,20,20); 
//cyan 
fill(0,255,255); 
rect(0,80,20,20); 
//blue 
fill(0,0,255); 
rect(0,100,20,20); 
//magenta 
fill(255,0,255); 
rect(0,120,20,20); 
//brown 
fill(165,42,42); 
rect(0,140,20,20); 
//white 
fill(255); 
rect(0,160,20,20); 
//black 
fill(0); 
rect(0,180,20,20); 
} 

function mousePressed(){ 
    if(collide(0, 0)){ 
    selected = "red"; 
    }else if(collide(0, 20)){ 
    selected = "orange"; 
    }else if(collide(0, 40)){ 
    selected = "yellow"; 
    }//and so on... 
} 

function collide (x, y) { 
//2d 
if (mouseX >= x &&   // right of the left edge AND 
    mouseX <= x + 20 && // left of the right edge AND 
    mouseY >= y &&   // below the top AND 
    mouseY <= y + 20) { // above the bottom 
     return true; 
} 
return false; 
}; 

衝突機能は、マウスが特定の矩形の上にあるときにtrueを返し、偽。そうすればif (collide(**x and y coordinates of rect**)) {}を使って何かを行うことができます。この場合、変数を定義します。これがあなたに役立つことを願って、素敵な一日を。

また、衝突関数は、四角形の左上隅xとyを取ります。

マウスの使用Pressressed https://p5js.org/reference/#/p5.Element/mousePressed