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); 
ctx.scale(0.5,0.5); 
let w = 240; 
let h = 176; 
//drawRect(w,h)
drawCornerRect(w,h,48); 

ctx.strokeStyle = '#333'; 
ctx.strokeRect(0,0,w,h); 

function drawRect(w, h) { 

	let numpoints = w*2 + h*2; 
  
  ctx.fillStyle = '#0f0'; 
  
  for(let i = 0; i<numpoints; i++) { 
  
  
  	let wl = (w+h)*2; // wavelength
    let hwl = wl/2; // half wavelenth
    let x = clamp(Math.abs(((i+(h/2))%wl)-hwl)-(h/2),0,w); 
    let y = clamp(Math.abs(((i-(w/2))%wl)-hwl)-(w/2),0,h);

		// clumsy way to draw a pixel but you get it 
 		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(i,y, 1,1); 
    
  
  }


}


function drawCornerRect(w, h, corner) { 
	
	let numpoints = w*2 + h*2; 
 // 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+corner+corner)%wl)-hwl)+(corner)-(h/2),0,w); 
      
      let ywl = ((w+h)*2)-(corner*4); 
      let hywl = ywl/2;
      let y = clamp(Math.abs(((i-(w/2)+corner)%ywl)-hywl)-(w/2)+(corner/2),0,h);

      // clumsy way to draw a pixel but you get it 
      ctx.fillStyle = '#0f0'; 
      ctx.fillRect(x,y, 2,2); 

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

    }
}


function clamp(val, min, max) {
    return val > max ? max : val < min ? min : val;
}