[英]Dynamically Change a traingles size in p5.js Javascript Framework
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.我有一个项目,我需要通过编辑创建的 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. 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;
}
In general to change the size of individual objects in a drawing follow these steps通常,要更改图形中单个对象的大小,请按照以下步骤操作
Here is the interesting part of these principals applied to your draw()
function这是应用于您的
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.请注意如何更改
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.