another day another dollar

cpsc335/proj1/js-p5-example/assets/draw-stuff.js

@@ -0,0 +1,35 @@
+// Draw stuff, with P5  // CF p5js.org/reference
+// Time-stamp: <2020-02-02 14:46:00 Chuck Siska>
+// ------------------------------------------------------------
+
+// =====================================================  draw_grid ====
+// Draw a fancy grid with major & minor lines 
+// & major row/col numbers.
+function draw_grid( rminor, rmajor, rstroke, rfill  ) 
+{
+    stroke( rstroke );
+    fill( rfill );;
+    let sz = g_canvas.cell_size;
+    let width = g_canvas.wid*sz;
+    let height = g_canvas.hgt*sz
+    for ( var ix = 0; ix < width; ix += rminor )
+    {
+        let big_linep = (ix % rmajor == 0);
+        let line_wgt = 1;
+        if (big_linep) line_wgt = 2;
+        strokeWeight( line_wgt );
+        line( ix, 0, ix, height );
+        strokeWeight( 1 );
+        if ( ix % rmajor == 0 ) { text( ix, ix, 10 ); }
+    }
+    for ( var iy = 0; iy < height; iy += rminor )
+    {
+        let big_linep = (iy % rmajor == 0);
+        let line_wgt = 1;
+        if (big_linep) line_wgt = 2;
+        strokeWeight( line_wgt );
+        line( 0, iy, width, iy );
+        strokeWeight( 1 );
+        if ( iy % rmajor == 0 ) { text( iy, 0, iy + 10 ); }
+    }
+}

cpsc335/proj1/js-p5-example/assets/styles.css

@@ -0,0 +1,7 @@
+body {
+  text-align: center;
+  font-family: sans-serif;
+}
+canvas {
+  background-color: black;
+}

cpsc335/proj1/js-p5-example/cs-sketch.js

@@ -0,0 +1,108 @@
+// 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'.
+var g_canvas = { cell_size:10, wid:64, hgt:48 }; // JS Global var, w canvas size info.
+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.
+    draw_grid( 10, 50, '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.
+
+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( );
+}

cpsc335/proj1/js-p5-example/index-js-p5-example.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>    <!-- this is a JS comment -->    <!--  -->
+<html lang="">    <!-- HTML page begs/ends w 'html' tag -->
+  <head>    <!-- HTML page has 'head'section and 'body' section -->
+    <meta foo="Time-stamp: <2020-02-02 17:14:59 Chuck Siska>">
+    <!-- a JS comment.-->
+    <!--
+        Some code, mod'd, from "Introducing JavaScript Game Development" by Stuart.
+      -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>P5-JS-HTML</title>     <!-- Browser or tab title -->
+    <link rel="stylesheet" href="assets/styles.css">    <!-- Tiny CSS style file -->
+    <style> body {padding: 0; margin: 0;} </style>    <!-- Bit of in-line CSS -->
+    <script src="p5.js"></script>    <!-- Load P5.JS, one file -->
+    <!-- For more P5.JS, CF https://github.com/processing/p5.js/wiki -->
+    <script src="cs-sketch.js"></script>    <!-- Load my setup+draw P5-req'd fcns -->
+  </head>
+  <body>     <!-- HTML page body, where raw text gets displayed on the page -->
+    <h1>Playing the HTML canvas w P5</h1>    <!-- Text in a high priority heading -->
+    <!-- 
+    <canvas id="cs-canvas" width="400" height="400"></canvas>
+     -->
+    <p>    <!-- A paragraph 'break', to start a new paragraph -->
+    Now is the time for all good squid to come to the aid of their waters.
+  </body>    <!-- HTML display page ends here -->
+    <script src="assets/draw-stuff.js"></script>   <!-- Load some JS fcns in a file -->
+<!--     <script src="../assets/tools.js"></script>   Load more JS fcns -->
+<script>   <!-- And run some JS code if needed; but better in sketch.js. -->
+
+</script>
+</html>
+    <!-- F12 on keyboard opens Console+Inspector+Debugger window on most Browsers. -->
+    <!-- F12 Debugger window > Watch+Breakpoint pane > 2-vertical-bars icon stops anim. -->
+    <!-- In JS, outputting alert/message popup, also pauses anim (with your msg).  -->
+    <!-- In JS, outputting pgm state info to console can help w debugging. -->
+    <!-- Add a P5 keyPressed( ) fcn to toggle a Stop global var if you like. -->

cpsc335/proj1/js-p5-example/readme.txt

@@ -0,0 +1,80 @@
+Readme for js-p5-example
+Time-stamp: <2020-09-02 14:11:19 Chuck Siska>
+------------------------------------------------------------
+
+Intro
+
+  This example draws a grid and runs an invisible bot from cell to cell
+  on the grid changing its colors.  You can stop/restart the bot with
+  any keypress.  You can move the bot to any cell with a mouse-click.
+
+  This is an example project using HTML, Javascript (JS), and P5.js
+  which is a JS-adapted version of the Processing Language.  CF HTML and
+  JS on the web (eg, Wikipedia).  More on P5 is at
+  p5js.org/reference.and at github.com/processing/p5.js/wiki.
+
+  P5 provides sutomated animation (via a user-built "draw" function),
+  and GUI manipulation functions that are simpler than JS.
+
+Zip Contents
+
+  File readme.txt.  This file.
+
+  File pix-js-p5-example-1.JPG.  A snapshot of the example webpage.
+
+  File pix-js-p5-example2-F12-Console.JPG  A webpage + F12 Console.
+    Shows entering some global var names to see their current values.
+
+  File index-js-p5-example.html. Drag and drop this into a browser to
+    run the example.
+    Click to set new loc for drunk-bot (via mousePressed).
+    Hit (almost) any key to toggle bot on or off (via keyPressed).
+
+  File p5.js. This is the P5 package.  It is loaded inside the html.
+
+  File cs-sketch.js; This contains several P5 user-defined linkage functions
+   (setup, draw, keyPressed, and mousePressed), as well as example
+    support functions.  P5's setup() is run once before page display.
+    P5's draw() is run once per display frame, so you can do animation.
+
+  File assets/styles.css.  This is an extra-small example of controlling
+    webpage styling.  // Loaded inside the html.
+
+  File assets/draw-stuff.js. This is an example to show loading a JS
+    script file from a folder other than the index HTML file's
+    folder location.  It also includes the utility draw_grid function
+    written in P5+JS. // Loaded inside the html.
+
+Installation & Running
+
+  1. Extract the .zip file into a folder.
+
+  2. Drag the index HTML file, index-js-p5-example.html, into a browser
+    window.  The example P5 program should start immediately.  You
+    should see a 640x480 grid (white lines on black background) with
+    row/column headers and some of the grid cells colored.  See the
+    picture pix-js-p5-example-1.JPG.
+
+Known Bugs
+
+  o- Bot cell drawing over-writes a pixels-worth of the cell's grid lines.
+
+Warnings
+
+  o- Clicking outside the grid wraps the mouse x.y back into the grid --
+     maybe at a weird-looking spot.  Enjoy.
+
+  o- Testing was light.  Didn't try all key or mouse combos.
+
+Testing
+
+  o- Following installation instruction, above, watched it run, and
+  tryed a few keypresses and mouse clicks.  Looks okay to ship.
+
+Credits
+
+  Some code was borrowed and modified from Stuart's book.  
+    Introducing JavaScript Game Development: Build a 2D Game from the
+    Ground Up, by Graeme Stuart, 2018, 209 pages.
+
+  And, of course, thanks to the HTML and P5.js developers.

cpsc335/proj1/tp-ant-setup.txt

@@ -0,0 +1,18 @@
+TP Ant Setup
+by Charles Siska - Saturday, September 5, 2020, 6:39 PM
+Number of replies: 0
+TP Ant Setup
+1. "Initially, the grid is all black and the Ant is in the center cell,
+    heading North (toward the top)."
+2. "initialize a 41 by 41 square grid to have all cells black (state 0).
+    The lone Ant should be in the center cell."
+TP Ant First "Move"
+3. "it first notices the color of the cell it is on and then changes its
+    direction/heading based on this color,"
+    BEFORE Doing Any Move
+4. "then 'increments' the color of the cell under it to the next color
+    in sequence"
+    FROM Black to The Next Color
+5. "finally moves one cell in its new direction"
+   Which Was Set in Step #4, Above.
+Hope this helps.