lundi 21 mars 2016

How to Replace Text Output from For Loop with Different Values in p5.js

New to coding and working in p5.js here...the struggle is real. I've created a digital clock, and used an array and for loops to output the time values of the clock around it's periphery (1-12). I've also made the clock tick. I've also set it so that when the ticker passes a certain value, text next to the ticker changes from "human!" to "wear wolf!" (weird project, I know.). Each time the ticker passes the pre-set value, I've also set the code to change the time values on the clock from 1-12 to say "HOWL" instead. However, I can still see the 1-12 time value numbers behind the word "HOWL" and can't figure out how to remove them.

How do I do this? Thanks for any advice! Code is below:

//var line = line(0,0,x,y);
var radius = 110.0;
var angle = 0.0;
var x=0, y=0;

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

function draw() {

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


  var angleOffset = -1*PI/2; //create variable//
  for (var i=1; i<=12; i++) { //generate 12 numbers//
   angle = 2*PI*i/12 + angleOffset; //what is this? another variable? //
   text(i, radius*cos(angle), radius*sin(angle));
  }
  //text outputs the i generated in for loop, then x and y coordinates times the angle set//
  if (x < TWO_PI/2) { 

  //fill(10,10,124);
  fill(10,105,55);
  text("WEARWOLF", x+10, y+15);

  var angleOffset = -1*PI/2; //create variable//
  for (var i=1; i<=12; i++) { //generate 12 numbers//
   angle = 2*PI*i/12 + angleOffset; //what is this? another variable? //
   text("HOWL", radius*cos(angle), radius*sin(angle))
   noFill();
   text(i, radius*cos(angle), radius*sin(angle))

  }
   } else {
  noFill();
  text("HUMAN!", x+10, y+5);
  //ellipse(0,0,250,250)


 }



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

Aucun commentaire:

Enregistrer un commentaire