Code viewer [Ancient Brain]

Code viewer for World: P5 Mouse tracker (clone by...

// Cloned by Jack O'Brien on 9 Dec 2020 from World "P5 Mouse tracker" 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 P5 AB API  




// ===================================================================================================================
// === 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;    

AB.maxSteps        = 1000000;    

AB.screenshotStep  = 200;   
  
AB.drawRunControls = false;
	
const SKYCOLOR = "LightBlue";       // any format color that is accepted by P5 background()
                                    // https://p5js.org/reference/#/p5/background
var canvas;	
  
// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


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





    AB.world.newRun = function()                 
    {
		// console.log ( "newRun" );
		ABWorld.init (  SKYCOLOR  ); 
        
		
    };


//     AB.world.nextStep = function()                
//     {
// 		// can put P5 instructions to be executed every step here, or in draw()  
 
//         // fill color white
// // 		fill(255, 255, 255); 
		
// 		// draw ellipses on desktop 
// 		// draw ellipse on mouse hover, wherever the mouse is, each step
// // 		if ( AB.onDesktop() )   ellipse(mouseX, mouseY, 80, 80);         
//     };

	

// draw ellipses on mobile   
// on touch there is no hover
// so respond directly to touch events rather than run on its own 
// https://github.com/processing/p5.js/wiki/p5.js-overview#mouse-and-touch-interaction

// function touchStarted() 
// {
//     ellipse(mouseX, mouseY, 80, 80); 
//     // prevent default
//     return false;
// }



//---- setup -------------------------------------------------------
// Do NOT create a setup function 
// But you can create these functions.

function beforesetup()        // Optional
{
    // Anything you want to run at the start BEFORE the canvas is created 
}

function aftersetup()         // Optional
{
    // Anything you want to run at the start AFTER the canvas is created 
    canvas = createCanvas(100, 100),
    // ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    lineThickness = 1;
    // canvas.style.width ="400px";
    canvas.mouseClicked(onMouseDown);
    canvas.addEventListener("mousedown", onMouseDown);
    canvas.addEventListener("mouseup", onMouseUp);
    canvas.addEventListener("onmousemove", onMouseMove);
    

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

}



//---- draw -------------------------------------------------------
// draw() is not needed. 
// Can use nextStep() or takeAction() instead.

function draw()               // Optional
{
	// can put P5 instructions to be executed every step here, or in nextStep()  
}


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

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

function onMouseDown() {
    ellipse(mouseX, mouseY, 80, 80); 
    painting = true;
    ctx.fillStyle = "#ffffff";
    // lastX = e.pageX - this.offsetLeft;
    // lastY = e.pageY - this.offsetTop;
}

function onMouseUp(e){
    painting = false;
}

function onMouseMove(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;

    }
}