add and update examples

Author: lee2sman

docs/assets/examples/10print.gif

@@ -0,0 +1,71 @@
+# 10PRINT variations
+
+10PRINT is the name of a [one-liner](https://en.wikipedia.org/wiki/One-liner_program) program originally written in the BASIC language for Commodore computers and widely shared among early 1980s home computer users.
+
+The original line of code was typed into the terminal and immediately executed:
+
+```BASIC
+10 PRINT CHR$(205.5+RND(1)); : GOTO 10
+```
+
+This single line, which begins with the line number 10, says to [print](/reference/print) out the ASCII character ([char](/reference/char)) of the enclosed number that follows. That number is 205.5 plus a [random](/reference/random) number between 0 and 1, which, results in a decimal ([float](/reference/float)) between 205.5 and 206.5. When converted to an ASCII character, the fractional ([fract](/reference/fract)) decimal value is automatically removed, with an implicit [floor](/reference/floor), and the equivalent character `'\'` or `'/'` is printed out. Finally, the program says to goto line number 10 (the beginning of the line), a loop, to begin again, in an infinite loop. This results in a twisty maze of passages created with just these two ASCII characters that spill out over the terminal screen in tumbling lines until the computer operator / programmer interrupts it.
+
+Much more can be said about 10print, and in fact, an incredible and widely-lauded 324-page collaboratively-written book also titled [10 PRINT CHR$(205.5+RND(1)); GOTO 10](https://10print.org/) was published in 2012 by MIT Press. It can be purchased, and is available as a creative-commons licensed book and freely downloadable PDF.
+
+And here, following in tradition, we attempt yet another port of the original 10print instruction into somewhat-equivalent functionality with L5. This is but one of many (infinite?) potential implementations, and adds a varying block size each frame. The slow (1 frame per second here) rate is needed as otherwise the redrawing rate would be too quick for our eyes to handle.
+
+A main structure in this implementation are nested loops. This classic programming pattern is used everywhere from grid-based and patterned artworks to top down and sidescrolling tiled 2D videogames. The inner loop of incrementing x values advances the blocks across the page all the way to the right, where at that point the y value advances one block down the page, and begins looping through the x values again, drawing to the right, finally stopping drawing one complete iteration of the maze upon reaching the bottom of the window before drawing anew top to bottom again on the successive frame.
+
+Ways you can build on the 10print code:
+
+* Add color to the maze
+* Alter the randomness percentage to be more likely to draw one kind of line or the other
+* Change the block output to other line forms or shapes to make other kinds of mazes 
+* Figure out an implementation that iteratively adds one line per frame rather than drawing the whole maze grid at once
+* Apply more ideas you read about from [10Print](https://10print.org/) and ideas of your own
+
+![a maze of changing corridor size](/assets/examples/10print.gif)
+
+```lua
+require ("L5")
+
+function setup()
+  size(600, 800)
+  block = height / 40
+  
+  frameRate(1)
+  
+  describe("A maze of twisty little passages in each frame")
+end
+
+function draw()
+  background(255)
+  block = floor(random(10,140))
+  for y = 1, height, block do
+    for x = 1, width, block do
+      if random() < 0.5 then
+	line(x, y, x + block, y + block)
+      else
+	line(x + block, y, x, y + block)
+      end
+    end
+  end
+end
+```
+
+## Related References
+
+* [for](/reference/for)
+* [floor()](/reference/floor)
+* [frameRate()](/reference/frameRate)
+* [if](/reference/if)
+* [line()](/reference/line.md)
+* [draw()](/reference/draw)
+* [random()](/reference/random)
+
+## Related Examples
+
+* [Animation with Events](animation-and-variables-animation-with-events.md) - Pause and resume animation.
+* [Basic Pong](basic-pong.md) - A simple program demonstrating a basic implementation of pong with enemy AI player
+* [Conditions](animation-and-variables-conditions.md) - Use if and else statements to make decisions while your sketch runs.
+* [Copy Image Data](imported-media-copy-image-data.md) - Paint from an image file onto the canvas.

docs/assets/examples/createGraphics-offscreen.gif

@@ -66,7 +66,10 @@ end
 
 ## Related Examples
 
-* [Drawing Lines](animation-and-variables-drawing-lines.md)
-* [Conditions](animation-and-variables-conditions.md)
+* [Basic Pong](basic-pong.md) - A simple program demonstrating a basic implementation of pong with enemy AI player
+* [Drawing Lines](animation-and-variables-drawing-lines.md) - A drawing program demonstrating HSB colorMode
+* [Conditions](animation-and-variables-conditions.md) - Use if and else statements to make decisions while your sketch runs.
+
+---
 
 Animation with Events: Revised by [Darren Kessner](https://github.com/dkessner). Edited and maintained by [p5.js Contributors](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) and [Processing Foundation](https://processingfoundation.org/people). Adapted to L5 2025. Licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/). 

docs/assets/examples/daily-rituals.webp

@@ -4,7 +4,7 @@ If and else statements allow a [block of code](https://www.lua.org/pil/4.2.html)
 
 Comparison operators help to form conditions by comparing two values. In this example, the hue of the circle resets to zero when the hue is at least 360 because of the if statement on line 69. You can read more about [relational operators](https://www.lua.org/manual/5.2/manual.html#3.4.3) in the Programming in Lua book.
 
-Logical operators allow conditions to be combined. [and](https://www.lua.org/manual/5.2/manual.html#3.4.4) checks that both conditions are true. The circle in this example has a black fill when it is toward the horizontal center of the canvas, and it has a white fill when it is not. This is because of the if statement on line 45, which checks that the circle’s x position is at least 100 and also no more than 300. [or](https://www.lua.org/manual/5.2/manual.html#3.4.4) checks that at least one of the conditions is true. The circle reverses horizontal speed when it reaches the left or right edge of the canvas because of the if statement on line 75.
+Logical operators allow conditions to be combined. [and](https://www.lua.org/manual/5.2/manual.html#3.4.4) checks that both conditions are true. The circle in this example has a black fill when it is toward the horizontal center of the canvas, and it has a white fill when it is not. This is because of the if statement on line 52, which checks that the circle’s x position is at least 100 and also no more than 300. [or](https://www.lua.org/manual/5.2/manual.html#3.4.4) checks that at least one of the conditions is true. The circle reverses horizontal speed when it reaches the left or right edge of the canvas because of the if statement beginning on line 82.
 
 ![A square screen with a white stripe center and a black circle overlapping a colored circle that changes position and background color when the mouse is held down.](/assets/examples/conditions.gif)
 
@@ -111,7 +111,10 @@ end
 
 ## Related Examples
 
-* [Drawing Lines](animation-and-variables-drawing-lines.md)
-* [Animaton with Events](animation-and-variables-animation-with-events.md)
+* [Basic Pong](basic-pong.md) - A simple program demonstrating a basic implementation of pong with enemy AI player
+* [Drawing Lines](animation-and-variables-drawing-lines.md) - A drawing program demonstrating HSB colorMode
+* [Animaton with Events](animation-and-variables-animation-with-events.md) - Pause and resume animation.
+
+---
 
 Conditions: Inspired by [the Conditional Shapes Example by Prof. WM Harris](https://archive.p5js.org/examples/control-conditional-shapes.html). Revised by [Caleb Foss](https://github.com/calebfoss). From 2024 onwards, edited and maintained by [p5.js Contributors](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) and [Processing Foundation](https://processingfoundation.org/people). Adapted to L5 2025. Licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/). 

docs/examples/10print.md

@@ -42,9 +42,11 @@ end
 
 ## Related Examples
 
-* [Doodle Draw](doodle-draw.md)
-* [Animation with Events](animation-and-variables-animation-with-events.md)
-* [Conditions](animation-and-variables-conditions.md)
+* [Doodle Draw](doodle-draw.md) - A basic drawing program tracking mouse movements
+* [Animation with Events](animation-and-variables-animation-with-events.md) - Pause and resume animation.
+* [Conditions](animation-and-variables-conditions.md) - Use if and else statements to make decisions while your sketch runs.
+
+---
 
 Drawing Lines: Revised by [Darren Kessner](https://github.com/dkessner). Edited and maintained by [p5.js Contributors](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) and [Processing Foundation](https://processingfoundation.org/people). Adapted to L5 2025. Licensed under CC BY-NC-SA 4.0.
 

docs/examples/animation-and-variables-animation-with-events.md

@@ -59,6 +59,8 @@ function setup()
   }
 
   noCursor()
+  
+  description("A game of Pong between a human and computer AI player.")
 end
 
 function draw()
@@ -141,9 +143,17 @@ end
 
 ## Related References
 
-* [table](/table.md) - changing color modes
+* [if](/reference/if) 
+* [height](/reference/height)
+* [noCursor](/reference/noCursor)
+* [random()](/reference/random)
+* [table](/reference/table) 
+* [text()](/reference/text)
+* [width](/reference/width)
 
 ## Related Examples
 
-* [Drawing software](/examples/drawing-software)
+* [10Print](10print.md) - An implementation of the classic maze-drawing algorithm
+* [Animation with Events](animation-and-variables-animation-with-events.md) - Pause and resume animation.
+* [Conditions](animation-and-variables-conditions.md) - Use if and else statements to make decisions while your sketch runs.
 

docs/examples/animation-and-variables-conditions.md

@@ -0,0 +1,86 @@
+# createGraphics Offscreen
+
+Sometimes you may find a need for creating an offscreen canvas and drawing graphics to this hidden screen. For that we have the [createGraphics()](/reference/createGraphics) function.
+
+In this example, a type of drawing program, dragging with the mouse across the window will draw tiny photos wherever our mouse is located. If this was the entirety of the program, we'd have no need for createGraphics. A minimal implementation of this follows:
+
+```lua
+require("L5")
+
+function setup()
+  -- initalize a global array of images
+  img = {}
+  
+  -- load all of our images
+  for i=1,9 do
+    img[i] = loadImage("assets/"..i..".png")
+  end
+  
+  describe("Draws random images at mouse position when dragged in the window.")
+end
+
+function mouseDragged()
+  image(random(img),mouseX, mouseY, 50, 50)
+end
+```
+
+This program is fine, but what happens if we want a new color background each time we press down to draw a line or lay down photos? If we added `background()` to the `mouseDragged()` function than we would cover all of our previous drawing. To prevent this problem, we use an offscreen canvas. 
+
+In our `setup()` we load in photos to an array `img`. And we initialize our `offscreenCanvas` as a new graphics buffer for drawing with `createGraphics()`. 
+
+As draw runs continously, it grabs the offscreen canvas. We'll come back to that. In the mouseDragged event, as long as we are dragging the mouse we start drawing to the offscreen buffer, leaving a randomly-selected image at the equivalent of the mouse X and Y positions, but in the offscreen canvas. As we press down on the mouse, we draw a random color on the entire visible fullscreen. Then in draw, we take the offscreen graphics canvas and draw it as an image, starting at the top left 0, 0 position, effectively applying this offscreen doodle of images with transparent background on top of the color background. This allows us to maintain the design of drawing photos on a colored canvas without overwriting the entire window's contents.
+
+To extend the program, try changing the images, creating buttons to select images to draw with, add a secret scratch-off image finder or turn it into a coloring book game. You could even have multiple offscreen canvases and apply them to the window based on rules or randomness.
+
+![Drawing with photos on a colored background that changes on mouse press](/assets/examples/createGraphics-offscreen.gif "Drawing with photos on a colored background that changes on mouse press")
+
+```lua
+require("L5")
+
+function setup()
+  fullscreen()
+  windowTitle("Quick Pic Draw")
+  img = {}
+  for i = 1, 9 do
+   img[i] = loadImage("assets/"..i..".png")
+  end
+
+  background(0)
+  describe("Draw with pictures.")
+
+  -- Create offscreen canvas
+  offscreenCanvas = createGraphics(800, 600)
+end
+
+function draw()
+  image(offscreenCanvas:getCanvas(), 0, 0)
+end
+
+function mouseDragged()
+  offscreenCanvas:beginDraw()
+
+  image(random(img),mouseX,mouseY,50,50)
+
+  offscreenCanvas:endDraw()
+end
+
+function mousePressed()
+  background(random(255),random(255),random(255))
+end
+```
+
+## Related References
+
+* [createGraphics()](/reference/createGraphics)
+* [for](/reference/for)
+* [fullscreen()](/reference/fullscreen)
+* [image()](/reference/image)
+* [mouseDragged()](/reference/mouseDragged)
+* [mousePressed()](/reference/mousePressed)
+
+## Related Examples
+
+* [10print variations](10print.md) - An implementation of the classic maze-drawing algorithm
+* [Doodle draw](doodle-draw.md) - Basic implementation of a doodle drawing program
+* [Copy Image Data](imported-media-copy-image-data.md) - Paint from an image file onto the canvas.
+* [Daily Rituals](daily-rituals.md) - One a day daily ritual generator

docs/examples/animation-and-variables-drawing-lines.md

@@ -0,0 +1,66 @@
+# Daily Rituals
+
+This program is inspired by game designer Michael Brough's [VESPER.5](https://mightyvision.blogspot.com/2012/08/vesper5.html) (also see [this interview](https://www.gamedeveloper.com/design/road-to-the-igf-michael-brough-s-i-vesper-5-i-) with Michael), as well as the [instruction works](https://en.wikipedia.org/wiki/Instructions_for_Paintings) of Yoko Ono, the long-running exhibition series [Do It](https://curatorsintl.org/exhibitions/8593-do-it-1997) and the small exhibition and objects [#Fortune](http://stfj.net/index2.php?year=2013&project=art/2013/Fortune) by artist and game designer Zach Gage. 
+
+Daily rituals uses L5's [loadStrings()](/reference/loadStrings) function to load a text file `things.txt` with 31 meditative artistic tasks, one for each possible day of a month.
+
+The [text file can be downloaded](https://gist.github.com/lee2sman/43709f948a2c4be1132774e082a5ee0a) for use with the L5 program, or you can write your own. Be sure to place it in the same folder of your Daily Rituals project. It should have at least 31 lines of text. The font file [Frijole-Regular](https://fonts.google.com/specimen/Frijole) can be downloaded and placed in the same folder.
+
+The program labels the window with the current day, loads the font and sets up text styling. Then it loads the lines of text from the text file into an array with as many elements as total days in a month. Finally, it draws some random lines for texture, grabs the current day of the month, and displays the day's ritual. Try logging your daily practice.
+
+After trying out the program, consider changing the rituals, font, altering the time period, even building a way to save your own response to the ritual prompts, turning it into a game, or making your own totally new derivation on the idea.
+
+Enjoy it.
+
+![the text 'Close Your Eyes and Think of a Past Rainstorm - Sound, Taste. Name it.'](/assets/examples/daily-rituals.webp "The text: Close Your Eyes and Think of a Past Rainstorm - Sound, Taste. Name it.")
+
+```lua
+require("L5")
+
+function setup()
+  local date=(year().." "..month().." "..day())
+  
+  windowTitle("Daily ritual "..date)
+
+  f = loadFont("Frijole-Regular.ttf")
+
+  textFont(f)
+  textSize(48)
+
+  things = loadStrings("things.txt")
+
+  background("blue")
+
+  stroke("grey")
+
+  -- adds some texture
+  for i = 1, floor(random(12) + 1) do
+    strokeWeight(random(1, 12))
+    line(random(width), random(height), random(width), random(height))
+  end
+
+  fill("yellow")
+
+  -- activity by day of the month
+  local today = things[day()]
+
+  text(today, 25, 25, width - 50)
+end
+```
+
+## Related References
+
+* [day()](/reference/day)
+* [floor()](/reference/floor)
+* [loadFont()](/reference/loadFont)
+* [loadStrings()](/reference/loadStrings)
+* [local](/reference/local)
+* [random()](/reference/random)
+* [year()](/reference/year)
+
+## Related Examples
+
+* [10print variations](10print.md) - An implementation of the classic maze-drawing algorithm
+* [Animation with Events](animation-and-variables-animation-with-events.md) - Pause and resume animation.
+* [Conditions](animation-and-variables-conditions.md) - Use if and else statements to make decisions while your sketch runs.
+* [Copy Image Data](imported-media-copy-image-data.md) - Paint from an image file onto the canvas.