148 lines
4.8 KiB
JavaScript
Executable File
148 lines
4.8 KiB
JavaScript
Executable File
// cs-sketch.js; P5 key animation fcns. // CF p5js.org/reference
|
|
// Time-stamp: <2020-02-02 15:58:23 Chuck Siska>
|
|
|
|
// Make global g_canvas JS 'object': a key-value 'dictionary'.
|
|
|
|
/*
|
|
|
|
Documentation marks are as followed.
|
|
|
|
1. Chris Nutter
|
|
2. Estrella Mejia
|
|
3. Kenneth Doan
|
|
|
|
Group Name: 4head
|
|
|
|
*/
|
|
|
|
//==============================//
|
|
// 1. I increased the size of cell_size for easily legibility on high-dpi displays
|
|
// 09/06/2020 01:20:02 PM
|
|
//
|
|
// !! BUG FOUND !! - Mouse input is skewed. Needs fixing.
|
|
//==============================//
|
|
|
|
var g_canvas = { cell_size:20, wid:41, hgt:41 }; // JS Global var, w canvas size info.
|
|
|
|
//==============================//
|
|
// 1. cell_size of 20 is a good size for 1440p displays, might be oversized for 1080p
|
|
// 09/07/2020 - 05:30:52 PM
|
|
//==============================//
|
|
|
|
var g_frame_cnt = 0; // Setup a P5 display-frame counter, to do anim
|
|
var g_frame_mod = 24; // Update ever 'mod' frames.
|
|
var g_stop = 0; // Go by default.
|
|
|
|
function setup() // P5 Setup Fcn
|
|
{
|
|
let sz = g_canvas.cell_size;
|
|
let width = sz * g_canvas.wid; // Our 'canvas' uses cells of given size, not 1x1 pixels.
|
|
let height = sz * g_canvas.hgt;
|
|
|
|
createCanvas( width, height ); // Make a P5 canvas.
|
|
|
|
//==============================//
|
|
// 1. Modifying the first and second variable allows for the grid to be matched to proper canvas size.
|
|
// 09/08/2020 - 07:15:16 PM
|
|
//==============================//
|
|
|
|
draw_grid( 20, 41, 'white', 'yellow' );
|
|
|
|
}
|
|
|
|
var g_bot = { dir:3, x:20, y:20, color:100 }; // Dir is 0..7 clock, w 0 up.
|
|
var g_box = { t:1, hgt:47, l:1, wid:63 }; // Box in which bot can move.
|
|
|
|
//==============================//
|
|
// 1. Kenneth's code will be below here and will be really good I bet.
|
|
// 09/08/2020 - 07:38:44 PM
|
|
//==============================//
|
|
|
|
function move_bot( )
|
|
{
|
|
let dir = (round (8 * random( ))) // Change direction at random; brownian motion.
|
|
let dx = 0;
|
|
let dy = 0;
|
|
switch (dir) { // Convert dir to x,y deltas: dir = clock w 0=Up,2=Rt,4=Dn,6=Left.
|
|
case 0 : { dy = -1; break; }
|
|
case 1 : { dx = 1; dy = -1; break; }
|
|
case 2 : { dx = 1; break; }
|
|
case 3 : { dx = 1; dy = 1; break; }
|
|
case 4 : { dy = 1; break; }
|
|
case 5 : { dx = -1; dy = 1; break; }
|
|
case 6 : { dx = -1; break; }
|
|
case 7 : { dx = -1; dy = -1; break; }
|
|
}
|
|
let x = (dx + g_bot.x + g_box.wid) % g_box.wid; // Move-x. Ensure positive b4 mod.
|
|
let y = (dy + g_bot.y + g_box.hgt) % g_box.hgt; // Ditto y.
|
|
let color = 100 + (1 + g_bot.color) % 156; // Incr color in nice range.
|
|
g_bot.x = x; // Update bot x.
|
|
g_bot.y = y;
|
|
g_bot.dir = dir;
|
|
g_bot.color = color;
|
|
//console.log( "bot x,y,dir,clr = " + x + "," + y + "," + dir + "," + color );
|
|
}
|
|
|
|
function draw_bot( ) // Convert bot pox to grid pos & draw bot.
|
|
{
|
|
let sz = g_canvas.cell_size;
|
|
let sz2 = sz / 2;
|
|
let x = 1+ g_bot.x*sz; // Set x one pixel inside the sz-by-sz cell.
|
|
let y = 1+ g_bot.y*sz;
|
|
let big = sz -2; // Stay inside cell walls.
|
|
// Fill 'color': its a keystring, or a hexstring like "#5F", etc. See P5 docs.
|
|
fill( "#" + g_bot.color ); // Concat string, auto-convert the number to string.
|
|
//console.log( "x,y,big = " + x + "," + y + "," + big );
|
|
let acolors = get( x + sz2, y + sz2 ); // Get cell interior pixel color [RGBA] array.
|
|
let pix = acolors[ 0 ] + acolors[ 1 ] + acolors[ 2 ];
|
|
//console.log( "acolors,pix = " + acolors + ", " + pix );
|
|
|
|
// (*) Here is how to detect what's at the pixel location. See P5 docs for fancier...
|
|
if (0 != pix) { fill( 0 ); stroke( 0 ); } // Turn off color of prior bot-visited cell.
|
|
else { stroke( 'white' ); } // Else Bot visiting this cell, so color it.
|
|
|
|
// Paint the cell.
|
|
rect( x, y, big, big );
|
|
}
|
|
|
|
function draw_update() // Update our display.
|
|
{
|
|
//console.log( "g_frame_cnt = " + g_frame_cnt );
|
|
move_bot( );
|
|
draw_bot( );
|
|
}
|
|
|
|
function draw() // P5 Frame Re-draw Fcn, Called for Every Frame.
|
|
{
|
|
++g_frame_cnt;
|
|
if (0 == g_frame_cnt % g_frame_mod)
|
|
{
|
|
if (!g_stop) draw_update();
|
|
}
|
|
}
|
|
|
|
function keyPressed( )
|
|
{
|
|
g_stop = ! g_stop;
|
|
}
|
|
|
|
function mousePressed( )
|
|
{
|
|
let x = mouseX;
|
|
let y = mouseY;
|
|
//console.log( "mouse x,y = " + x + "," + y );
|
|
let sz = g_canvas.cell_size;
|
|
let gridx = round( (x-0.5) / sz );
|
|
let gridy = round( (y-0.5) / sz );
|
|
//console.log( "grid x,y = " + gridx + "," + gridy );
|
|
//console.log( "box wid,hgt = " + g_box.wid + "," + g_box.hgt );
|
|
g_bot.x = gridx + g_box.wid; // Ensure its positive.
|
|
//console.log( "bot x = " + g_bot.x );
|
|
g_bot.x %= g_box.wid; // Wrap to fit box.
|
|
g_bot.y = gridy + g_box.hgt;
|
|
//console.log( "bot y = " + g_bot.y );
|
|
g_bot.y %= g_box.hgt;
|
|
//console.log( "bot x,y = " + g_bot.x + "," + g_bot.y );
|
|
draw_bot( );
|
|
}
|