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