voorbeeld schets met twaalf tetromino "St" in p5.js. terug naar de inleiding
Toets "s" stopt de rotaties de overige toetsen starten de rotaties
vorm = []; let ruitjespap; let n; let y; let lijnau = false;
let kleurzh = false; let rond = false; let blend = false;
function setup() {
createCanvas(windowWidth, windowHeight);
buttonR = createButton('reset');
buttonR.position(20,30); buttonR.style('width','70px');
buttonR.mouseClicked(buttonRAction);
buttonV1 = createButton('verpl 1');
buttonV1.position(20,60); buttonV1.style('width','70px');
buttonV1.mouseClicked(buttonV1Action);
buttonV2 = createButton('verpl 2');
buttonV2.position(100,60); buttonV2.style('width','70px');
buttonV2.mouseClicked(buttonV2Action);
buttonV3 = createButton('verpl 3');
buttonV3.position(20, 90); buttonV3.style('width','70px');
buttonV3.mouseClicked(buttonV3Action);
buttonG = createButton('groter');
buttonG.position(20, 120); buttonG.style('width','70px');
buttonG.mouseClicked(buttonGAction);
buttonK = createButton('kleiner');
buttonK.position(100, 120); buttonK.style('width','70px');
buttonK.mouseClicked(buttonKAction);
buttonKZH =createButton('kleur hard/zacht');
buttonKZH.position(20,150); buttonKZH.style('width','140px');
buttonKZH.mouseClicked(buttonKZHAction);
buttonRAU = createButton('rond aan/uit');
buttonRAU.position(20,180); buttonRAU.style('width','100px')
buttonRAU.mouseClicked(buttonRAUAction);
buttonLAU= createButton('lijn aan/uit');
buttonLAU.position(20,210);buttonLAU.style('width','100px');
buttonLAU.mouseClicked(buttonLAUAction);
buttonBM = createButton('Blendmode');
buttonBM.position(20,240);buttonBM.style('width','100px');
buttonBM.mouseClicked(buttonBMAction);
buttonD = createButton('downloaden');
buttonD.position(20,270); buttonD.style('width','100px');
buttonD.mouseClicked(buttonDAction);
const x = width/2; y = height/2; n = height/12;
const sw = 2; const alfa = 100;
//argumenten van de constructor
//1) grootte, 2) links/rechts, 3) draaipunt, 4) x positie, 5) y positie,
//6) hoek 7) vormkleur, 8) lijndikte, 9) lijnkleur
// 1 2 3 4 5 6 7 8 9
vorm[0] = new St(n, 1, 6, x-3*n, y-2*n, 0,color(8,58,120,alfa),sw, color(0));
vorm[1] = new St(n, 0, 3, x+3*n, y-2*n, 0,color(8,58,120,alfa),sw, color(0));
vorm[2] = new St(n, 0, 8, x-3*n, y-2*n, 90,color(62,252,5,alfa),sw, color(0));
vorm[3] = new St(n, 1, 1, x+3*n, y-2*n,-90,color(62,252,5,alfa),sw, color(0));
vorm[4] = new St(n, 0, 8, x, y, 0,color(252,13,5,alfa),sw, color(0));
vorm[5] = new St(n, 1, 1, x, y, 0,color(252,13,5,alfa),sw, color(0));
vorm[6] = new St(n, 1, 5, x, y, 0,color(252,13,5,alfa),sw, color(0));
vorm[7] = new St(n, 0, 4, x, y, 0,color(252,13,5,alfa),sw, color(0));
vorm[8] = new St(n, 0, 7, x-3*n, y+2*n, 0,color(8,58,250,alfa),sw, color(0));
vorm[9] = new St(n, 1, 2, x+3*n, y+2*n, 0,color(8,58,250,alfa),sw, color(0));
vorm[10] = new St(n,1, 1, x-3*n, y+2*n, 90,color(62,252,5,alfa),sw, color(0));
vorm[11] = new St(n,0, 4, x+3*n, y+2*n, 90,color(62,252,5,alfa),sw, color(0));
}
function draw() {
if (blend) {blendMode(DIFFERENCE)}
else {blendMode(BLEND)};
clear();
background('rgba(255,255,255, 0)');
for (let i = 0; i< 12; i++){vorm[i].display();}
if (key == 's' || key == 'S') { }
else {
vorm[0].dpRotLi(vorm[0]); vorm[1].dpRotRe(vorm[1]);
vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
vorm[6].dpRotRe(vorm[6]); vorm[7].dpRotLi(vorm[7]);
vorm[8].dpRotRe(vorm[8]); vorm[9].dpRotLi(vorm[9]);
vorm[10].dpRotLi(vorm[10]); vorm[11].dpRotRe(vorm[11]);
}
}
function buttonRAction(){setup();} //reset
function buttonGAction() //groter
{ for (let i = 0; i < 12; i++) {vorm[i].n = 2*n;vorm[i].sw = n*1.6;}}
function buttonKAction() //kleiner
{ for (let i = 0; i < 12; i++) {vorm[i].n = n; vorm[i].sw = n*0.8;}}
function buttonV1Action() //verplaatsing 1
{ for (let i = 0; i < 6; i++) {vorm[i].y = y-n;}
for (let i = 6; i < 12; i++) {vorm[i].y = y+n;}}
function buttonV2Action()
{ for (let i = 0; i < 6; i++) {vorm[i].y = y;}
for (let i = 6; i < 12;i++) {vorm[i].y = y;}}
function buttonV3Action()
{ for (let i = 0; i < 4; i++) {vorm[i].y = y-2*n;}
for (let i = 4; i < 8; i++) {vorm[i].y = y;}
for (let i = 8; i < 12;i++) {vorm[i].y = y+2*n;}}
function buttonKZHAction() //lijnkleur zacht hard
{if (kleurzh) {for (let i = 0; i< 12; i++) {
vorm[i].c = color(random(0,200),random(0,255),random(0,255),100);
vorm[i].sc = color(random(0,200),random(0,255),random(0,255),100);
vorm[i].sw = n*0.8;}kleurzh = false}
else {for (let i = 0; i< 12; i++){
vorm[i].c = color(random(0,200),random(0,255),random(0,255),200);
vorm[i].sc = color(random(0,200),random(0,255),random(0,255),200);
vorm[i].sw = n*0.8;} kleurzh = true;}}
function buttonRAUAction(){if (rond) {strokeJoin(MITER); rond = false;}
else {strokeJoin(ROUND);rond = true};} //rondingen aan /uit
function buttonLAUAction() //lijn aan/uit
{if (lijnau) {for(let i = 0; i<12; i++){vorm[i].sw = 0;}lijnau = false;}
else {for(let i = 0; i<12; i++){vorm[i].sc=color(0);vorm[i].sw = height/500}lijnau = true}}
function buttonBMAction()
{if(blend){blend=false;} else {blend=true;}}
function buttonDAction() {save('twaalf_S.png');}