Dynamically Change a traingles size in p5.js Javascript Framework

Question

I have a project where I need to move my collectable item by editing the x_pos and y_pos properties of a created object.

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.

Any help is greatly appreciated. Please see below for code.

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

In general to change the size of individual objects in a drawing follow these steps

• call push to save the drawing state. This is important because we don't want to change the size of other parts of the drawing
• translate to the position where the object should be drawn
• scale to the new size
• translate again if we need to adjust the position of the object to account for the new size
• draw the object relative to 0,0
• pop to restore the drawing state so other parts of the drawing will not be impacted

Here is the interesting part of these principals applied to your 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

Here is you code snippet with the scaling code to resize the tree. Notice how you can change scaleFactor and change the size of the tree but everything else stays the same.

 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>