// Cloned by Jack O'Brien on 9 Dec 2020 from World "canvas 2d " by Starter user 
// Please leave this clone trail here.
 


// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================




// Starter World for canvas API (no graphics library)
// 2D rendering 
// getContext("2d");






// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?


AB.clockTick       = 20;            // many frames per second, with small moves, looks best  

AB.screenshotStep  = 5;   
  
AB.maxSteps        = 1000;     
	

const SKYCOLOR 	= "#ffffcc";				// this usage will be of color as a string, not as a number 

const MUSIC_BACK  = '/uploads/starter/Defense.Line.mp3' ;

const SQUARE_IMAGE = '/uploads/starter/latin.jpg';

  
// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.








// global vars 
// Warning: caution with making SQUARESIZE a fixed size 
// because this may run on mobile with very small canvas

var SQUARESIZE;
var MOVESIZE;



function randomMove()       // square makes random move of this size
{
    return ( AB.randomIntAtoB ( - MOVESIZE , MOVESIZE ) ); 
}


function goodPoint ( x, y )   
// keep square inside the canvas    
// x,y is top LHS point of square
{
    if ( x < 0 ) return false;
    if ( y < 0 ) return false;
    if ( x + SQUARESIZE > ABWorld.canvas.width ) return false;
    if ( y + SQUARESIZE > ABWorld.canvas.height ) return false;
    return true;
}





var x, y;           // current location of square 
 
var dx;             // current move increment per step
var dy;

var img = new Image();



function draw() 
{
// 	var ctx = ABWorld.getContext ( "2d" );
	var canvas = document.getElementById("ABWorld"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {
    painting = true;
    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmouseup = function(e){
    painting = false;
}

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;
        
        if (y1 < y2) {
            yStep = 1;
        }
       
        lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
        if(lineThickness < 1){
            lineThickness = 1;   
        }

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, lineThickness , lineThickness );
            } else {
                ctx.fillRect(x, y, lineThickness , lineThickness );
            }
            
            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}
	                    
    // clear the whole canvas:
    //      ctx.clearRect( 0, 0, ABWorld.canvas.width, ABWorld.canvas.height );
 
	// clear the last drawn square: 
    //        ctx.clearRect ( x-1, y-1, SQUARESIZE+1, SQUARESIZE+1 );

// draw entire canvas in background color or else get black background in screenshots:
    ctx.fillStyle = SKYCOLOR;
    ctx.fillRect ( 0, 0, ABWorld.canvas.width, ABWorld.canvas.height );

    
    if ( ! goodPoint ( x + dx, y + dy ) )       // hit bounds, need to change direction 
    {
     do
     {
         dx = randomMove();
         dy = randomMove();
     }
     while ( ! goodPoint ( x + dx, y + dy ) );
    }
    
    // move the square and draw it 
    x = x + dx;
    y = y + dy;
    
//    	ctx.fillStyle = '#000000';								// set up foreground color
//      ctx.fillRect ( x, y, SQUARESIZE, SQUARESIZE );          // fill with solid color 
    
        ctx.drawImage( img, x, y, SQUARESIZE, SQUARESIZE );     // fill with image 
}




AB.world.newRun = function() 
{
    ABWorld.init (  SKYCOLOR  ); 

	// now that canvas exists:	

	SQUARESIZE  = ABWorld.canvas.width / 5;     // square size relative to canvas width 
	MOVESIZE    = SQUARESIZE / 20;                 // small moves per frame, lots of frames per second  
	 
	x = ABWorld.canvas.width / 2;               // initial position 
	y = ABWorld.canvas.height / 2;
	 
    dx = randomMove();                     // initial direction 
    dy = randomMove();

    img.src = SQUARE_IMAGE ;		// set up image 
};



AB.world.nextStep = function()
{
    AB.msg ( "Step: " + AB.step );
	draw();
};






// --- music ----------------------------------------

 AB.backgroundMusic ( MUSIC_BACK );