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