确保数组中对象的 Y 高度是 p5.js 中图像大小的函数

Question

我有一个 json，其中包含有关一组对象（以及随附图像）的数据，包括它们的重量。我试图将这些对象的子集加载到数组中，然后按照对象的重量按比例显示对象的图像。我使用

objectRadius

变量来保持该比例。

这部分或多或少是有效的。但是，我无法根据对象的

objectRadius

设置对象的 Y 位置。最终我将堆叠它们，但现在我只想加载它们，以便每个图像的顶部与画布的顶部对齐。

我认为将 Y 位置设置为

objectRadius

应该可以做到这一点（或者，如果我完全误解了图像的定位方式，则图像的中心将与画布的顶部对齐 - 这对于现在）。

不幸的是，使用我当前的代码，图像加载的位置似乎是随机的 Y 位置。我可以将数字硬编码到

itemObject = new Block(width / 2, objectRadius, objectRadius, objectRadius, objectImage, parseFloat(objectWeight), objectDescription);

行，但任何对 Y 位置使用变量的尝试都会产生意外的行为。我很乐意针对我确信是我忽略的明显事情提出建议。

谢谢你！

//this is the variable for the state machine
let state = "title";
//this is the variable for the target weight
let targetWeight = 50;
//you subtract each object from the target weight to build the collection, but still need the original number to calculate the size of the object
let originalTargetWeight = targetWeight

//variable for the blocks
let blocks = [];

//this is the shaved down json to hold the objects that have been chosen to represent the weight
let objectHolder = [];


function preload(){
  metDataHolder = [
{
    
    "Object_ID": "453451",
    "Object_Name": "Coin",
    "weight_kg": "0.012927"
},
{
    "Object_ID": "444660",
    "Object_Name": "Turban ornament",
    "weight_kg": "0.048761"
},
{
    "Object_ID": "242191",
    "Object_Name": "Statue fragment",
    "weight_kg": "0.1"
},
{
    "Object_ID": "203797",
    "Object_Name": "Candlestand",
    "weight_kg": "6.8"
},
{
    "Object_Number": "2016.375",
    "Object_ID": "714900",
    "weight_kg": "12.1"
},
{
    "Object_ID": "23198",
    "Object_Name": "Armor",
    "weight_kg": "25.4"
}
  ]
}

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

}


function draw() {
  background(0);

  if (state == "title") {
    fill("#0f82af");
    textSize(80);
    textAlign(CENTER);
    text("Title", width / 2, height / 2);
  } else if (state == "animation") {

    //work through the blocks (assuming there is something in them)
    if (blocks.length > 0) {
      for (let i = 0; i < blocks.length; i++) {
        //and display them
        blocks[i].show();
        //move all of the other objects up
      }
    
    }



  } else {
    fill(0);
  }
}

function mousePressed() {
  // itemImage = loadImage('images/10025.jpg');
  // let itemObject = new Block(100, 100, 100, 100, itemImage);
  // blocks.push(itemObject);


  while (targetWeight > 1) {
    //pick an object at random
    randoPlace = Math.floor(Math.random() * Object.keys(metDataHolder).length);
    //if the weight of that item is below targetWeight
    if (metDataHolder[randoPlace].weight_kg <targetWeight) {
      //subtract the object's weight from the targetweight
      targetWeight = targetWeight - metDataHolder[randoPlace].weight_kg;
      //load the image on the fly
      imagePath = "images/" + metDataHolder[randoPlace].Object_ID + ".jpg";
      objectImage = loadImage(imagePath);
      //get the weight of the object
      objectWeight = metDataHolder[randoPlace].weight_kg;
      console.log("object weight = " + objectWeight);
      objectDescription = metDataHolder[randoPlace].Object_Name;
      //get the placement point
      //the object will take up a portion of that space in proportion to its weight
      objectRadius = (height * (objectWeight/originalTargetWeight));


      //add this object to objectHolder
      thisObject = {"description":objectDescription, "weight":targetWeight, "radius":objectRadius, "imagePath":objectImage};

      objectHolder.push(thisObject);


      //create a block and place it horizontally in the middle, height somewhere random
      //let itemObject = new Block(width / 2, getRndInteger(50, height - 50), objectRadius, objectRadius, objectImage, parseFloat(objectWeight), objectDescription);
      itemObject = new Block(width / 2, objectRadius, objectRadius, objectRadius, objectImage, parseFloat(objectWeight), objectDescription);
      // put the block in the blocks array (or whatever it is called)
      blocks.push(itemObject);
    }
  }

  //function to sort objects by weight (heavy first)
  function blockReorder( a, b ) {
    if ( a.weight < b.weight ){
      return 1;
    }
    if ( a.weight > b.weight ){
      return -1;
    }
    return 0;
  }
  blocks.sort( blockReorder );





  //console.log(objectHolder);
  console.log(blocks);
  state = "animation";


}

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min) ) + min;
}

class Block {
  //create the blocks
  constructor(x, y, w, h, img, weight, descr) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.img = img;
    this.weight = weight;
    this.descr = descr;

  }

  show() {
    //draws from the center of the image
    imageMode(CENTER);
    image(this.img, this.x, this.y, this.w, this.h);  
    //image(this.img, this.x, this.h, this.w, this.h);
    //console.log("(100*(this.weight/originalTargetWeight)) = " + (100*(this.weight/originalTargetWeight)))

  }

  moveDown() {
    this.y = this.y - 2;
  }

}

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

Answer 1

事实上，这是一件显而易见的事情。事实证明，我需要将 objectRadius 分成两半，以使图像保持在画布中间之外。

这一行：

itemObject = new Block(width / 2, objectRadius, objectRadius, objectRadius, objectImage, parseFloat(objectWeight), objectDescription);

变成：

itemObject = new Block(width / 2, objectRadius/2, objectRadius, objectRadius, objectImage, parseFloat(objectWeight), objectDescription);