P5.js：表情符号不动

Question

嘿哟 我正在尝试让表情符号绕圈移动。如果我删除“background()”调用，它将围绕圆绘制它（就像一条路径）。如果我保留背景函数，它只会在圆圈上的某个地方随机绘制一次（随机化是有意的），但它不会移动。我错过了什么？

let rndnmbr;
let dataArr;
let ship1;
let ship2;
let cxy = 500;
let circlegaps = 250;
function setup() {
  angleMode(DEGREES)
  createCanvas(1000, 1000);
  background(220);
  noFill();
  ship1 = '⛴';
  ship2 = '⛵';
  // Daten hier eintragen, getrennt durch Komma:
  dataArr = [125,250,375,500]; 
  
  let colorArr = ['red','blue','green','yellow'];
  
  rndnmbr = [int(random(0,180)),int(random(0,180)),int(random(0,180)),int(random(0,180))];
  /*
  for(let i=0;i<dataArr.length;i++){
    fill('black');
    let rAng1 = random(0,90);
    let rAng2 = 180;
    text(shlong, (int(dataArr[i]*cos(rAng2)))+500,(int(dataArr[i]*sin(rAng2)))+500);
    
    //circle((int(dataArr[i]*cos(rAng1)))+500,(int(dataArr[i]*sin(rAng1)))+500,10);
   */
  }


function draw() {
  
    for(let j=0;j<360;j++){
      noFill();
    
      background(230);
      circle(cxy,cxy,circlegaps);
      circle(cxy,cxy,circlegaps*2);
      circle(cxy,cxy,circlegaps*3);
      circle(cxy,cxy,circlegaps*4);

      for(let i=0;i<dataArr.length;i++){
      fill('black');
      let rAng2 = j+rndnmbr[i];  
      print(rAng2);
        text(ship1, (int(dataArr[i]*cos(rAng2)))+cxy,(int(dataArr[i]*sin(rAng2)))+cxy);
      } 
    }
}

如上所述。

Answer 1

以下代码演示了如何绕圆旋转文本。也许这项技术可以应用到您的项目中。

let angle = 0.0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  circle(width / 2, height / 2, 180);
  push();
  translate(width / 2, height / 2);
  rotate(radians(angle));
  text("X", 100, 0);
  pop();
  angle += 0.5;
  stroke(255, 0, 0);
  strokeWeight(4);
}