LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


CSS
*{margin:0;padding:0;}
canvas{background:black;display:block;}

button{position:absolute;left:10px;bottom:10px;background:black;border:2px solid #222266;color:white;font-size:2em;padding:.5em 1em;display:block;cursor:pointer;}
button:hover,button:focus{box-shadow:0 0 2em #222266;}

form{position:absolute;bottom:10px;right:10px;text-align:right;}
label{display:block;color:white;}
JS
const max=Math.PI*2;

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

console.clear();
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
Array.from(document.querySelectorAll('input')).forEach(range => range.addEventListener('input', go));
document.querySelector('button').addEventListener('click', go);

const drawCubeIncrement = Math.PI/2;
const tempSize=100;
function drawCube(x,y,wx,wy,h,r){
  
  let i;
  
  let xs = [];
  let ys = [];
  
  for(i=0; i<4; i++){
    let x = Math.sin(i*drawCubeIncrement+r);
    let y = Math.sin(i*drawCubeIncrement+r+drawCubeIncrement);
    xs.push(x);
    ys.push(y);
  }
  
  
  for(i=0; i<4; i++){
    if(xs[i] <= -0.75 || ys[i] <= -0.75) continue;
    let x1 = xs[i]*wx;
    let y1 = ys[i]*wy;
    let x2 = xs[!i ? 3 : i-1]*wx;
    let y2 = ys[!i ? 3 : i-1]*wy;
    
    drawSide(x1,y1,x2,y2,y2+h,y1+h);
  }
  ctx.beginPath();
  ctx.moveTo(xs[0]*wx,ys[0]*wy);
  for(i=0; i<4; i++){
  ctx.lineTo(xs[i]*wx,ys[i]*wy);
  }
  ctx.fillStyle = 'grey';
  ctx.fill();
  ctx.stroke();
}

function drawSide(x1,y1,x2,y2,y3,y4){
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.lineTo(x2,y3);
    ctx.lineTo(x1,y4);
    ctx.fillStyle = 'blue';
    ctx.fill();
  ctx.strokeStyle = 'cyan';
  ctx.stroke();
}

function path(path){
  ctx.moveTo.apply(this,path[0]);
  path.forEach(i => ctx.moveTo.apply(this,i));
  ctx.strokeStyle = 'blue';
  ctx.stroke();
}

ctx.translate(window.innerWidth/2,window.innerHeight/2);

function go(){
  ctx.clearRect(0-canvas.width/2,0-canvas.height/2,canvas.width,canvas.height);
  let sin=document.querySelector('#js-r').value/360*max;
  drawCube(100,100,document.querySelector('#js-wx').value,document.querySelector('#js-wy').value,Number(document.querySelector('#js-h').value),sin);
  
}
go();

Description

I'd like to be able to create & rotate boxes while maintaining an isometric projection. Not quite there yet.
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv