time

//millis()を使う1

var resetAt;
var number;
function setup(){
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
noStroke();
smooth();
reset();
}

function reset(){
resetAt = millis() + 3000;
}

function draw(){
background(230);
fill(50);
textSize(12);
var timeLeft = resetAt - millis();
number = Math.round(timeLeft ) ;
text(number, 5, 15);
if(number <= 0){
textAlign(CENTER);
fill(0);
textSize(33);
text("Game over", width/2, height/2);
fill(230);
rect(1,2,60,20);
noLoop();
}
}

preview

/////////////////////////////

//millis()を使う2

var hd;
var m;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
}
function draw() {
background(240);
hello();
drawSprites();
}

function hello(){
textAlign(CENTER);
fill(200);
if(m > 4*1000 ){ //もし、counterが4秒を超えたら、
fill(240);
}
textSize(20);
text("4秒後に下の文字が消える", width/2, height/2);
m = millis();

fill(0);
noStroke();
textAlign(CENTER);
if(m > 4*1000 ){ //もし、counterが4秒を超えたら、
fill(240);
}
else{ //それまでは、
fill(0);
}
textSize(13);
hd = "When hitting a red mother ship within time,\n it's your win.";
text(hd, width/2, 225);

if(m > 4*1000 ){ //もし、counterが4秒を超えたら、
textAlign(CENTER);
fill(200);
textSize(16);
text("消えました", width/2, height/2);
}
}

preview

////////////////////////////

//millis()を使う3

var time1 = 2000;
var time2 = 5000;
var x = 35;

function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
}

function draw() {
var currentTime = millis();
background(230);
if (currentTime > time2) {
x -= 1;
if (x <= 35) { x = 35; }
} else if (currentTime > time1) {
x += 2;
}
var c = color('hsla(160, 100%, 50%, 0.8)');
fill(c);
stroke(0, 0, 255);
strokeWeight(10);
ellipse(x, height/2-15, 70, 70);
}

preview

////////////////////////////

//millis()を使う4

var m;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
noStroke();
smooth();
}
//プログラムが終了するまで、draw()の中は繰り返される
function draw() {
background(235);

m = millis();
m = m%(9*1000);
//mは9000で割った余りなので、常に0~8999の間の値を繰り返す。
if(m <= 2*1000){ fill(0, 255, 0); }
else if(m > 2*1000 && m <= 4*1000){
fill(255, 0, 0); //赤にする }
else if(m > 4*1000 && m <= 6*1000){
fill(255, 255, 0); }else if(m > 6*1000 && m <= 9*1000){
fill(0, 0,255);
}
ellipse(width/2, height/2, 200, 200);
}

preview

////////////////////////////

//millis()を使う5

var time;
var wait = 1500;
var tick = false;
function setup(){
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
time = millis();
smooth();
}
function draw(){
background(230);
if(millis() - time >= wait){
tick = !tick;
time = millis();
}
fill(255, 0, 0);
noStroke();
ellipse(150, tick?100:200, 90, 90);
}

preview