//setCollider
//setCollider ("circle",offsetX,offsetY,radius)
//setCollider ("rectangle",offsetX,offsetY,width,height)
// Either "rectangle" or "circle"
//"circle"場合は半径
//"rectangle"場合は長方形の幅
///////////////////////
var gr;
var boxes;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
gr = new Group();
for(var i=0; i<8; i++) {
var circle=createSprite(random(0,width),
random(0,height),60, 60);
circle.draw = function() {
fill(237,205,0);
ellipse(0,0, 60, 60);
}
circle.setCollider("circle", 0,0,30);
circle.setSpeed(random(2,5), random(0, 360));
circle.scale = 0.5;
circle.mass = circle.scale;
gr.add(circle);
}
boxes = new Group();
for(var i=0; i<4; i++) {
var box = createSprite(random(0,width-50),random(0,height-50));
box.addAnimation("normal", "img/b1.png", "img/b3.png");
box.scale = 0.4;
box.immovable = true;
if(i%2==0)
box.rotation = 90;
boxes.add(box);
}
}
function draw() {
background(240,240,235);
gr.bounce(gr);
gr.bounce(boxes);
for(var i=0; i<allSprites.length; i++) {
var s = allSprites[i];
if(s.position.x<0+15) {
// s.position.x = 1;
s.velocity.x = abs(s.velocity.x);
}
if(s.position.x>width-15) {
// s.position.x = width-1;
s.velocity.x = -abs(s.velocity.x);
}
if(s.position.y<0+15) {
// s.position.y = 1;
s.velocity.y = abs(s.velocity.y);
}
if(s.position.y>height-15) {
// s.position.y = height-1;
s.velocity.y = -abs(s.velocity.y);
}
}
drawSprites();
}
preview
Pacman Test
//arc is used in p5-play
//sp.mirrorX(1);
var sp;
var h = 50;
var w = 50;
var r1 = 0;
var d = 0;
function setup() {
createCanvas(300,300);
sp = createSprite(25, 150, 50, 50);
sp.draw = function(){
fill(255,255,0);
arc(0,0+d,w,h,QUARTER_PI-r1,PI+HALF_PI+QUARTER_PI+r1);
if(QUARTER_PI-r1<=0){
r1=0;
}
fill(0);
noStroke();
ellipse(9, -13, 7, 7);
r1=r1+0.03;
}
sp.velocity.x = 2;
}
function draw() {
background(180,180,180);
// 左の壁にぶつかったら
if(sp.position.x <= w/2){
sp.velocity.x = 2;
sp.mirrorX(1);
// sp.rotation = -180;
}
// 右の壁にぶつかったら
if(sp.position.x >= width-w/2){
sp.velocity.x = -2;
sp.mirrorX(-1);
}
drawSprites();
}
preview
////////////////////////////
//sprotation = 90;
var sp;
var h = 50;
var w = 50;
var r1=0;
var d=0;
function setup() {
createCanvas(300,300);
sp = createSprite(25, 275, 50, 50);
sp.draw = function(){
fill(255,255,0);
arc(0,0+d,w,h,QUARTER_PI-r1, PI+HALF_PI+QUARTER_PI+r1);
if(QUARTER_PI-r1<=0){
r1=0;
}
fill(0); noStroke();
ellipse(9, -15, 7, 7);
r1=r1+0.03;
}
sp.velocity.x = 2;
}
function draw() {
background(180,180,180);
if(sp.position.x >= width-w/2){
sp.velocity.x = 0;
sp.velocity.y = -2;
sp.rotation = 270;
}
if(sp.position.y <= h/2){
sp.velocity.y = 0;
sp.velocity.x = -2;
sp.rotation = 180;
}
if(sp.position.x <= w/2){
sp.velocity.x = 0;
sp.velocity.y = 2;
sp.rotation = 90;
}
if(sp.position.y>= height-h/2&&sp.position.x <= w/2){
sp.velocity.y = 0;
sp.velocity.x = 2;
sp.rotation = 0;
}
drawSprites();
}
preview
/////////////////////////
arc
//arc(x, y, width, height, start, stop, PIE or OPEN or CHORD)
//arc( X座標, Y座標, 幅, 高さ, 開始角, 終了角, option )
//arc(50, 50, 80, 80, 0, PI+QUARTER_PI, PIE);
//ラジアンをそのままの数値で指定
//arc(125, 175, 100, 100, 0.79, 5.50);
//ラジアンを定数で指定
//arc(375, 175, 100, 100, QUARTER_PI, TWO_PI-QUARTER_PI);
//ラジアンを関数で指定
//arc(625, 175, 100, 100, radians(45), radians(315));
prototype
javascriptのclassとprototype
p5.js
//class
var ball1;
var ball2;
var gravity = 0.3;
function setup() {
createCanvas(300, 300);
ball1 = new Ball(100,20,20);
ball2 = new Ball(200,40,40);
}
function draw() {
background(220);
ball1.display();
ball2.display();
ball1.update();
ball2.update();
}
function Ball(tempX, tempY, tempW) {
this.x = tempX;
this.y = tempY;
this.w = tempW;
this.speed = 0;
this.display = function() {
fill(100);
// stroke(0);
noStroke();
ellipse(this.x,this.y,this.w,this.w);
}
this.update = function() {
this.y = this.y + this.speed;
this.speed = this.speed + gravity;
if (this.y > height) {
this.speed = this.speed * -0.91;
}
}
}
preview
///////////////////////////////////////
//prototype1
//prototypeを使うと関数は無駄に生成されていません
var ball1;
var ball2;
var gravity = 0.3;
function setup() {
createCanvas(300, 300);
ball1 = new Ball(100,10,20);
ball2 = new Ball(200,30,40);
}
function draw() {
background(220);
ball1.display();
ball2.display();
ball1.update();
ball2.update();
}
function Ball(tempX, tempY, tempW) {
this.x = tempX;
this.y = tempY;
this.w = tempW;
this.speed = 0;
}
Ball.prototype.display = function(){
fill(100);
noStroke();
ellipse(this.x,this.y,this.w,this.w);
}
Ball.prototype.update = function(){
this.y = this.y + this.speed;
this.speed = this.speed + gravity;
if (this.y > height) {
this.speed = this.speed * -0.91;
}
}
preview
///////////////////////////////
prototype2
var ball1;
var ball2;
var gravity = 0.3;
function setup() {
var myCanvas = createCanvas(300, 300);
ball1 = new Ball(100,10,20);
ball2 = new Ball(200,30,40);
}
function draw() {
background(220);
ball1.display();
ball2.display();
ball1.update();
ball2.update();
}
function Ball(tempX, tempY, tempW) {
this.center = {
x: tempX,
y: tempY,
w: tempW
};
this.speed = 0;
}
Ball.prototype.display = function(){
fill(100);
noStroke();
ellipse(this.center.x,this.center.y,this.center.w,this.center.w);
}
Ball.prototype.update = function(){
this.center.y = this.center.y + this.speed;
this.speed = this.speed + gravity;
if (this.center.y > height) {
this.speed = this.speed * -0.91;
}
}
preview
/////////////////////////////////
javascript prototype 継承 テスト1
// Person クラスの定義
function Person() {}
Person.prototype.walk = function() {
alert('I am walking!');
};
Person.prototype.sayHello = function() {
alert('hello');
};
// Student クラスの定義
function Student() {
// 親クラスのコンストラクタを呼び出す
Person.call(this);
}
// Person のメソッドを継承する
Student.prototype = Object.create(Person.prototype);
// Person を指しているコンストラクタのポインタを修正する
Student.prototype.constructor = Student;
// sayHello メソッドをオーバーライドする
Student.prototype.sayHello = function() {
alert('hi, I am a student');
};
// sayGoodBye メソッドを追加する
Student.prototype.sayGoodBye = function() {
alert('goodBye');
};
var student1 = new Student();
student1.sayHello(); //hi, I am a student
student1.walk(); //I am walking!
student1.sayGoodBye(); //goodBye
preview
///////////////////////////////////
javascript prototype 継承 テスト2
// Person クラスの定義
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.walk = function() {
alert('I am walking!'+' '+ this.name);
};
Person.prototype.sayHello = function() {
alert('hello'+ ' '+this.age);
};
// Student クラスの定義
function Student(name, age, jobTitle) {
this.jobTitle = jobTitle;
this.uber = Person.prototype; // Personのプロトタイプを保存
// 親クラスのコンストラクタを呼び出す
Person.call(this, name, age);
}
// Person のメソッドを継承する
Student.prototype = Object.create(Person.prototype);
// Person を指しているコンストラクタのポインタを修正する
Student.prototype.constructor = Student;
// sayHello メソッドをオーバーライドする
Student.prototype.sayHello = function() {
this.uber.sayHello.call(this); //そのまま呼び出す
// alert('hi, I am a student'+ this.age + this.age);
};
// sayGoodBye メソッドを追加する
Student.prototype.sayGoodBye = function() {
alert('goodBye'+' ' +this.jobTitle);
};
var student1 = new Student('tama',20,'qa');
student1.sayHello(); //hello 20
student1.walk(); //I am walking! tama
student1.sayGoodBye(); //goodBye qa
preview
DrawImage
//DrawImage loadImage
var img;
var s;
function preload() {
img=loadImage("img/kaeru.png"); //画像を読み込む
}
function setup() {
createCanvas(300, 300);
s = createSprite(width/2, height/2); //スプライトの位置
s.addImage(img); //スプライトに画像を加える
}
function draw() {
background(220);
if (s.scale ==1){
s.scale = .5;
}
drawSprites();
}
preview
///////////////////////////
//DrawImage loadAnimation
var maru;
function preload(){
maru=loadAnimation("img/1.png", "img/10.png");
}
function setup() {
createCanvas(300, 300);
}
function draw() {
background(230,230,230);
animation(maru, width/2, height/2);
}
preview
//////////////////////////////
//DrawImage loadSpriteSheet
var explode_ss;
var explode_s;
var explode_a;
function preload() {
explode_ss=loadSpriteSheet(
'img/sheet3.png', 100, 100, 5);
explode_a=loadAnimation(explode_ss);
}
function setup() {
createCanvas(300, 300);
explode_s=createSprite(width/2, height/2, 100, 100);
explode_s.addAnimation('sheet3', explode_a);
}
function draw() {
clear();
background(210);
drawSprites();
}
preview
/////////////////////////////////
//DrawImage loadSpriteSheet loadJSON
var tile_sprite;
var tile_frames;
function preload() {
tile_frames=loadJSON('img/sheet.json');
tile_sprite=loadSpriteSheet(
'img/sheet.png', tile_frames);
}
function setup() {
createCanvas(300, 300);
}
function draw() {
clear();
background(200);
tile_sprite.drawFrame('a.png', 0, 0);
tile_sprite.drawFrame('d.png', 100, 100);
for (var x = 0; x < 300; x += 100) {
tile_sprite.drawFrame('c.png', x, 200);
}
drawSprites();
}
preview
////////////////////////////////////
//DrawImage loadSpriteSheet frames
var sprite_sheet;
function preload() {
frames=[{
"name": "a.png",
"frame": {
"x": "0",
"y": "0",
"width": "100",
"height": "100"
}
}];
sprite_sheet=loadSpriteSheet(
'img/sheet.png', frames);
}
function setup() {
createCanvas(300, 300);
noStroke();
}
function draw() {
clear();
background(200);
sprite_sheet.drawFrame('a.png', 0, 0);
drawSprites();
}
preview
///////////////////////////
js reference
ball.bounce(blockGroup,function(ball, block) {
block.remove();
sound.play();
num += 1;
});
ball.bounce(bricks, brickHit);
function brickHit(ball, block) {
sound.play();
block.remove();
}
//////////////////
// Button
function setup() {
var button = createButton("押して");
button.mousePressed(clicked);
}
function clicked() {
text("押された !", 10, 50);
}
button.mousePressed(function(){
text("押された !", 10, 50);});
/////////////////////////
sprite.onMousePressed = clicked;
function clicked(s) {
s.remove(); //スプライトを消す
}
sprite.onMousePressed=function(){this.remove();}
////////////////////////////
通常の関数定義
function hoge(){...}
定義した関数を変数に代入
var hoge = function hoge(){...};
定義した関数を変数に代入 + 関数名を省略
var hoge = function (){...};
即時関数
関数定義と呼び出しのセット
(function unitopi(){ console.log('こちらのサイト');})();
関数定義と呼び出しのセット + 関数名省略
(function (){console.log('こちらのサイト');})();
(function (obj, prop){...})('pencil', 'green');
//////////////////////////
function speak(){ alert("hello"); }
speak(); // "hello"と出力
var speak = function (){ alert("hello"); }
speak(); // "hello"と出力
この式の右辺、function( ){...}の部分を無名関数といいます。
( function(){ alert("hello"); } )(); // "hello"と出力
このように、無名関数を定義してすぐさま実行したいときは
( function( ){..} )( );