Skip to content

Commit

Permalink
Merge pull request #62 from marcovicci/main
Browse files Browse the repository at this point in the history
Fixing #60 by removing .html targets
  • Loading branch information
hx2A authored Dec 22, 2022
2 parents 5933865 + a4b59f4 commit 7d7bd29
Show file tree
Hide file tree
Showing 9 changed files with 25 additions and 20 deletions.
13 changes: 9 additions & 4 deletions tutorials/intro_to_py5_and_python.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@
"\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",
"Get familiar with the [py5 reference](/reference/sketch) -- 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",
"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)). 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": "py5bot",
"display_name": "Python 3.10.5 64-bit",
"language": "python",
"name": "py5bot"
"name": "python3"
},
"language_info": {
"codemirror_mode": {
Expand All @@ -36,6 +36,11 @@
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.10.5"
},
"vscode": {
"interpreter": {
"hash": "e593ac106456af50ce7af38f9671c411b49d6cd90f9b885e167f0f594e09038c"
}
}
},
"nbformat": 4,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
"\n",
"There's a few more ways to fine-tune those outlines... `stroke_cap()` can change these outlines to be sharper or to stick out, and `stroke_join()` changes how they connect at corners. \n",
"\n",
"*Reference pages: [stroke_cap()](/reference/sketch_stroke_cap.html) and [stroke_join()](/reference/sketch_stroke_join.html)*\n",
"*Reference pages: [stroke_cap()](/reference/sketch_stroke_cap) and [stroke_join()](/reference/sketch_stroke_join)*\n",
"\n",
"## background colors\n",
"\n",
Expand Down Expand Up @@ -253,7 +253,7 @@
"\n",
"In HSB mode, that bright red color we represented as `fill(255, 0, 0)` would instead be `fill(0, 100, 100)` or `fill(360, 100, 100)` - since the hue range is \"circular\" and loops back in on itself, either will work. That's a color at the red point of the hue range, with maximum brightness and saturation. Why would you want to use HSB? Think again about a program that might have to change its colors while it runs. If you could simply add to the number representing hue and cycle through the rainbow that way, it would be a lot easier than manually working out how to do that with RGB values!\n",
"\n",
"*Reference pages: [color_mode()](/reference/sketch_color_mode.html)*\n",
"*Reference pages: [color_mode()](/reference/sketch_color_mode)*\n",
"\n",
"# other primitives\n",
"\n",
Expand Down Expand Up @@ -421,7 +421,7 @@
"\n",
"Note that the x, y position here is the center of the ellipse, not one of the edges. When we were drawing with the `rect()` function, earlier, that position was the top-left corner of the rectangle. You can change this behavior if you want - by default, py5 uses `ellipse_mode(CENTER)` and `rect_mode(CORNER)`. \n",
" \n",
"*Reference pages: [rect_mode()](/reference/sketch_rect_mode.html) and [ellipse_mode()](/reference/sketch_ellipse_mode.html)*\n",
"*Reference pages: [rect_mode()](/reference/sketch_rect_mode) and [ellipse_mode()](/reference/sketch_ellipse_mode)*\n",
"\n",
"`quad(x,y, x,y, x,y, x,y)` is a four-cornered or quadrilaterial shape, with each of those corners defined by a pair of x,y coordinates. It gives you more control over its shape than a `rect()` does."
]
Expand Down
6 changes: 3 additions & 3 deletions tutorials/intro_to_py5_and_python_02_drawing_2d_primitives.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ rect(250,100, 150,150)

There's a few more ways to fine-tune those outlines... `stroke_cap()` can change these outlines to be sharper or to stick out, and `stroke_join()` changes how they connect at corners.

*Reference pages: [stroke_cap()](/reference/sketch_stroke_cap.html) and [stroke_join()](/reference/sketch_stroke_join.html)*
*Reference pages: [stroke_cap()](/reference/sketch_stroke_cap) and [stroke_join()](/reference/sketch_stroke_join)*

## background colors

Expand Down Expand Up @@ -164,7 +164,7 @@ If you wanted to use HSB (hue, saturation, brightness) instead, you can use a fu

In HSB mode, that bright red color we represented as `fill(255, 0, 0)` would instead be `fill(0, 100, 100)` or `fill(360, 100, 100)` - since the hue range is "circular" and loops back in on itself, either will work. That's a color at the red point of the hue range, with maximum brightness and saturation. Why would you want to use HSB? Think again about a program that might have to change its colors while it runs. If you could simply add to the number representing hue and cycle through the rainbow that way, it would be a lot easier than manually working out how to do that with RGB values!

*Reference pages: [color_mode()](/reference/sketch_color_mode.html)*
*Reference pages: [color_mode()](/reference/sketch_color_mode)*

# other primitives

Expand Down Expand Up @@ -260,7 +260,7 @@ ellipse(100,100, 100,50)

Note that the x, y position here is the center of the ellipse, not one of the edges. When we were drawing with the `rect()` function, earlier, that position was the top-left corner of the rectangle. You can change this behavior if you want - by default, py5 uses `ellipse_mode(CENTER)` and `rect_mode(CORNER)`.

*Reference pages: [rect_mode()](/reference/sketch_rect_mode.html) and [ellipse_mode()](/reference/sketch_ellipse_mode.html)*
*Reference pages: [rect_mode()](/reference/sketch_rect_mode) and [ellipse_mode()](/reference/sketch_ellipse_mode)*

`quad(x,y, x,y, x,y, x,y)` is a four-cornered or quadrilaterial shape, with each of those corners defined by a pair of x,y coordinates. It gives you more control over its shape than a `rect()` does.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"\n",
"In the `image()` function, the first argument is the name of the image (that we defined just one line earlier), and the next two arguments are the x and y coordinates where you will place the image. `image()` also takes a variety of optional arguments - for example, a width and height at which to display the image. \n",
"\n",
"*Reference: [image()](/reference/sketch_image.html), [load_image()](/reference/sketch_load_image.html)*\n",
"*Reference: [image()](/reference/sketch_image), [load_image()](/reference/sketch_load_image)*\n",
"\n",
"## using Catmull-Rom splines\n",
"\n",
Expand Down Expand Up @@ -571,7 +571,7 @@
"\n",
"<img src=\"images/complex_shapes/vertices-beginshape.png\">\n",
"\n",
"*Reference: [begin_shape()](/reference/sketch_begin_shape.html)*\n",
"*Reference: [begin_shape()](/reference/sketch_begin_shape)*\n",
"\n",
"## Bézier vertices\n",
"\n",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ However you choose to load it into the sketch, if your grid image is in the righ

In the `image()` function, the first argument is the name of the image (that we defined just one line earlier), and the next two arguments are the x and y coordinates where you will place the image. `image()` also takes a variety of optional arguments - for example, a width and height at which to display the image.

*Reference: [image()](/reference/sketch_image.html), [load_image()](/reference/sketch_load_image.html)*
*Reference: [image()](/reference/sketch_image), [load_image()](/reference/sketch_load_image)*

## using Catmull-Rom splines

Expand Down Expand Up @@ -350,7 +350,7 @@ There are optional arguments for `begin_shape()` too, which you can provide to c

<img src="images/complex_shapes/vertices-beginshape.png">

*Reference: [begin_shape()](/reference/sketch_begin_shape.html)*
*Reference: [begin_shape()](/reference/sketch_begin_shape)*

## Bézier vertices

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1111,7 +1111,7 @@
"id": "1083a1cb",
"metadata": {},
"source": [
"Run this code, and start pushing keys. You'll notice that, for the most part, the output is human-readable. Exceptions will be special keys like SHIFT and CTRL, or the arrow keys. (For capturing the inputs of these special keys, you'll want to read up on how to use the [key_code variable](http://py5coding.org/reference/sketch_key_code.html) instead.) \n",
"Run this code, and start pushing keys. You'll notice that, for the most part, the output is human-readable. Exceptions will be special keys like SHIFT and CTRL, or the arrow keys. (For capturing the inputs of these special keys, you'll want to read up on how to use the [key_code variable](http://py5coding.org/reference/sketch_key_code) instead.) \n",
"\n",
"We can check if the key pressed is a digit using Python's `.isdigit()` method, and then use this to select a color if a corresponding color exists."
]
Expand Down Expand Up @@ -1504,7 +1504,7 @@
"\n",
"So far, we have the ability to draw lines in a few different colors, change the brush size, use keyboard shortcuts, and clear the whole digital canvas. What other features could you think of adding? \n",
"\n",
"If you're stuck on ideas, take a look at the variables we have already for inspiration. The *brushshape* variable is being used for the `stroke_cap()` -- you could add buttons to toggle between the different types of caps available. What about an eraser, more color swatches, a button to save your drawing using [the `save()` function](http://py5coding.org/reference/sketch_save.html), or even a color mixer? \n",
"If you're stuck on ideas, take a look at the variables we have already for inspiration. The *brushshape* variable is being used for the `stroke_cap()` -- you could add buttons to toggle between the different types of caps available. What about an eraser, more color swatches, a button to save your drawing using [the `save()` function](http://py5coding.org/reference/sketch_save), or even a color mixer? \n",
"\n",
"As you can see, code with a lot of functions and events can quickly become quite long and difficult to work through. Good work making it this far. In the next few lessons, we'll dig deeper into making your own functions, organizing your code into multiple files and other techniques that may make it all easier to wrangle."
]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -735,7 +735,7 @@ def key_pressed():
run_sketch()
```

Run this code, and start pushing keys. You'll notice that, for the most part, the output is human-readable. Exceptions will be special keys like SHIFT and CTRL, or the arrow keys. (For capturing the inputs of these special keys, you'll want to read up on how to use the [key_code variable](http://py5coding.org/reference/sketch_key_code.html) instead.)
Run this code, and start pushing keys. You'll notice that, for the most part, the output is human-readable. Exceptions will be special keys like SHIFT and CTRL, or the arrow keys. (For capturing the inputs of these special keys, you'll want to read up on how to use the [key_code variable](http://py5coding.org/reference/sketch_key_code) instead.)

We can check if the key pressed is a digit using Python's `.isdigit()` method, and then use this to select a color if a corresponding color exists.

Expand Down Expand Up @@ -1073,6 +1073,6 @@ How can you add an *if* statement that only runs the code inside if you click on

So far, we have the ability to draw lines in a few different colors, change the brush size, use keyboard shortcuts, and clear the whole digital canvas. What other features could you think of adding?

If you're stuck on ideas, take a look at the variables we have already for inspiration. The *brushshape* variable is being used for the `stroke_cap()` -- you could add buttons to toggle between the different types of caps available. What about an eraser, more color swatches, a button to save your drawing using [the `save()` function](http://py5coding.org/reference/sketch_save.html), or even a color mixer?
If you're stuck on ideas, take a look at the variables we have already for inspiration. The *brushshape* variable is being used for the `stroke_cap()` -- you could add buttons to toggle between the different types of caps available. What about an eraser, more color swatches, a button to save your drawing using [the `save()` function](http://py5coding.org/reference/sketch_save), or even a color mixer?

As you can see, code with a lot of functions and events can quickly become quite long and difficult to work through. Good work making it this far. In the next few lessons, we'll dig deeper into making your own functions, organizing your code into multiple files and other techniques that may make it all easier to wrangle.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"\n",
"As a quick refresher, let's take a look at the structure of one basic function, `rect()`. As you likely already know, this draws a rectangle on the screen at the positions you specify. \n",
"\n",
"If you take a look at [the documentation for the `rect()` function](http://py5coding.org/reference/sketch_rect.html), you'll see we make references to *parameters*, some of which are required (like where to actually place the rectangle, and how wide and tall it should be) and some of which are optional (like the radius for rounded corners). These parameters also have an expected data type... in this case, floats, which are numbers that may include decimal points. Trying to use some other data type, like strings of text (`rect('hello')`), would cause an error.\n",
"If you take a look at [the documentation for the `rect()` function](http://py5coding.org/reference/sketch_rect), you'll see we make references to *parameters*, some of which are required (like where to actually place the rectangle, and how wide and tall it should be) and some of which are optional (like the radius for rounded corners). These parameters also have an expected data type... in this case, floats, which are numbers that may include decimal points. Trying to use some other data type, like strings of text (`rect('hello')`), would cause an error.\n",
"\n",
"Essentially, functions are created with parameters that define the ways they work and the values they expect to receive. When we then use the function, or *call* it in our code, we refer to the values we give it as *arguments*, though you'll often see the terms used interchangeably. \n",
"\n",
Expand Down
2 changes: 1 addition & 1 deletion tutorials/intro_to_py5_and_python_16_custom_functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ In this tutorial, we'll first be examining the anatomy of a function (including

As a quick refresher, let's take a look at the structure of one basic function, `rect()`. As you likely already know, this draws a rectangle on the screen at the positions you specify.

If you take a look at [the documentation for the `rect()` function](http://py5coding.org/reference/sketch_rect.html), you'll see we make references to *parameters*, some of which are required (like where to actually place the rectangle, and how wide and tall it should be) and some of which are optional (like the radius for rounded corners). These parameters also have an expected data type... in this case, floats, which are numbers that may include decimal points. Trying to use some other data type, like strings of text (`rect('hello')`), would cause an error.
If you take a look at [the documentation for the `rect()` function](http://py5coding.org/reference/sketch_rect), you'll see we make references to *parameters*, some of which are required (like where to actually place the rectangle, and how wide and tall it should be) and some of which are optional (like the radius for rounded corners). These parameters also have an expected data type... in this case, floats, which are numbers that may include decimal points. Trying to use some other data type, like strings of text (`rect('hello')`), would cause an error.

Essentially, functions are created with parameters that define the ways they work and the values they expect to receive. When we then use the function, or *call* it in our code, we refer to the values we give it as *arguments*, though you'll often see the terms used interchangeably.

Expand Down

0 comments on commit 7d7bd29

Please sign in to comment.