在 p5.js Javascript 框架中动态更改一个 traingles 大小

Question

我有一个项目，我需要通过编辑创建的 object 的 x_pos 和 y_pos 属性来移动我的收藏品。

I can get that to work fine, but the object is supposed to dynamically size as well based on a size property of the object and everything i have tried either makes the triangles go all over the place or will change the size but also move the position .

任何帮助是极大的赞赏。 请参阅下面的代码。

var floorPos_y;

var gameChar_x;
var gameChar_y;

var treePos_x;
var treePos_y;

var canyon;
var collectable;

var mountain;
var cloud;


function setup()
{
    createCanvas(1024, 576);
    floorPos_y = 432; //NB. we are now using a variable for the floor position

    //NB. We are now using the built in variables height and width
    gameChar_x = width/2;
    gameChar_y = floorPos_y;

    treePos_x = width/2;
    treePos_y = floorPos_y - 100;

    canyon = {
        x_pos: 300,
        width: 100
    }

    collectable = {
        x_pos: 100,
        y_pos: 100,
        size: 50
    }
}

function draw()
{
    background(100, 155, 255); //fill the sky blue

    noStroke();
    fill(0, 155, 0);
    rect(0, floorPos_y, height, width - floorPos_y); //draw some green ground

    //Tree
    fill(83,49,24);
    //rect(900,332,50,100);
    rect(treePos_x,treePos_y,50,100);
    fill(34,139,34);
    triangle(treePos_x - 50,treePos_y + 25,
             treePos_x + 100,treePos_y + 25,
             treePos_x + 25,treePos_y - 75);
    triangle(treePos_x - 50,treePos_y,
             treePos_x + 100,treePos_y,
             treePos_x + 25,treePos_y - 100);

    //Canyon
    fill(74,38,25);
    rect(canyon.x_pos + 50,432,100,144);
    fill(0,155,0);
    triangle(canyon.x_pos + 50,432,
             canyon.x_pos + 50,532,
             canyon.x_pos + 75,457);
    triangle(canyon.x_pos + 150,576,
             canyon.x_pos + 150,476,
             canyon.x_pos + 125,501);

    //Collectible Item
    fill(255,215,0);
    ellipse(collectable.x_pos + 210,
            collectable.y_pos + 317,
            15,15);
    fill(155,17,30);
    triangle(collectable.x_pos + 200,
             collectable.y_pos + 315,
             collectable.x_pos + 220,
             collectable.y_pos + 315,
             collectable.x_pos + 210,
             collectable.y_pos + 295);
    triangle(collectable.x_pos + 200,
             collectable.y_pos + 320,
             collectable.x_pos + 220,
             collectable.y_pos + 320,
             collectable.x_pos + 210,
             collectable.y_pos + 340);


    //character facing forward
    //Head
    fill(236, 188, 180);
    ellipse(gameChar_x, gameChar_y - 50, 30);

    //Hat
    fill(98, 74, 46);
    ellipse(gameChar_x, gameChar_y - 60, 40,10);
    rect(gameChar_x - 8.75, gameChar_y - 75, 17.5,15);

    //Body
    fill(72,61,139);
    rect(gameChar_x - 10, gameChar_y - 37, 20,30);

    //Feet
    fill(0);
    rect(gameChar_x - 12.5, gameChar_y - 10, 10, 10);
    rect(gameChar_x + 2.5, gameChar_y - 10, 10, 10);



}

function mousePressed()
{
    //Set position of character upon mouse click
    gameChar_x = mouseX;
    gameChar_y = mouseY;

}

Answer 1

通常，要更改图形中单个对象的大小，请按照以下步骤操作

• 调用push保存绘图 state。 这很重要，因为我们不想更改绘图其他部分的大小
• 转换为 position 应在其中绘制 object
• 缩放到新尺寸
• 如果我们需要调整 object 的 position 以适应新尺寸，请再次翻译
• 相对于 0,0 绘制 object
• pop恢复图纸 state 所以图纸的其他部分不会受到影响

这是应用于您的draw() function 的这些原理中有趣的部分

push()// save current drawing state
translate(treePos_x, treePos_y); // move to position of tree
var scaleFactor = 0.75; // scale down by a quarter
scale(scaleFactor);
// this translate is after scaling so it will adjust according to the new size
translate(25*scaleFactor*-1, 50*scaleFactor*-1);
//Tree
fill(83,49,24);
rect(0,0,50,100); // the object is drawn as if it is at 0,0
fill(34,139,34);
triangle(-50, 25,
         100, 25,
         25, -75);
triangle(-50,0,
         100,0,
         25,-100);
pop(); // restore

这是您使用缩放代码调整树大小的代码片段。 请注意如何更改scaleFactor并更改树的大小，但其他一切都保持不变。

 var floorPos_y; var gameChar_x; var gameChar_y; var treePos_x; var treePos_y; var canyon; var collectable; var mountain; var cloud; function setup() { createCanvas(1024, 576); floorPos_y = 432; gameChar_x = width/2; gameChar_y = floorPos_y; treePos_x = width/2 + 25; // add 25 to get to the middle of the tree treePos_y = floorPos_y - 50; canyon = { x_pos: 300, width: 100 } collectable = { x_pos: 100, y_pos: 100, size: 500 } } function draw() { background(100, 155, 255); //fill the sky blue noStroke(); fill(0, 155, 0); rect(0, floorPos_y, height, width - floorPos_y); push()// save current drawing state translate(treePos_x, treePos_y); // move to position of tree var scaleFactor = 0.75; // scale down by a quarter scale(scaleFactor); // this translate is after scaling so it will adjust according to the new size translate(25*scaleFactor*-1, 50*scaleFactor*-1); //Tree fill(83,49,24); rect(0,0,50,100); // the object is drawn as if it is at 0,0 fill(34,139,34); triangle(-50, 25, 100, 25, 25, -75); triangle(-50,0, 100,0, 25,-100); pop(); // restore //Canyon fill(74,38,25); rect(canyon.x_pos + 50,432,100,144); fill(0,155,0); triangle(canyon.x_pos + 50,432, canyon.x_pos + 50,532, canyon.x_pos + 75,457); triangle(canyon.x_pos + 150,576, canyon.x_pos + 150,476, canyon.x_pos + 125,501); //Collectible Item fill(255,215,0); ellipse(collectable.x_pos + 210, collectable.y_pos + 317, 15,15); fill(155,17,30); triangle(collectable.x_pos + 200, collectable.y_pos + 315, collectable.x_pos + 220, collectable.y_pos + 315, collectable.x_pos + 210, collectable.y_pos + 295); triangle(collectable.x_pos + 200, collectable.y_pos + 320, collectable.x_pos + 220, collectable.y_pos + 320, collectable.x_pos + 210, collectable.y_pos + 340); //character facing forward //Head fill(236, 188, 180); ellipse(gameChar_x, gameChar_y - 50, 30); //Hat fill(98, 74, 46); ellipse(gameChar_x, gameChar_y - 60, 40,10); rect(gameChar_x - 8.75, gameChar_y - 75, 17.5,15); //Body fill(72,61,139); rect(gameChar_x - 10, gameChar_y - 37, 20,30); //Feet fill(0); rect(gameChar_x - 12.5, gameChar_y - 10, 10, 10); rect(gameChar_x + 2.5, gameChar_y - 10, 10, 10); } function mousePressed() { //Set position of character upon mouse click gameChar_x = mouseX; gameChar_y = mouseY; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>