Question 277557 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – P5.js: Emoji not moving

Heyo
I‘m trying to make an emoji move around a circle. If i remove the „background()“ call, it will draw it all around the circle (like a path). If I leave the background function in, it just draws it once somewhere on the circles at random (the randomization is intended), but it won‘t move. What am I missing?

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);
      } 
    }
}

As described above.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently P5.js only actually „draws“ the objects once the drawn loop is completed, which only happens after my for-loop (with the j-counter) is fully done, hence only ever drawing the final iteration. If you remove the for-loop and initiate a counter outside of the draw function, it works:

    let rndnmbr;
let dataArr;
let ship1;
let ship2;
let cxy = 500;
let circlegaps = 250;
function setup() {
  angleMode(DEGREES)
  createCanvas(1000, 1000);
  background(color(128,244,255));
  noFill();
  ship1 = '⛴';
  ship2 = '⛵';
  // Daten hier eintragen, getrennt durch Komma:
  dataArr = [125,250,375,500]; 
  
  let colorArr = ['red','blue','green','yellow'];
  textSize(20);
  rndnmbr = [int(random(0,180)),int(random(0,180)),int(random(0,180)),int(random(0,180))];

  }

let j = 0;
function draw() {
      if(j>360){j=0;}
      j++;
      noFill();
    
      background(color(128,244,255));
      circle(cxy,cxy,circlegaps);
      circle(cxy,cxy,circlegaps*2);
      circle(cxy,cxy,circlegaps*3);
      circle(cxy,cxy,circlegaps*4);
      fill('black');
      
      for(let i=0;i<dataArr.length;i++){
       let rAng2 = j+rndnmbr[i];  
      let curship;
        if(i%2===0){
          curship=ship1;
        }else{
          curship=ship2;
        }
        print(rAng2);
        text(curship, (int(dataArr[i]*cos(rAng2)))+cxy,(int(dataArr[i]*sin(rAng2)))+cxy);
      } 
    
}

  2. 0

    The following code demonstrates how to rotate text around a circle. Perhaps this technique can be applied to your project.

    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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search