rechthoeken animatie met barcode markers. terug naar de inleiding ga naar de animatie in fullscreen
De barcode markers 5 , 7 en 18 zijn gecodeerd als p5.js classes. De markers staan op 3 plaatsen in de rechthoek animatie
De AR vormen zijn niet te zien zodra de markers door de rechthoeken worden bedekt. De rechthoeken worden na de markers getekend.
Onder de schets staan de classes Barcode5 , Barcode7 en Barcode18
De schets maakt ook gebruik van objecten van de class "Rechthoek" en methodes van de superclass "Vormen"
let bar1 , bar2, bar3;
let ruitjes;
let rechth = [];
let dpvb = 8, dpvo = 4; dprb = 8, dpro = 4;
function setup() {
createCanvas(windowWidth, windowHeight);
const x = width/2;
const y = height/2
const n = height/10;
bar1 = new Barcode5(n/5, x, y, 0);
bar2 = new Barcode7(n/5, x-4*n, y, 0);
bar3 = new Barcode18(n/5, x+4*n, y, 0);
ruitjes = new Ruitjes(n, x, y)
let sw = height/150;
rechth[0] = new Rechthoek(n*2,n*2, dpvb, x-6*n, y-n, 0,color(255, 102, 102,100),sw, color(0));
rechth[1] = new Rechthoek(n*2,n*2, dpvb, x-2*n, y-n, 0,color(51, 153, 255,100), sw, color(0));
rechth[2] = new Rechthoek(n*2,n*2, dpvb, x+2*n, y-n, 0,color(0,255,0,100), sw, color(0));
rechth[3] = new Rechthoek(n*2,n*2, dpvb, x+6*n, y-n, 0,color(255,255,0,100), sw, color(0));
rechth[4] = new Rechthoek(n*2,n*2, dpvo, x-6*n, y+n, 0,color(255,255,0,100), sw, color(0));
rechth[5] = new Rechthoek(n*2,n*2, dpvo, x-2*n, y+n, 0,color(0,255,0,100), sw, color(0));
rechth[6] = new Rechthoek(n*2,n*2, dpvo, x+2*n, y+n, 0,color(51, 153, 255,100), sw, color(0));
rechth[7] = new Rechthoek(n*2,n*2, dpvo, x+6*n, y+n, 0,color(255, 102, 102,100),sw, color(0));
rechth[8] = new Rechthoek(n*4,n, dprb, x-4*n, y-n, 0, color(204, 255, 51,100), sw, color(0));
rechth[9] = new Rechthoek(n*4,n, dprb, x+4*n, y-n, 0, color(51, 153, 255,100), sw, color(0));
rechth[10] = new Rechthoek(n*4,n,dpro, x-4*n, y+n, 0, color(51, 153, 255,100), sw, color(0));
rechth[11] = new Rechthoek(n*4,n,dpro, x+4*n, y+n, 0, color(204, 255, 51,100), sw, color(0));
}
function draw(){
background(230,251,255);
//ruitjes.display();
bar1.display();
bar2.display();
bar3.display();
for (let i = 0; i < 12; i +=1) {
rechth[i].display();
}
if (key == 's' || key == 'S') {
}
else {
rechth[0].dpRotLi(rechth[0]); rechth[1].dpRotRe(rechth[1]);
rechth[2].dpRotLi(rechth[2]); rechth[3].dpRotRe(rechth[3]);
rechth[4].dpRotRe(rechth[4]); rechth[5].dpRotLi(rechth[5]);
rechth[6].dpRotRe(rechth[6]); rechth[7].dpRotLi(rechth[7]);
rechth[8].dpRotRe(rechth[8]); rechth[9].dpRotLi(rechth[9]);
rechth[10].dpRotLi(rechth[10]); rechth[11].dpRotRe(rechth[11]);
}
}
function windowResize() {
resizeCanvas(windowWidth, windowHeight);
}
function keyPressed() {
if (key == 'd' || key == 'D'){
save('rechthoeken_animatie.png');
}
if (key == '1') {
dpvb = 8; dpvo = 4; dprb = 8; dpro = 4;
setup();
}
if (key == '2') {
dpvb = 4; dpvo = 8; dprb = 4; dpro = 8;
setup();
}
if (key == '3') {
dpvb = 2; dpvo = 6; dprb = 8; dpro = 4;
setup();
}
if (key == '4') {
dpvb = 6; dpvo = 6; dprb = 4; dpro = 8;
setup();
}
if (key == '5') {
setup();
}
if (key == '6') {
dpvb = 5; dpvo = 7; dprb = 8; dpro = 4;
setup();
}
}
Barcode5.js
class Barcode5 extends Vormen {
constructor(n, x, y, hoek) {
super(x,y,hoek);
this.n = n; this.x = x; this.y = y; this.hoek = hoek;
}
display() {
push();
translate(this.x, this.y);
rotate(radians(this.hoek));
beginShape();
//Vierkant
fill(0);
{vertex(-this.n*3, this.n*3); vertex(-this.n*3, -this.n*3); vertex(this.n*3, -this.n*3); vertex(this.n*3, this.n*3);}
endShape(CLOSE);
fill(255);
beginShape();
{vertex(-this.n/2, this.n/2); vertex(-this.n*1.5,this.n/2); vertex(-this.n*1.5, -this.n/2);
vertex(-this.n/2, -this.n/2); vertex(-this.n/2,-this.n*1.5);vertex(this.n*1.5, -this.n*1.5);
vertex(this.n*1.5, this.n*1.5);vertex(this.n/2,this.n*1.5); vertex(this.n/2, -this.n/2);
vertex(-this.n/2, -this.n/2);}
endShape(CLOSE);
pop();
}
}
barcode7.js
class Barcode7 extends Vormen {
constructor(n, x, y, hoek) {
super(x,y,hoek);
this.n = n; this.x = x; this.y = y; this.hoek = hoek;
}
display() {
push();
translate(this.x, this.y);
rotate(radians(this.hoek));
beginShape();
//Vierkant
fill(0);
{vertex(-this.n*3, this.n*3); vertex(-this.n*3, -this.n*3); vertex(this.n*3, -this.n*3); vertex(this.n*3, this.n*3);}
endShape(CLOSE);
fill(255);
beginShape();
{vertex(-this.n/2, this.n/2); vertex(-this.n*1.5,this.n/2); vertex(-this.n*1.5,-this.n/2);
vertex(-this.n/2,-this.n/2); vertex(-this.n/2,-this.n*1.5);vertex(this.n*1.5,-this.n*1.5);
vertex(this.n*1.5,-this.n/2); vertex(-this.n/2,-this.n/2); vertex(-this.n/2,this.n/2)
vertex(this.n/2, this.n*1.5); vertex(this.n/2, this.n/2); vertex(this.n*1.5,this.n/2);
vertex(this.n*1.5,this.n*1.5); vertex(this.n/2, this.n*1.5)}
endShape(CLOSE);
pop();
}
}
Barcode18.js
class Barcode18 extends Vormen {
constructor(n, x, y, hoek) {
super(x,y,hoek);
this.n = n; this.x = x; this.y = y; this.hoek = hoek;
}
display() {
push();
translate(this.x, this.y);
rotate(radians(this.hoek));
beginShape();
//Vierkant
fill(0);
{vertex(-this.n*3, this.n*3); vertex(-this.n*3, -this.n*3); vertex(this.n*3, -this.n*3); vertex(this.n*3, this.n*3);}
endShape(CLOSE);
fill(255);
beginShape();
{vertex(-this.n/2, this.n*1.5); vertex(-this.n/2,this.n/2); vertex(-this.n*1.5,this.n/2);
vertex(-this.n*1.5,-this.n/2); vertex(-this.n/2,-this.n/2); vertex(-this.n/2,-this.n*1.5);
vertex(this.n/2,-this.n*1.5); vertex(this.n/2, this.n/2); vertex(this.n*1.5,this.n/2)
vertex(this.n*1.5, this.n*1.5); vertex(-this.n/2, this.n*1.5);}
endShape(CLOSE);
pop();
}
}