全体的な形状が失われていない状態で、mouseClicked関数を使用してランダムなサイズに描画する方法p5.js

Question

私は描画されたキャンバスを持っています。私の目標は、mouseClicked関数を使って描画を生成し、シェイプを失うことなくキャンバス上の任意のサイズ（mouseClicked関数を使用）で描画することです。形状は正確にスケールされ、正しいxとy座標に向かっているようです。ただし、図面が縮小されると、図形が広がり、図形が拡大されると、図形は互いに近づきます。どのようにして、x座標とy座標を基準にして全体的な形状が失われないように図面をスケールすることができますか？

function setup() { 
 
    createCanvas(800, 800); 
 
    background('red'); 
 
} 
 

 
function draw() {} 
 
    
 
    function drawMickey(mickeyX, mickeyY, mickeySize){ 
 
    \t 
 
    \t //ears 
 
    \t stroke('black'); 
 
\t strokeWeight(4); 
 
    \t fill('black'); 
 
\t ellipse(mickeyX, mickeyY, mickeySize, mickeySize); 
 
\t ellipse(mickeyX + 170, mickeyY, mickeySize, mickeySize); 
 
    
 
    \t 
 
    \t //head 
 
    \t stroke('black'); 
 
\t strokeWeight(4); 
 
    \t fill('black'); 
 
\t ellipse(mickeyX + 85, mickeyY + 90, mickeySize * 1.5, mickeySize * 1.5); 
 

 
    
 
    \t 
 
} 
 

 
function mouseClicked(){ 
 
    var mickeySize = random(0, width/5); 
 
    drawMickey(mouseX, mouseY, mickeySize) 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>

Answer 1

あなたはおそらく別の範囲から番号を再マッピングしmap()機能、になるはずです。サイズに応じて楕円を描画する距離を得るには、map(mickeySize, 0, width/5, 20, 85)を使用します。ここの関数の正しい使い方：https://p5js.org/reference/#/p5/map これが正しい軌道に乗ることを願っています。

Answer 2

このような質問のためにできることは、グラフ用紙を取り出していくつかの例を描くことです。下の円の中心がどこであり、上の円がそれと関係しているのかを考えてみましょう。

サークルのサイズを考慮して、上部サークルを下部サークルに対して配置したいと思うかもしれません。

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

function draw() { 

    var circleX = 600; 
    var circleY = 400; 
    var circleSize = 50; 

    ellipse(circleX, circleY, circleSize, circleSize); 
    ellipse(circleX - circleSize/2, circleY - circleSize/2, circleSize/2, circleSize/2); 
    ellipse(circleX + circleSize/2, circleY - circleSize/2, circleSize/2, circleSize/2); 
} 

私が言ったように、あなたができる最善のことは、あなたがパターンに気づくまでの例の束を引き出すです：

はここで小さな例です。それでも問題が解決しない場合は、MCVEを新しい質問の投稿に投稿してください。がんばろう。