added new project

2021-02-24 00:20:22 -08:00
1 parent 6e02fc4e7f
commit 90cfba2c6f
@@ -0,0 +1 @@
+\relax 
@@ -0,0 +1,109 @@
+This is pdfTeX, Version 3.14159265-2.6-1.40.21 (TeX Live 2020/Arch Linux) (preloaded format=latex 2020.9.8)  8 SEP 2020 16:55
+entering extended mode
+ restricted \write18 enabled.
+ %&-line parsing enabled.
+**335-02-p1-4head-Standup-200908.tex 335-02-p1-4head-Standup-200908.pdf
+(./335-02-p1-4head-Standup-200908.tex
+LaTeX2e <2020-02-02> patch level 5
+L3 programming layer <2020-06-03>
+(/usr/share/texmf-dist/tex/latex/base/article.cls
+Document Class: article 2019/12/20 v1.4l Standard LaTeX document class
+(/usr/share/texmf-dist/tex/latex/base/size12.clo
+File: size12.clo 2019/12/20 v1.4l Standard LaTeX file (size option)
+)
+\c@part=\count167
+\c@section=\count168
+\c@subsection=\count169
+\c@subsubsection=\count170
+\c@paragraph=\count171
+\c@subparagraph=\count172
+\c@figure=\count173
+\c@table=\count174
+\abovecaptionskip=\skip47
+\belowcaptionskip=\skip48
+\bibindent=\dimen134
+)
+(/usr/share/texmf-dist/tex/latex/graphics/graphicx.sty
+Package: graphicx 2019/11/30 v1.2a Enhanced LaTeX Graphics (DPC,SPQR)
+
+(/usr/share/texmf-dist/tex/latex/graphics/keyval.sty
+Package: keyval 2014/10/28 v1.15 key=value parser (DPC)
+\KV@toks@=\toks15
+)
+(/usr/share/texmf-dist/tex/latex/graphics/graphics.sty
+Package: graphics 2019/11/30 v1.4a Standard LaTeX Graphics (DPC,SPQR)
+
+(/usr/share/texmf-dist/tex/latex/graphics/trig.sty
+Package: trig 2016/01/03 v1.10 sin cos tan (DPC)
+)
+(/usr/share/texmf-dist/tex/latex/graphics-cfg/graphics.cfg
+File: graphics.cfg 2016/06/04 v1.11 sample graphics configuration
+)
+Package graphics Info: Driver file: dvips.def on input line 105.
+
+(/usr/share/texmf-dist/tex/latex/graphics-def/dvips.def
+File: dvips.def 2017/06/20 v3.1d Graphics/color driver for dvips
+))
+\Gin@req@height=\dimen135
+\Gin@req@width=\dimen136
+)
+(/usr/share/texmf-dist/tex/latex/l3backend/l3backend-dvips.def
+File: l3backend-dvips.def 2020-06-03 L3 backend support: dvips
+\l__pdf_internal_box=\box45
+\g__pdf_backend_object_int=\count175
+\l__pdf_backend_content_box=\box46
+\l__pdf_backend_model_box=\box47
+\g__pdf_backend_annotation_int=\count176
+\g__pdf_backend_link_int=\count177
+\g__pdf_backend_link_sf_int=\count178
+)
+(./335-02-p1-4head-Standup-200908.aux)
+LaTeX Font Info:    Checking defaults for OML/cmm/m/it on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    Checking defaults for OMS/cmsy/m/n on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    Checking defaults for OT1/cmr/m/n on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    Checking defaults for T1/cmr/m/n on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    Checking defaults for TS1/cmr/m/n on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    Checking defaults for OMX/cmex/m/n on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    Checking defaults for U/cmr/m/n on input line 13.
+LaTeX Font Info:    ... okay on input line 13.
+LaTeX Font Info:    External font `cmex10' loaded for size
+(Font)              <14.4> on input line 15.
+LaTeX Font Info:    External font `cmex10' loaded for size
+(Font)              <7> on input line 15.
+
+Underfull \hbox (badness 10000) in paragraph at lines 20--29
+
+ []
+
+
+Underfull \hbox (badness 10000) in paragraph at lines 20--29
+
+ []
+
+
+! LaTeX Error: Cannot determine size of graphic in ../imgs/workforstandup1-chri
+s.png (no BoundingBox).
+
+See the LaTeX manual or LaTeX Companion for explanation.
+Type  H <return>  for immediate help.
+ ...                                              
+                                                  
+l.33 ...hics[width=7cm]{workforstandup1-chris.png}
+                                                  
+? x
+ 
+Here is how much of TeX's memory you used:
+ 743 strings out of 480479
+ 11546 string characters out of 5905986
+ 245706 words of memory out of 5000000
+ 16825 multiletter control sequences out of 15000+600000
+ 534801 words of font info for 32 fonts, out of 8000000 for 9000
+ 1141 hyphenation exceptions out of 8191
+ 30i,6n,25p,1712b,263s stack positions out of 5000i,500n,10000p,200000b,80000s
+No pages of output.
@@ -0,0 +1,51 @@
+\documentclass[12pt,a4paper]{article}
+
+% --> Declare packages / paths
+\usepackage{graphicx}
+
+\graphicspath{ {../imgs/} }
+
+% --> Basic overlaying information
+\title{Project \#1 - Standup Report \#1}
+\author{Chris Nutter | Estrella Mejia | Kenneth Doan}
+
+% --> Begin document information
+\begin{document}
+
+\maketitle
+%\tableofcontents
+
+%------------------------%
+\section{Chris Nutter}
+    1. Currently I'm working on getting the grid organized and properly formatted towards Professor Siska's recommendations.
+    I have created the grid 41x41 and properly spaced out the grid itself. I have also hosted the P5 grid on my website 
+    for our groupmates to look over live.
+        \\\\
+    2. Next I plan to fix a bug where mouse cursor mapping is off but that shouldn't be too hard.
+        \\\\
+    3. I'm still familiarizing with JS and P5 so adjusting to that is an annoying hurdle but it's helpful for 
+    me to learn this for my own means. Professor Siska's comments on \emph{cs-sketches.js} help me 
+    figure out what each thing does.   
+%------------------------%
+
+%------------------------%
+\section{Estrella Mejia}
+    1. I'm working on getting the ant to start at the center. 
+        \\\\
+    2. I plan to get the ant to move right on red or blue and left on black or green.
+        \\\\
+    3. I am trying to get the color properly 
+%------------------------%
+ 
+%------------------------%
+\section{Kenneth Doan}
+    1. I am trying to find the decimal color values for Black, Red, Yellow, Blue, and Green. 
+    I am also trying to figure out how to turn the ant into a triangle in the meantime.
+        \\\\
+    2. Next I'll learn how to make the Ant start moving North at the start of the load.
+        \\\\
+    3. Implementing the triangle shape and the colours are some challenges 
+    I am facing because this is the second class I have taken that is using HTML5.
+%------------------------%
+  
+\end{document}
@@ -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.
@@ -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 ); }
+    }
+}
@@ -0,0 +1,7 @@
+body {
+  text-align: center;
+  font-family: sans-serif;
+}
+canvas {
+  background-color: black;
+}
@@ -0,0 +1,109 @@
+// 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:25, wid:41, hgt:41 }; // JS Global var, w canvas size info.
+    //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( 25, 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.
+
+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( );
+}
@@ -0,0 +1,147 @@
+// 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( );
+}
@@ -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. -->
@@ -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.
@@ -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 ); }
+    }
+}
@@ -0,0 +1,7 @@
+body {
+  text-align: center;
+  font-family: sans-serif;
+}
+canvas {
+  background-color: black;
+}
@@ -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( );
+}
@@ -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. -->
@@ -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.