전체 모양을 잃어 버리는 드로잉없이 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을 게시하십시오. 행운을 빕니다.