// ********************** // // Created by Pedro H.J // Chessboard 3D // Framework: P5 // Version: 0.2 // // Fixed // Fixed array names // Array to create a listbox (names) // Tested relative move // Change frameRate to 10 (faster moves) // testing frameRate(60) but new variable to speed // Create objects // ********************* // disable console console.log=()=>{}; console.error=()=>{}; console.warn=()=>{}; var pieces=["Pawn1","Pawn2","Pawn3","Pawn4","Pawn5","Pawn6","Pawn7","Pawn8","Horse1","Horse2", "Tower1","Tower2","Bishop","Bishop2","King","Queen"]; var board = [[],[],[],[],[],[],[],[]]; // to chessboard var len,tempX,tempY; // len = size of square, tempX or tempY (temporary position) var speed = 0.15; // New variable to speed moves (added version0.2) var grey=[]; var reds=[]; var txtboxValue=[]; var selectPiece,tempPiece; function setup() { createCanvas(windowWidth,windowHeight,WEBGL); textSize(15); // Size font frameRate(10); // 10 frames per second (tested) len=windowWidth/20; // housePiece (size of chessboard piece) // = spaces label1 = createElement('h4'," CHESSBOARD 3D PEDRO H.J 0.2").position(0,0).style("color","red"); // create sliders to rotate X,Z translationX,Y,Z rxSlider = createSlider(0, 4*PI, 1,0.001); rxSlider.position(20, 80); createElement('h5',"RotateX").position(20, 80); rzSlider = createSlider(0, 4*PI,0.6,0.001); rzSlider.position(20, 120); createElement('h5',"RotateZ").position(20, 120); pxSlider = createSlider(-10*len, 10*len, -1*len,0.01); pxSlider.position(20, 160); createElement('h5',"PosX").position(20, 160); pySlider = createSlider(-10*len, 10*len, -5*len,0.01); pySlider.position(20, 200); createElement('h5',"PosY").position(20, 200); pzSlider = createSlider(-20*len, 20*len, 0,0.01); pzSlider.position(20, 240); createElement('h5',"PosZ").position(20, 240); velSlider = createSlider(0, 20, 2,2); velSlider.position(20, 280); createElement('h5',"Speed move").position(20, 280); // Input to move input1 = createInput(); input1.position(100, 50); input1.style('width', '60px'); input1.value("2,0"); // Button to submmit move button = createButton('Move'); button.position(180,50); button.mousePressed(submmit); // Radio grey or red piece radio = createRadio(); radio.option('grey',0); radio.option('red',1); radio.style('width', '60px'); radio._getInputChildrenArray()[0].checked = true; radio.position(250,40); // Select is a listbox of pieces sel = createSelect(); sel.position(10, 50); // Create input listbox for(let i=0;i<16;i++) sel.option(pieces[i],i); //sel.changed(mySelectEvent); // Build chessboard createBoard(); // Just a test for(let i=0;i<8;i++) grey[i]=new Pawn(len,i*len,3*len/5,"gray"); grey[8]=new Horse(0,len,3*len/5,"gray"); grey[9]=new Horse(0,6*len,3*len/5,"gray"); grey[10]=new Tower(0,0,3*len/5,"gray"); grey[11]=new Tower(0,7*len,3*len/5,"gray"); grey[12]=new Bishop(0,2*len,3*len/5,"gray"); grey[13]=new Bishop(0,5*len,3*len/5,"gray"); grey[14]=new King(0,4*len,3*len/5,"gray"); grey[15]=new Queen(0,3*len,3*len/5,"gray"); for(let i=0;i<8;i++) reds[i]=new Pawn(6*len,i*len,3*len/5,"red"); reds[8]=new Horse(7*len,len,3*len/5,"red"); reds[9]=new Horse(7*len,6*len,3*len/5,"red"); reds[10]=new Tower(7*len,0,3*len/5,"red"); reds[11]=new Tower(7*len,7*len,3*len/5,"red"); reds[12]=new Bishop(7*len,2*len,3*len/5,"red"); reds[13]=new Bishop(7*len,5*len,3*len/5,"red"); reds[14]=new King(7*len,3*len,3*len/5,"red"); reds[15]=new Queen(7*len,4*len,3*len/5,"red"); // First piece of listbox selectPiece = grey[1]; alert("WELCOME. 1º Select a piece, 2º select radio [grey or red] pieces, 3º type the increment to position [X,Y]. To improve the view of the board, use sliders. Good game. Pedro H.J"); } function draw() { background(230);// background color translate(pxSlider.value(),pySlider.value(),pzSlider.value()); rotateX(rxSlider.value()); rotateZ(rzSlider.value()); showBoard(); for(let i=0;i<=15;i++) grey[i].show(); for(let i=0;i<=15;i++) reds[i].show(); } // Portuguese casas do tabuleiro (house's piece) function housePiece(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.show = function(){ push(); fill(this.color); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); box(len,len,len/5); pop(); } } // Portuguese Peão (Pwan piece) function Pawn(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.select=0; this.move = function(nx,ny){ if(this.xnx) this.x-=speed; if(this.yny) this.y-=speed; this.show(); } this.show = function(){ push(); if(!this.select) fill(this.color); else fill("blue"); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); box(len/5,len/5,len); translate(0,0,len/3); sphere(len/3.5,10); pop(); } } // Portuguese Torre (Horse piece) function Tower(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.select=0; this.move = function(nx,ny){ if(this.xnx) this.x-=speed; if(this.yny) this.y-=speed; this.show(); } this.show = function(){ push(); if(!this.select) fill(this.color); else fill("blue"); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); rotateX(PI/2); cylinder(len/3,len); pop(); } } // Portuguese Rei (King piece) function King(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.select=0; this.move = function(nx,ny){ if(this.xnx) this.x-=speed; if(this.yny) this.y-=speed; this.show(); } this.show = function(){ push(); if(!this.select) fill(this.color); else fill("blue"); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); rotateX(PI/2); cylinder(len/3,len); translate(0,len/2,0); box(len/4,len/4,len/4); pop(); } } // Portuguese Rainha (Queen piece) function Queen(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.select=0; this.move = function(nx,ny){ if(this.xnx) this.x-=speed; if(this.yny) this.y-=speed; this.show(); } this.show = function(){ push(); if(!this.select) fill(this.color); else fill("blue"); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); rotateX(PI/2); cylinder(len/3,len); translate(0,len/2,0); sphere(len/4); pop(); } } // Portuguese Bispo (Bishop piece) function Bishop(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.select=0; this.move = function(nx,ny){ if(this.xnx) this.x-=speed; if(this.yny) this.y-=speed; this.show(); } this.show = function(){ push(); if(!this.select) fill(this.color); else fill("blue"); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); rotateX(PI/2); cone(len/3,len); pop(); } } // Portuguese Cavalo (Horse piece) function Horse(x,y,z,c){ // Position properties this.x=x; this.y=y; this.z=z; // Rotate proporties this.rx=0; this.ry=0; this.rz=0; // Color properties this.color=c; this.select=0; this.move = function(nx,ny){ if(this.xnx) this.x-=speed; if(this.yny) this.y-=speed; this.show(); } this.show = function(){ push(); if(!this.select) fill(this.color); else fill("blue"); rotateX(this.rx); rotateY(this.ry); rotateZ(this.rz); translate(this.x,this.y,this.z); box(len/5,len/5,len); translate(0,0,len*2/5); box(len,len/5,len/5); pop(); } } function createBoard(){ for(let j=0;j<8;j++){ for(let i=0;i<8;i++){ if(j%2) board[i][j]=new housePiece(i*len,j*len,0,i%2?"white":"green"); else board[i][j]=new housePiece(i*len,j*len,0,i%2?"green":"white"); } } } function showBoard() { for(let j=0;j<8;j++){ for(let i=0;i<8;i++){ board[i][j].show(); } } } function submmit(){ txtboxValue = (input1.value()).split(","); // chane to original color selectPiece.select=0; // Select a piece if(radio.value()=="grey") selectPiece=grey[sel.selected()]; else selectPiece=reds[sel.selected()]; // Selected piece, then change color to "blue" selectPiece.select=1; setInterval(mover,velSlider.value()); tempX=selectPiece.x; tempY=selectPiece.y; tempPiece=radio.value(); alert("Wait until to moviment stops !!! "); } function mover(){ // Relative position // Select a piece if(tempPiece=="grey") // if grey piece +posX +posY selectPiece.move( tempX+(txtboxValue[0]*len) , tempY+(txtboxValue[1]*len) ); else // if red piece -posX -posY selectPiece.move( tempX-(txtboxValue[0]*len) , tempY-(txtboxValue[1]*len) ); }

chessboard 3D [multiplayer]