p5.js

//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

b2.jsとbox2d-html5.jsの読み込み

●物理空間の生成
b2newWorld(30, createVector(0, 9.8));
●物体の生成
b2Body(type, isDynamic, xy, wh, density密度, friction摩擦, restitutionはね返り係数, angle);

type ='box' 'circle' 'polygon' 'edge'
density = 10.0; // 材質の密度（重さ）
friction = .5; // 摩擦係数 0(摩擦なし)から1(摩擦MAX)
restitution = .8; // はね返り係数
//＿＿＿＿＿＿＿＿＿＿＿＿＿＿
function setup() {
createCanvas(300, 300);
b2newWorld(30, createVector(0, 9.8));
new b2Body('box',false,createVector(width/2,height-2), createVector(width,30));
new b2Body('circle',true,createVector(width/2, 20),createVector(40,40), 1, 0.5, 0.9);
}
function draw() {
background(227);
b2Update();
b2Draw(true);
}

preview

//////////////////////////
p5.js ellipseを指定する

var a, b;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
b2newWorld(30, createVector(0, 9.8));
a=new b2Body('box',false,createVector(width/2,height-5), createVector(width,10));
a.display(attr1);
b=new b2Body('circle',true,createVector(width/2,30), createVector(60,60), 1, 0.5, 0.9);
b.display(attr2);
}

function draw() {
background(227);
b2Update();
b2Draw(false); //trueではなくfalse
}
function attr1(body, fixture, position) {
fill(255,0,0);
noStroke();
b2Display(body, fixture, position);
}

function attr2(body, fixture, position) {
fill(0,0,255);
noStroke();
ellipse(position.x,position.y,body.wh(0).x,body.wh(0).y);
}

preview

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

//box2d test

var b, c, d;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
b2newWorld(30, createVector(0, 9.8));
d=new b2Body('box',false,createVector(140,height-130), createVector(width-93, 20));
d.display(attr, 0);
new b2Body('box',false,createVector(width*0.9,height-220), createVector(width-50, 20),0,0,0,(Math.PI/180 *-9));
new b2Body('edge', false, v(width /2, height-2),
[v(-width/2, 0), v(width/2,0)]);
new b2Body('edge', false, v(0,0),
[v(width, 0), v(0,0)]);
new b2Body('edge', false, v(0,0),
[v(height, 0), v(height,width)]);
new b2Body('edge', false, v(0,0),
[v(0, height), v(0,0)]);
b = new b2Body('circle', true, v(width / 3,20), v(39,39),1, 0.1, 0.96);
b.color = color(255,150,0);
b.display(drawer);
c=new b2Body('circle',true, createVector(width/2.9,40), createVector(39,39), 1, 0.5, 0.9);
c.display(foo);
}

function draw() {
background(227);
b2Update();
b2Draw(false);
}
// stroke(0, 255, 0);
// strokeWeight(5);
var foo = function (body, fixture, pos) {
fill(255, 0, 0);
noStroke();
b2Display(body, fixture, pos);
}
function drawer(body, shape, position) {
fill(body.color);
noStroke();
ellipse(position.x, position.y, 40, 40);
}
function attr(body, fixture, position) {
fill(0,0,255);
noStroke();
rect(position.x,position.y,body.wh(0).x,body.wh(0).y, 10);
}
function v(x, y) {
return createVector(x, y);
}

preview

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