Rectangle Tests

by sebleedelisle

JavaScript

let canvas = document.createElement('canvas'); 
let ctx = canvas.getContext('2d'); 
canvas.width = canvas.height = 1000;

document.body.appendChild(canvas); 

ctx.fillStyle = 'black'; 
ctx.fillRect(0,0,canvas.width, canvas.height); 

ctx.translate(10,10); 

let w = 200; 
let h = 150; 

drawCornerRectWithWorkingOut(w,h,40); 




function drawCornerRect(w, h, corner) { 
	
	let numpoints = w*2 + h*2 - corner*4; 
 // numpoints*=2;

    ctx.fillStyle = '#0f0'; 

    for(let i = 0; i<numpoints; i++) { 

      let wl = ((w+h)*2) - (corner*4); // wavelength
      let hwl = wl/2; // half wavelenth
      let x = clamp(Math.abs(((i+(h/2))%wl)-hwl)-(h/2)+corner,0,w); 
      let y = clamp(Math.abs(((i-(h/1.5)+corner)%wl)-hwl)-(w/2)+corner,0,h);

      // clumsy way to draw a pixel but you get it 
      ctx.fillRect(x,y, 1,1); 

    }
}



function drawCornerRectWithWorkingOut(w, h, corner) { 
	
	let numpoints = w*2 + h*2 - corner*4; 


    ctx.fillStyle = '#0f0'; 

    for(let i = 0; i<numpoints; i+=4) { 

      let wl = ((w+h)*2) - (corner*4); // wavelength
      let hwl = wl/2; // half wavelenth
      
      let x = Math.abs(((i+(h/2))%wl)-hwl)  // triangle wave
      // you can comment out each of the following lines to see 
      // how it affects the wave
      x = x-(h/2)+corner; // offset into the middle so we can clamp it 
      x = clamp(x, 0, w); // clamp it between 0 and the width
      
      let y = Math.abs(((i-(h/1.5) + corner)%wl)-hwl);  // triangle wave
      // you can comment out each of the following lines to see 
      // how it affects the wave
      y = y-(w/2)+corner;
			y = clamp(y, 0, h); 
      
      ctx.fillStyle = '#0f0'; 
      ctx.fillRect(x,y, 1,1); 

      // draw x and y waveforms
      ctx.fillStyle = '#088'; 
      ctx.fillRect(x,i, 1,1); 
      ctx.fillStyle = '#808'; 
      ctx.fillRect(y,i, 1,1); 

    }
}


function drawRect(w, h) { 

	let numpoints = w*2 + h*2; 
  
  ctx.fillStyle = '#0f0'; 
  
  for(let i = 0; i<numpoints; i++) { 
 ...