v1
11/5/2024 by stackers -00
Setup JavaScript
const WIDTH = 1024;
const HEIGHT = 1024;
const ctx = createCanvas();
var imageData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
var pixelData = imageData.data;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = 'white';
function createCanvas () {
const dpr = window.devicePixelRatio || 1;
const canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.width = WIDTH / dpr + 'px';
canvas.style.height = HEIGHT / dpr + 'px';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
return ctx;
}
const SELECTED_BRUSH = {
width: 8,
height: 8,
size: 64,
offsetX: -4,
offsetY: -4,
data: [
0,0,1,1,1,1,0,0,
0,1,1,1,1,1,1,0,
1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,
0,1,1,1,1,1,1,0,
0,0,1,1,1,1,0,0,
],
imageData: null
}
SELECTED_BRUSH.canvas = document.createElement('canvas');
SELECTED_BRUSH.canvas.width = SELECTED_BRUSH.width;
SELECTED_BRUSH.canvas.height = SELECTED_BRUSH.height;
SELECTED_BRUSH.ctx = SELECTED_BRUSH.canvas.getContext('2d');
SELECTED_BRUSH.ctx.fillStyle = 'white';
for (let i = 0; i < SELECTED_BRUSH.size; i++) {
if (SELECTED_BRUSH.data[i] === 1) {
let x = SELECTED_BRUSH.offsetX + (i % SELECTED_BRUSH.width);
let y = SELECTED_BRUSH.offsetY + Math.floor(i / SELECTED_BRUSH.width);
if (x >= 0 && x < WIDTH && y >= 0 && y < HEIGHT)
SELECTED_BRUSH.ctx.fillRect(x, y, 1, 1);
}
}
function randomLine() {
return [
Math.round(Math.random() * WIDTH),
Math.round(Math.random() * HEIGHT),
Math.round(Math.random() * WIDTH),
Math.round(Math.random() * HEIGHT),
]
}
ready
drawLine(...randomLine());
function drawLine(x0,y0,x1,y1, brush=SELECTED_BRUSH) {
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
let brushOffset = {x: 0, y: 0};
while (true) {
if (!window.outbrsh){
window.outbrsh = true
console.log('drawing at', brush);
}
//loop through pixels in brush and draw them
for (let i = 0; i < brush.size; i++) {
if (brush.data[i] === 1) {
let x = x0 + brushOffset.x + (i % brush.width);
let y = y0 + brushOffset.y + Math.floor(i / brush.width);
if (x >= 0 && x < WIDTH && y >= 0 && y < HEIGHT)
ctx.fillRect(x, y, 1, 1);
}
}
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy) {
err -=dy;
x0+=sx;
}
if (e2 < dx) {
err +=dx;
y0+=sy;
}
}
} ready
drawLine(...randomLine());
function drawLine(x0,y0,x1,y1, brush=SELECTED_BRUSH) {
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
let brushOffset = {x: 0, y: 0};
while (true) {
if (!window.outbrsh){
window.outbrsh = true
console.log('drawing at', brush);
}
//loop through pixels in brush and draw them
for (let i = 0; i < brush.size; i++) {
ctx.fillRect(x0, y0, 1, 1);
if (brush.data[i] === 1) {
let x = x0 + brushOffset.x + (i % brush.width);
let y = y0 + brushOffset.y + Math.floor(i / brush.width);
if (x >= 0 && x < WIDTH && y >= 0 && y < HEIGHT)
ctx.drawImage(brush.canvas, x, y);
}
}
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy) {
err -=dy;
x0+=sx;
}
if (e2 < dx) {
err +=dx;
y0+=sy;
}
}
} ready
drawLine(...randomLine());
function drawLine(x0,y0,x1,y1, brush=SELECTED_BRUSH) {
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
let brushOffset = {x: 0, y: 0};
const checkedPixels = [];
while (true) {
if (!window.outbrsh){
window.outbrsh = true
console.log('drawing at', brush);
}
//loop through pixels in brush and draw them
for (let i = 0; i < brush.size; i++) {
if (brush.data[i] === 1) {
let x = x0 + brushOffset.x + (i % brush.width);
let y = y0 + brushOffset.y + Math.floor(i / brush.width);
if (checkedPixels[x] && checkedPixels[x][y]) continue;
if (x <= 0 || x > WIDTH || y <= 0 || y > HEIGHT) continue;
ctx.fillRect(x, y, 1, 1);
if (!checkedPixels[x]) checkedPixels[x] = [];
checkedPixels[x][y] = true;
}
}
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy) {
err -=dy;
x0+=sx;
}
if (e2 < dx) {
err +=dx;
y0+=sy;
}
}
}