CODEWITHSUNDEEP
javascriptarraysnested-loopsshapesp5.js
Claire
Claire

Reputation: 135

Outputting an array of text values in the shape of a circle in p5.js

Ahoy! I am new to programming and working in p5.js. My conundrum is this: I'd like to create a digital clock, and output the numbers on the clock by using some for loops and an array for the clock values (text 1-12). I've figured out how to make a ticking image of a clock...but can't figure the rest out. When I run the below code, it doesn't throw any errors but the text/numbers on the clock aren't executing. I've tried putting the first for loop below within the setup function, and nothing changes. What am I doing wrong? I feel like I'm confused around the second for loop and how to actually print the numbers to the screen, like regarding: (text([i])). Please let me know if I need to clarify more - any help is appreciated! Trying to learn as much as I can. 

 //Simple second clock.
 // An exercise in translating from polar to cartesian coordinates

    var radius = 120.0;
    var angle = 0.0;
    var x=0, y=0;
    var digits = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

    function setup() {
      createCanvas(windowWidth,windowHeight);
    }

    function draw() {
    for (var i = 0; i < 12; i++) { //loop for digits. Populate array.
    digits[i] = text("[i]", 10, -radius+10);
    for (var i = 0; i < digits.length; i++) {
    fill(255,0,255)
    text([i]);
    }
    }   
      background(255);
      translate(width/2, height/2);
      stroke(205,205,55);
      fill(255,0,255);
      ellipse(0,0,10,10);
      noFill();
      ellipse(0,0,250,250);
      stroke(25);
      fill(205,205,55);
      //text("12", 0, -radius+PI+10); //if I were to manually do each number 
     // text("1", 30, -radius+PI+20);
     // text("2", 60, -radius+PI+30);
     // text("3", 90, -radius+PI+40);

      angle = (second() / 59.0) * TWO_PI;

      // memorize this formula, it's helpful
      x = cos(angle)* radius;
      y = sin(angle)* radius;

      stroke(255,0,255);

      //draw a line from the center of our screen and as long as our radius

      line(0,0,x,y);
      ellipse(x,y,10,10);
    }

Upvotes: 1

Views: 1346

Answers (2)

user2441635
user2441635

Reputation: 1

// ABC CLOCK
var radius = 120.0;
var angle = 0.0;
var x = 0,
  y = 0;
var digits = [];
var se = 0;
var nloops=0
var sentence="12 1 2 3 4 5 6 7 8 9 10 11"
//var sentence="A B C D E F G"
var nl = 0;
var letter1=''
var letter2=''

function setup() {
  createCanvas(windowWidth, windowHeight);
  digits = sentence.split(" ");
  letter1=digits[0]
  letter2=digits[0]
  nl = digits.length; //numberOfLetters
  textAlign(CENTER, CENTER);
  frameRate(1);
}

function draw() {
  background(9);
  textAlign(LEFT, CENTER);
  fill(255)
  text(letter1+'    '+letter2, 40,40)
  //text(nloops+'    '+se,40,60)
  translate(width / 2, height / 2);
  textAlign(CENTER, CENTER);
  cont = 0;
  mod = (2 * PI) / nl;
  ia = -HALF_PI; //init angle
  pr1= 0.9; //proportion radius letters
  pr2= 0.5; //proportion radius letters
  rl = radius * pr1; //radius letter
  for (var i = 0; i < nl; i++) {
    noFill();
    stroke(120);
    text(digits[i], rl * cos(cont + ia), rl * sin(cont + ia));
    cont += mod;
  }
  
  angle = (TWO_PI / nl) * se;
  angle2 = (TWO_PI / nl) * nloops;
  
  x = rl * cos(angle + ia);
  y = rl * sin(angle + ia);

  x1 = rl * cos(angle2 + ia);
  y1 = rl * sin(angle2 + ia);

  stroke(55);
  line(0, 0, x * pr1, y * pr1);
  
  stroke(255);
  line(0, 0, x1 * pr2, y1 * pr2);

  stroke(55);
  fill(0);
  ellipse(0, 0, 10, 10);
  noFill();
  ellipse(0, 0, 250, 250);

  se += 1;
  if(se%nl==0){
    nloops+=1
    if (nloops%nl==0){
      nloops=0
    }
    se=0
  }
  letter1=digits[nloops]
  letter2=digits[se]
  
}

A little more developed

Upvotes: 0

T. Silver
T. Silver

Reputation: 372

This is really a question about polar coordinates. Your x and y coordinates in the commented section are off. This is the idea:

var angleOffset = -1*PI/2;
for (var i=1; i<=12; i++) {
  angle = 2*PI*i/12 + angleOffset;
  text(i, radius*cos(angle), radius*sin(angle));
}

Edit: Full working code below

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

var radius = 120.0;
var angle = 0.0;
var x=0, y=0;
var digits = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

function setup() {
  createCanvas(windowWidth,windowHeight);
}

function draw() {
for (var i = 0; i < 12; i++) { //loop for digits. Populate array.
digits[i] = text("[i]", 10, -radius+10);
for (var i = 0; i < digits.length; i++) {
fill(255,0,255)
text([i]);
}
}   
  background(255);
  translate(width/2, height/2);
  stroke(205,205,55);
  fill(255,0,255);
  ellipse(0,0,10,10);
  noFill();
  ellipse(0,0,250,250);
  stroke(25);
  fill(205,205,55);

  var angleOffset = -1*PI/2;
  for (var i=1; i<=12; i++) {
    angle = 2*PI*i/12 + angleOffset;
    text(i, radius*cos(angle), radius*sin(angle));
  }


  angle = (second() / 59.0) * TWO_PI;

  // memorize this formula, it's helpful
  x = cos(angle)* radius;
  y = sin(angle)* radius;

  stroke(255,0,255);

  //draw a line from the center of our screen and as long as our radius

  line(0,0,x,y);
  ellipse(x,y,10,10);
}

setup();
draw();

</script>

Upvotes: 1

Related Questions