Merge pull request #59 from marcovicci/main

Fixing #54, #57 and #58 (hopefully)

tutorials/intro_to_py5_and_python_01.ipynb → tutorials/intro_to_py5_and_python.ipynb

@@ -11,9 +11,9 @@
     "\n",
     "When we're instructing a computer to run code, we cannot use regular human language. Instead, code takes the form of an *algorithm* or a series of algorithms which are handed to the computer. Although the word algorithm has had a lot of complex recent use, at its simplest form, an algorithm is just a set of rules or instructions for a computer to follow. Unlike most humans, if a computer is given unclear instructions, it can't problem-solve its way out of the situation - it will simply stop in its tracks. This means that small errors in the syntax (grammatical structure) of your code will cause many of the problems you run into, and it will get easier as time goes on to anticipate and correct them.\n",
     "\n",
-    "Get familiar with the [py5 reference](https://py5coding.org/reference/sketch.html) -- this will serve as your glossary for the functions, methods, and data types we discuss here. When you're using the py5 reference pages, you should be aware of the mode and the *syntax* (structure of code) being used, as these may differ from what is used in this tutorial. \n",
+    "Get familiar with the [py5 reference](/reference/sketch.html) -- this will serve as your glossary for the functions, methods, and data types we discuss here. When you're using the py5 reference pages, you should be aware of the mode and the *syntax* (structure of code) being used, as these may differ from what is used in this tutorial. \n",
     "\n",
-    "Firstly, we'll often be using something called *static mode*, which is a simple way to get started with py5 (especially if you're using [py5bot](http://py5coding.org/tutorials/misc_introduction_to_py5bot.html)). This mode is for making sketches which don't move or animate; they are *static* in terms of their state or motion. Later, animated sketches and sketches with user interaction will split code up into blocks labeled with functions like `setup()` and `draw()`, which facilitates animation. \n",
+    "Firstly, we'll often be using something called *static mode*, which is a simple way to get started with py5 (especially if you're using [py5bot](/tutorials/misc_introduction_to_py5bot.html)). This mode is for making sketches which don't move or animate; they are *static* in terms of their state or motion. Later, animated sketches and sketches with user interaction will split code up into blocks labeled with functions like `setup()` and `draw()`, which facilitates animation. \n",
     "\n",
     "You'll also notice that the reference seems to be starting a lot of functions and arguments with `py5.` because these functions are built into py5 itself, rather than being a feature of regular Python code. However, if you're using the py5bot or py5 kernels, or coding using an addon like the py5 mode for the Thonny IDE, you may be able to completely omit these references to py5."
    ]

tutorials/intro_to_py5_and_python_04_drawing_complex_shapes.md

@@ -22,7 +22,7 @@ Two types of curves well-known in mathematics and visualization are inherently u
 
 To better understand coordinates themselves, it can be easier if you have a visual guide. You can take this grid image and place it as a background in your py5 sketches (if you're using them somewhere on your computer) to make things easier. If you're using an online environment to play with py5, you'll instead want to link to the entire URL of the image so that py5 can find it.
 
-[grid.png](images/complex_shapes/grid.png)
+<a href="images/complex_shapes/grid.png">grid.png</a>
 
 You can place images in the same local folder as your py5 sketch in order to load them - `.gif`, `.jpg`, `.png` and `.tga` file types are all supported. (Many operating systems hide file extensions by default, so you're encouraged to hunt around and find out how to enable them in yours!) 
 
@@ -303,7 +303,7 @@ We've been calling these *points* throughout the rest of the tutorial, but it's
 
 <img src="images/complex_shapes/vertices-blender.png">
 
-We'll be using the same [grid image](images/complex_shapes/grid.png) as our background while we experiment with vertices, so either keep it in the same folder or go ahead and call it by its entire URL.
+We'll be using the same <a href="images/complex_shapes/grid.png">grid image</a> as our background while we experiment with vertices, so either keep it in the same folder or go ahead and call it by its entire URL.
 
 There are two shape functions we'll be introducing here that are a bit unfamiliar, `begin_shape()` and `end_shape()`. You can think of using `begin_shape()` as being like hitting play on a recorder, and `end_shape()` is when you hit stop. Between those functions, we use the `vertex()` function to draw our individual points. `end_shape()` can also take optional arguments - for example, by using CLOSE, we can make sure it automatically closes the shape off once we're done.
 
@@ -362,7 +362,7 @@ bezierVertex(control_point_1_x, control_point_1_y,
              vertex_point_2_x, vertex_point_2_y)
 ```
 
-We'll be using image reference for the following shapes. It may be helpful to keep this image up or [save a copy](images/complex_shapes/vertices.png) to quickly reference. The light blue lines and circles represent our control points, and their connections to our Bézier vertices, so that we don't have to draw them ourselves.  
+We'll be using image reference for the following shapes. It may be helpful to keep this image up or <a href="images/complex_shapes/vertices.png">save a copy</a> to quickly reference. The light blue lines and circles represent our control points, and their connections to our Bézier vertices, so that we don't have to draw them ourselves.  
 
 <img src="images/complex_shapes/vertices.png">
 
@@ -405,7 +405,7 @@ end_shape()
 
 <img src="images/complex_shapes/shape3.png">
 
-If you go back and take a peek at that [reference image](images/complex_shapes/vertices.png), you can easily match the position of those light blue handles to the X and Y position of the control points in your actual code. 
+If you go back and take a peek at that <a href="images/complex_shapes/vertices.png">reference image</a>, you can easily match the position of those light blue handles to the X and Y position of the control points in your actual code. 
 
 ## heart
 
@@ -427,7 +427,7 @@ end_shape()
 
 <img src="images/complex_shapes/heart.png">
 
-Making the second half of the heart will be simple: you know that to close the shape, it will have to end where it began. Thus, the final `bezier_vertex()` will have to share its coordinates with the opening `vertex()`. To figure out what goes in the gaps, consult the [reference image](images/complex_shapes/vertices.png) again, and take a look at the position of the light blue handles and control points.
+Making the second half of the heart will be simple: you know that to close the shape, it will have to end where it began. Thus, the final `bezier_vertex()` will have to share its coordinates with the opening `vertex()`. To figure out what goes in the gaps, consult the <a href="images/complex_shapes/vertices.png">reference image</a> again, and take a look at the position of the light blue handles and control points.
 
 ```{code-cell} ipython3
 size(800,800)
@@ -446,7 +446,7 @@ end_shape()
 
 ## Chinese coin
 
-This shape (filled in with violet in the [reference image](images/complex_shapes/vertices.png)) is based on a metal coin with a square hole in it, first introduced in China many centuries ago. To make it, we'll not only be using `begin_shape()` and `end_shape()` to create the filled in areas, but new functions called `begin_contour()` and `end_contour()` to cut out the square hole. 
+This shape (filled in with violet in the <a href="images/complex_shapes/vertices.png">reference image</a>) is based on a metal coin with a square hole in it, first introduced in China many centuries ago. To make it, we'll not only be using `begin_shape()` and `end_shape()` to create the filled in areas, but new functions called `begin_contour()` and `end_contour()` to cut out the square hole. 
 
 Usually, we might draw a circle with the `ellipse()` function, but since we're required to use the shape functions here (so that we can cut a hole out of it) we'll have to make it out of `vertex()` and `bezier_vertex()` functions. To start with, we can build a diamond out of a few vertices:
 
@@ -547,7 +547,7 @@ end_shape()
 
 Time for another challenge!
 
-In addition to the [grid.png](images/complex_shapes/grid.png) image we're using to assist with drawing coordinates, you'll need this [beziers.png](images/complex_shapes/beziers.png) image to layer over it as a reference. Either make sure that both images are in the right place on your local computer (in the same folder as the sketch, or in a folder called DATA beside the sketch) or reference them using their complete URLs. 
+In addition to the <a href="images/complex_shapes/grid.png">grid.png</a> image we're using to assist with drawing coordinates, you'll need this <a href="images/complex_shapes/beziers.png">beziers.png</a> image to layer over it as a reference. Either make sure that both images are in the right place on your local computer (in the same folder as the sketch, or in a folder called DATA beside the sketch) or reference them using their complete URLs. 
 
 Here is the code you'll be using to set things up.
 
@@ -584,7 +584,7 @@ Either way, the bitten apple's symbology remains compelling.
 
 *Rob Janoff [Public domain], via [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Apple_Computer_Logo_rainbow.svg)*
 
-In addition to our [grid.png](images/complex_shapes/grid.png) image, you'll want to layer our [apple.png](images/complex_shapes/apple.png) over it, so either keep them in the same folder or go ahead and call them by their entire URLs. Use this code to get started:
+In addition to our <a href="images/complex_shapes/grid.png">grid.png</a> image, you'll want to layer our <a href="images/complex_shapes/apple.png">apple.png</a> over it, so either keep them in the same folder or go ahead and call them by their entire URLs. Use this code to get started:
 
 ```{code-cell} ipython3
 size(800,850)

tutorials/intro_to_py5_and_python_07_iteration_with_loops.ipynb

@@ -542,7 +542,7 @@
     "\n",
     "<img src=\"images/iteration_with_loops/iteration-for-loops-task.png\">\n",
     "\n",
-    "It may be a good idea to [save a copy](images/iteration_with_loops/iteration-for-loops-task.png) or keep it open to reference while you work on these tasks.\n",
+    "It may be a good idea to <a href=\"images/iteration_with_loops/iteration-for-loops-task.png\">save a copy</a> or keep it open to reference while you work on these tasks.\n",
     "\n",
     "The pale blue lines at each point of this image are each the first step in a for loop, with their initial coordinates given. Placing the other white lines within a for loop will be your challenge! \n",
     "\n",

tutorials/intro_to_py5_and_python_07_iteration_with_loops.md

@@ -249,7 +249,7 @@ For this task, you'll be recreating the following image:
 
 <img src="images/iteration_with_loops/iteration-for-loops-task.png">
 
-It may be a good idea to [save a copy](images/iteration_with_loops/iteration-for-loops-task.png) or keep it open to reference while you work on these tasks.
+It may be a good idea to <a href="images/iteration_with_loops/iteration-for-loops-task.png">save a copy</a> or keep it open to reference while you work on these tasks.
 
 The pale blue lines at each point of this image are each the first step in a for loop, with their initial coordinates given. Placing the other white lines within a for loop will be your challenge! 
 

tutorials/intro_to_py5_and_python_10_transformations_and_matrices.md

@@ -54,7 +54,7 @@ $\begin{bmatrix} 2 & 5 & 12 \\ 19 & 9 & 7 \end{bmatrix}$
 
 Digital images are essentially just grids of pixels, with both rows and columns, so matrices are extremely useful when manipulating computer graphics (though they're also used in mathematics and other sciences). We'll be learning how these work from a mathematical perspective first, and then you'll be introduced to the matrix functions in py5 - so things will get much easier. If all the math seems a little advanced, you can read through without implementing it in your own code, and you'll still understand a little better when we get to the next section, *matrices in py5*. 
 
-To help you out in visualizing the coordinates in your sketch, you'll want to use the following two images, [grid.png]("images/transformations_and_matrices/grid.png") and [grid-overlay.png](images/transformations_and_matrices/grid-overlay.png). You can save them in the same folder as your sketch, or reference them by their full URL. 
+To help you out in visualizing the coordinates in your sketch, you'll want to use the following two images, <a href="images/transformations_and_matrices/grid.png">grid.png</a> and <a href="images/transformations_and_matrices/grid-overlay.png">grid-overlay.png</a>. You can save them in the same folder as your sketch, or reference them by their full URL. 
 
 <img src="images/transformations_and_matrices/grid.png">
 
@@ -477,7 +477,7 @@ You now know more things than you ever cared to know about matrices. Note that w
 
 ## matrices in py5
 
-We'll be using our [grid.png]("images/transformations_and_matrices/grid.png") and [grid-overlay.png](images/transformations_and_matrices/grid-overlay.png) images again. You can save them in the same folder as your sketch, or reference them by their full URL. 
+We'll be using our <a href="images/transformations_and_matrices/grid.png">grid.png</a> and <a href="images/transformations_and_matrices/grid-overlay.png">grid-overlay.png</a> images again. You can save them in the same folder as your sketch, or reference them by their full URL. 
 
 At first, our code will look very familiar. We don't need to use a `quad()` here unless you're particularly keen to, since py5 will handle each matrix itself, without us needing to directly access any vertices!
 

tutorials/intro_to_py5_and_python_20_3d.ipynb

@@ -539,7 +539,7 @@
     "\n",
     "Using the `texture()` function inside of a custom shape, before you start drawing vertices, you can apply an image to the surface of a shape. In addition to loading the image (with `load_image()`) and applying it (with `texture()`), you'll have to pass some extra arguments to each vertex. By default, these extra arguments relate to the full dimensions of the image in pixels. You can use `texture_mode(NORMAL)` to switch to a mode where these arguments are \"normalized\" to a range from 0 to 1, or `texture_mode(DEFAULT)` to switch back.\n",
     "\n",
-    "Wrapping an image around 3D shapes is no trivial task. The example below uses a simple 2D triangle, though in a 3D space. I've elected to use the [grid.png](\"images/3d/grid.png\") image from previous tutorials here, but you could use any image of a sufficient size."
+    "Wrapping an image around 3D shapes is no trivial task. The example below uses a simple 2D triangle, though in a 3D space. I've elected to use the <a href=\"images/3d/grid.png\">grid.png</a> image from previous tutorials here, but you could use any image of a sufficient size."
    ]
   },
   {
@@ -591,7 +591,7 @@
     "\n",
     "## importing 3d models into py5\n",
     "\n",
-    "In addition to the (admittedly tedious) method of building 3D shapes using vertices, you can actually load 3D models into py5 with the `load_shape()` function! This function can take file formats of .svg or .obj, with the latter being used for 3D models. For the purposes of this demo, we're using Suzanne, the unofficial mascot of the 3D modeling program Blender. You can download [suzanne.obj](\"images/3d/suzanne.obj\") yourself and put her in the same folder as your sketch, or use any other 3D model in the right format. \n",
+    "In addition to the (admittedly tedious) method of building 3D shapes using vertices, you can actually load 3D models into py5 with the `load_shape()` function! This function can take file formats of .svg or .obj, with the latter being used for 3D models. For the purposes of this demo, we're using Suzanne, the unofficial mascot of the 3D modeling program Blender. You can download <a href=\"images/3d/suzanne.obj\">suzanne.obj</a> yourself and put her in the same folder as your sketch, or use any other 3D model in the right format. \n",
     "\n",
     "First, we load our .obj in the `setup()` block. You can use `load_shape()` (or `load_image()`, for that matter) inside of `draw()`, but it's slow and expensive in terms of processing power, so it's much better to load things into a variable ahead of time and just use them when needed. \n",
     "\n",
@@ -895,9 +895,9 @@
    "formats": "ipynb,md:myst"
   },
   "kernelspec": {
-   "display_name": "py5",
+   "display_name": "Python 3.10.5 64-bit",
    "language": "python",
-   "name": "py5"
+   "name": "python3"
   },
   "language_info": {
    "codemirror_mode": {
@@ -910,6 +910,11 @@
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
    "version": "3.10.5"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "e593ac106456af50ce7af38f9671c411b49d6cd90f9b885e167f0f594e09038c"
+   }
   }
  },
  "nbformat": 4,

tutorials/intro_to_py5_and_python_20_3d.md

@@ -298,7 +298,7 @@ run_sketch()
 
 Using the `texture()` function inside of a custom shape, before you start drawing vertices, you can apply an image to the surface of a shape. In addition to loading the image (with `load_image()`) and applying it (with `texture()`), you'll have to pass some extra arguments to each vertex. By default, these extra arguments relate to the full dimensions of the image in pixels. You can use `texture_mode(NORMAL)` to switch to a mode where these arguments are "normalized" to a range from 0 to 1, or `texture_mode(DEFAULT)` to switch back.
 
-Wrapping an image around 3D shapes is no trivial task. The example below uses a simple 2D triangle, though in a 3D space. I've elected to use the [grid.png]("images/3d/grid.png") image from previous tutorials here, but you could use any image of a sufficient size.
+Wrapping an image around 3D shapes is no trivial task. The example below uses a simple 2D triangle, though in a 3D space. I've elected to use the <a href="images/3d/grid.png">grid.png</a> image from previous tutorials here, but you could use any image of a sufficient size.
 
 ```{code-cell} ipython3
 x = 250
@@ -338,7 +338,7 @@ run_sketch()
 
 ## importing 3d models into py5
 
-In addition to the (admittedly tedious) method of building 3D shapes using vertices, you can actually load 3D models into py5 with the `load_shape()` function! This function can take file formats of .svg or .obj, with the latter being used for 3D models. For the purposes of this demo, we're using Suzanne, the unofficial mascot of the 3D modeling program Blender. You can download [suzanne.obj]("images/3d/suzanne.obj") yourself and put her in the same folder as your sketch, or use any other 3D model in the right format. 
+In addition to the (admittedly tedious) method of building 3D shapes using vertices, you can actually load 3D models into py5 with the `load_shape()` function! This function can take file formats of .svg or .obj, with the latter being used for 3D models. For the purposes of this demo, we're using Suzanne, the unofficial mascot of the 3D modeling program Blender. You can download <a href="images/3d/suzanne.obj">suzanne.obj</a> yourself and put her in the same folder as your sketch, or use any other 3D model in the right format. 
 
 First, we load our .obj in the `setup()` block. You can use `load_shape()` (or `load_image()`, for that matter) inside of `draw()`, but it's slow and expensive in terms of processing power, so it's much better to load things into a variable ahead of time and just use them when needed.