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