Merge pull request #65 from marcovicci/main

Fixing #61 and #63 :)

tutorials/intro_to_py5_and_python_01.ipynb

@@ -0,0 +1,48 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "1dd0ceae",
+   "metadata": {},
+   "source": [
+    "# intro to py5 and python\n",
+    "\n",
+    "These tutorials offer a path down a few topics of interest for a complete beginner to Python (and to py5). No external knowledge is assumed, and whenever possible, they have been written specifically so that they can be enjoyed in any order. You might find some of them much more challenging, and some extremely straightforward. \n",
+    "\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](/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](/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."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3.10.5 64-bit",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.5"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "e593ac106456af50ce7af38f9671c411b49d6cd90f9b885e167f0f594e09038c"
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

tutorials/intro_to_py5_and_python_03_variables_and_data_types.ipynb

@@ -141,7 +141,7 @@
     "y = 30\n",
     "w = 20\n",
     "h = w\n",
-    "<img srect(x,y, w,h)"
+    "rect(x,y, w,h)"
    ]
   },
   {

tutorials/intro_to_py5_and_python_03_variables_and_data_types.md

@@ -66,7 +66,7 @@ x = 1 # Declaring a variable called x and assigning 1 to it
 y = 30
 w = 20
 h = w
-<img srect(x,y, w,h)
+rect(x,y, w,h)
 ```
 
 <img src='images/variables/rect.png'>

tutorials/intro_to_py5_and_python_04_drawing_complex_shapes.ipynb

@@ -15,6 +15,7 @@
     "\n",
     "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.\n",
     "\n",
+    "<img src=\"images/complex_shapes/grid.png\">\n",
     "<a href=\"images/complex_shapes/grid.png\">grid.png</a>\n",
     "\n",
     "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!) \n",

tutorials/intro_to_py5_and_python_04_drawing_complex_shapes.md

@@ -22,6 +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.
 
+<img src="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!) 

tutorials/intro_to_py5_and_python_11_trigonometry_for_animation.ipynb

@@ -763,7 +763,7 @@
    "source": [
     "If you run this code, you'll also notice that both `sin()` and `cos()` return 0.7. At a theta value of 45 degrees, sine and cosine are equal. These values will diverge as theta changes, with perfectly opposite values at 135 degrees. \n",
     "\n",
-    "<img src=\"images/trigonometry_for_animation/unit-circles\">\n",
+    "<img src=\"images/trigonometry_for_animation/unit-circles.svg\">\n",
     "\n",
     "Here's a lovely visualization of the way these values change along with the angle of theta:\n",
     "\n",

tutorials/intro_to_py5_and_python_11_trigonometry_for_animation.md

@@ -111,7 +111,7 @@ run_sketch()
 
 If you run this code, you'll also notice that both `sin()` and `cos()` return 0.7. At a theta value of 45 degrees, sine and cosine are equal. These values will diverge as theta changes, with perfectly opposite values at 135 degrees. 
 
-<img src="images/trigonometry_for_animation/unit-circles">
+<img src="images/trigonometry_for_animation/unit-circles.svg">
 
 Here's a lovely visualization of the way these values change along with the angle of theta:
 

tutorials/intro_to_py5_and_python_17_object_oriented_programming.ipynb

@@ -65,9 +65,9 @@
    "id": "dddc9f3d",
    "metadata": {},
    "source": [
-    "You might save this file as *amoeba.py*, since its only purpose will be defining the Amoeba class. That strange looking method, `__init__()`, is automatically called when the amoeba is actually created.\n",
+    "You might save this file as *`amoeba.py`*, since its only purpose will be defining the Amoeba class. That strange looking method, `__init__()`, is automatically called when the amoeba is actually created.\n",
     "\n",
-    "We'll also be creating a sketch for everything else we're planning on doing, like setting up a background color and spawning our amoebas. I've named mine *microscope.py*, since the experience will be not unlike looking into a microscope focused on a slide. Either way, the very first thing I'll be doing is importing the Amoeba class I've just created (and put in a file called amoeba.py). \n",
+    "We'll also be creating a sketch for everything else we're planning on doing, like setting up a background color and spawning our amoebas. I've named mine *`microscope.py`*, since the experience will be not unlike looking into a microscope focused on a slide. Either way, the very first thing I'll be doing is importing the Amoeba class I've just created (and put in a file called *`amoeba.py`*). \n",
     "\n",
     "Next, we actually want to create an amoeba *object* from this class we defined. Since it's meant to represent a living thing (even a single-celled living thing), why not give this individual amoeba a name?"
    ]
@@ -138,15 +138,15 @@
    "id": "40efdc98",
    "metadata": {},
    "source": [
-    "No matter how you choose to format it, running the all-in-one code or your *microscope.py* file will print the line \"amoeba initialized\" to the console. We can't see it yet, but py5 has created a new amoeba object, which is of course based on the class we defined. To get some visual output associated with our amoeba, we're going to need to give it some attributes. \n",
+    "No matter how you choose to format it, running the all-in-one code or your *`microscope.py`* file will print the line \"amoeba initialized\" to the console. We can't see it yet, but py5 has created a new amoeba object, which is of course based on the class we defined. To get some visual output associated with our amoeba, we're going to need to give it some attributes. \n",
     "\n",
     "As discussed in the tutorial for creating your own functions, most functions (including methods) will have *parameters* defined when you create them, which correspond to *arguments* you provide whenever you use that function. Right now, when the amoeba is initialized and `__init__()` is run, it only has a single possible parameter, `self`. This parameter is used to store everything associated with a specific amoeba, like Bob, rather than amoebas as a class. Let's add a few more parameters into `__init__()`, and then pass them as arguments when we create Bob. \n",
     "\n",
     "First, we'll actually add those parameters to `__init__()`. Inside of the method, we'll take them and make sure they're applied to some *attributes* of `self`, in this case Bob. Once we've given Bob an attribute like `self.x`, we'll be able to reference it with `bob.x` and get that value back.\n",
     "\n",
     "Here's where things will start to get a bit more visual. We'll also add `setup()` and `draw()` into our sketch so that we can see the amoeba. If you'll recall from other tutorials, `setup()` runs once at the start of the sketch, and `draw()` runs every frame. \n",
     "\n",
-    "(The three sections below will correspond to amoeba.py, microscope.py, and an all-in-one file. Use whichever setup you prefer.)"
+    "(The three sections below will correspond to *`amoeba.py`*, *`microscope.py`*, and an all-in-one file. Use whichever setup you prefer.)"
    ]
   },
   {
@@ -576,7 +576,7 @@
    "source": [
     "There's one more change we'll have to make before we start letting our amoebas run around the screen. In the real world, an amoeba is not perfectly circular -- its surface ripples and distorts like a water balloon. We'll be replacing our `circle()` function with a series of Bezier curves to draw a wobbly amoeba. To stop us from having to calculate these points manually, we'll also be adding a new method to do a bit of that math for us. \n",
     "\n",
-    "This new `circle_point()` method will go inside our `Amoeba` class, and use the radius of the amoeba, plus a bit of clever trigonometry, to find us the right x and y positions. By passing it an argument based on the current frame count in our sketch, we'll get an amoeba that ripples and wiggles as time passes. You'll only need to modify your *amoeba.py* file (or the methods inside of the `Amoeba` class, if you're using a single file) to see the changes. \n",
+    "This new `circle_point()` method will go inside our `Amoeba` class, and use the radius of the amoeba, plus a bit of clever trigonometry, to find us the right x and y positions. By passing it an argument based on the current frame count in our sketch, we'll get an amoeba that ripples and wiggles as time passes. You'll only need to modify your *`amoeba.py`* file (or the methods inside of the `Amoeba` class, if you're using a single file) to see the changes. \n",
     "\n",
     "One important thing to note: below, when we use `frame_count` to get the current number of elapsed frames, we actually write `cs.frame_count` because we've defined `cs` as the *current sketch* at the top of the window. If you're working in a single file, omit this `cs.` reference."
    ]
@@ -686,6 +686,11 @@
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
    "version": "3.10.5"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "e593ac106456af50ce7af38f9671c411b49d6cd90f9b885e167f0f594e09038c"
+   }
   }
  },
  "nbformat": 4,

tutorials/intro_to_py5_and_python_17_object_oriented_programming.md

@@ -60,9 +60,9 @@ class Amoeba():
         print('amoeba initialized')
 ```
 
-You might save this file as *amoeba.py*, since its only purpose will be defining the Amoeba class. That strange looking method, `__init__()`, is automatically called when the amoeba is actually created.
+You might save this file as *`amoeba.py`*, since its only purpose will be defining the Amoeba class. That strange looking method, `__init__()`, is automatically called when the amoeba is actually created.
 
-We'll also be creating a sketch for everything else we're planning on doing, like setting up a background color and spawning our amoebas. I've named mine *microscope.py*, since the experience will be not unlike looking into a microscope focused on a slide. Either way, the very first thing I'll be doing is importing the Amoeba class I've just created (and put in a file called amoeba.py). 
+We'll also be creating a sketch for everything else we're planning on doing, like setting up a background color and spawning our amoebas. I've named mine *`microscope.py`*, since the experience will be not unlike looking into a microscope focused on a slide. Either way, the very first thing I'll be doing is importing the Amoeba class I've just created (and put in a file called *`amoeba.py`*). 
 
 Next, we actually want to create an amoeba *object* from this class we defined. Since it's meant to represent a living thing (even a single-celled living thing), why not give this individual amoeba a name?
 
@@ -89,15 +89,15 @@ class Amoeba():
 bob = Amoeba()
 ```
 
-No matter how you choose to format it, running the all-in-one code or your *microscope.py* file will print the line "amoeba initialized" to the console. We can't see it yet, but py5 has created a new amoeba object, which is of course based on the class we defined. To get some visual output associated with our amoeba, we're going to need to give it some attributes. 
+No matter how you choose to format it, running the all-in-one code or your *`microscope.py`* file will print the line "amoeba initialized" to the console. We can't see it yet, but py5 has created a new amoeba object, which is of course based on the class we defined. To get some visual output associated with our amoeba, we're going to need to give it some attributes. 
 
 As discussed in the tutorial for creating your own functions, most functions (including methods) will have *parameters* defined when you create them, which correspond to *arguments* you provide whenever you use that function. Right now, when the amoeba is initialized and `__init__()` is run, it only has a single possible parameter, `self`. This parameter is used to store everything associated with a specific amoeba, like Bob, rather than amoebas as a class. Let's add a few more parameters into `__init__()`, and then pass them as arguments when we create Bob. 
 
 First, we'll actually add those parameters to `__init__()`. Inside of the method, we'll take them and make sure they're applied to some *attributes* of `self`, in this case Bob. Once we've given Bob an attribute like `self.x`, we'll be able to reference it with `bob.x` and get that value back.
 
 Here's where things will start to get a bit more visual. We'll also add `setup()` and `draw()` into our sketch so that we can see the amoeba. If you'll recall from other tutorials, `setup()` runs once at the start of the sketch, and `draw()` runs every frame. 
 
-(The three sections below will correspond to amoeba.py, microscope.py, and an all-in-one file. Use whichever setup you prefer.)
+(The three sections below will correspond to *`amoeba.py`*, *`microscope.py`*, and an all-in-one file. Use whichever setup you prefer.)
 
 ```{code-cell} ipython3
 # amoeba.py
@@ -431,7 +431,7 @@ def draw():
 
 There's one more change we'll have to make before we start letting our amoebas run around the screen. In the real world, an amoeba is not perfectly circular -- its surface ripples and distorts like a water balloon. We'll be replacing our `circle()` function with a series of Bezier curves to draw a wobbly amoeba. To stop us from having to calculate these points manually, we'll also be adding a new method to do a bit of that math for us. 
 
-This new `circle_point()` method will go inside our `Amoeba` class, and use the radius of the amoeba, plus a bit of clever trigonometry, to find us the right x and y positions. By passing it an argument based on the current frame count in our sketch, we'll get an amoeba that ripples and wiggles as time passes. You'll only need to modify your *amoeba.py* file (or the methods inside of the `Amoeba` class, if you're using a single file) to see the changes. 
+This new `circle_point()` method will go inside our `Amoeba` class, and use the radius of the amoeba, plus a bit of clever trigonometry, to find us the right x and y positions. By passing it an argument based on the current frame count in our sketch, we'll get an amoeba that ripples and wiggles as time passes. You'll only need to modify your *`amoeba.py`* file (or the methods inside of the `Amoeba` class, if you're using a single file) to see the changes. 
 
 One important thing to note: below, when we use `frame_count` to get the current number of elapsed frames, we actually write `cs.frame_count` because we've defined `cs` as the *current sketch* at the top of the window. If you're working in a single file, omit this `cs.` reference.
 

tutorials/intro_to_py5_and_python_18_py5vector_movement.ipynb

@@ -1064,6 +1064,11 @@
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
    "version": "3.10.5"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "e593ac106456af50ce7af38f9671c411b49d6cd90f9b885e167f0f594e09038c"
+   }
   }
  },
  "nbformat": 4,

tutorials/intro_to_py5_and_python_19_physics_simulation.ipynb

@@ -761,6 +761,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.ipynb

@@ -17,6 +17,12 @@
     "\n",
     "Before we draw anything, or even change the renderer to P3D, we need to talk about how we position objects in 3D space. First, we'll have to look beyond the `x, y` positioning system, since it only accounts for two dimensions. In a 3D space, we'll be using `x, y, z` positioning to place objects. The Z axis is our missing third dimension. A negative Z value will move a 3D object \"farther away\" from the viewer, and a positive Z value will move it \"closer\" to the viewer. \n",
     "\n",
+    "It's important to note that this system is not universal! The way that the Z axis works in py5 is not, for example, the way that it works in the interface OpenGL. py5 is a \"left-handed\" coordinate system, and OpenGL is \"right-handed\". What does this mean? If you use your right hand, then point your index finger along the Y axis (upwards) and your thumb along the X axis, then bend your middle finger, it will be pointing along the Z axis, towards a \"positive\" value for a right-handed system. For a left-handed system, you can do the same thing with your left hand. The right-hand rule is even depicted on one of the banknotes for the Swiss franc:\n",
+    "\n",
+    "<img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/CHF_200_9_front.jpg/277px-CHF_200_9_front.jpg\">\n",
+    "\n",
+    "*Front of the Swiss 200-franc banknote, ninth series (issued in 2018), from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:CHF_200_9_front.jpg)*\n",
+    "\n",
     "However, we also need to address the expectations you may have on *how* you can position these objects in 3D space. When drawing a 2D object, like a `rect()`, you typically pass it arguments to position it, as well as to size it.\n",
     "\n",
     "```\n",
@@ -895,9 +901,9 @@
    "formats": "ipynb,md:myst"
   },
   "kernelspec": {
-   "display_name": "Python 3.10.5 64-bit",
+   "display_name": "py5",
    "language": "python",
-   "name": "python3"
+   "name": "py5"
   },
   "language_info": {
    "codemirror_mode": {