test math.foo for balance alpha

by Konstantin Cryman

JavaScript

const can = document.createElement('canvas');
can.style.width = '500px';
can.style.height = '500px';
can.width = 500;
can.height = 500;
document.body.appendChild( can );

const ctx = can.getContext('2d')

for( let i = 0; i < can.width; i++ ){
	const alpha = i / can.width;
  ctx.fillStyle = '#000000'
  ctx.fillRect( i, can.height / 2, 1, 1 )
}

for( let i = 0; i < can.width; i++ ){
	const alpha = i / can.width;
  const y_offset = Math.sin( Math.PI * 2 * alpha );
  const y = can.height / 2 - y_offset * ( can.height / 3 ) 
  ctx.fillStyle = '#ff0000'
  ctx.fillRect( i, y, 1, 1 )
}


for( let i = 0; i < can.width; i++ ){
	const alpha = i / can.width;
  const y_offset = Math.sin( ( Math.PI * 0.02 + ( alpha ) * Math.PI  * 0.75 ) )
  const y = can.height / 2 - y_offset * ( can.height / 3 ) 
  ctx.fillStyle = '#ff00ff'
  ctx.fillRect( i, y, 1, 1 )
}

class vec {

	constructor(){
  	this.input = arguments;
    this.components = [];
    this.__init();
  }
  
  get count(){
  	return this.input.length;
  }
  
  __init(){
  	for( let i = 0; i < this.input.length; i++ ){
    	this.components[ i ] = 0;
    }
  	this.fromArray( this.input );
  }
  
  toArray(){
  	return JSON.parse( JSON.stringify( this.components ) );
  }
  
  fromArray( arr ){
  	if( arr.length !== this.components.length ){
    	return this;
    } else {
      let i = 0;
      for( const nextInput in arr ){
        this.components[ i ] = nextInput;
        i++;
      }
    	return this;
    }
  }
  
  

}

class vec3 {

	constructor( x = 0, y = 0, z = 0 ){
  	this.x = x;
    this.y = y;
    this.z = z;
  }

	fromArray( xyz ){
  	this.x = xyz[0];
    this.y = xyz[1];
    this.z = xyz[2];
  }

	toArray(){
  	return [ this.x, this.y, this.z ];
  }

	multiplyScalar( num ){
  	this.x *= num;
  	this.y *= num;
  	this.z *= num;
  }

}