diff --git a/.gitignore b/.gitignore index 45ddf0ae..0efad7bb 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ site/ +.DS_Store \ No newline at end of file diff --git a/docs/.DS_Store b/docs/.DS_Store deleted file mode 100644 index 60cfb3e6..00000000 Binary files a/docs/.DS_Store and /dev/null differ diff --git a/docs/assets/tutorials/install/codium-extension.webp b/docs/assets/tutorials/install/codium-extension.webp new file mode 100644 index 00000000..b1bee155 Binary files /dev/null and b/docs/assets/tutorials/install/codium-extension.webp differ diff --git a/docs/assets/tutorials/install/run-l5.webp b/docs/assets/tutorials/install/run-l5.webp new file mode 100644 index 00000000..d813d81f Binary files /dev/null and b/docs/assets/tutorials/install/run-l5.webp differ diff --git a/docs/assets/tutorials/install/stop-l5.webp b/docs/assets/tutorials/install/stop-l5.webp new file mode 100644 index 00000000..80d05b89 Binary files /dev/null and b/docs/assets/tutorials/install/stop-l5.webp differ diff --git a/docs/download/index.md b/docs/download/index.md index d8ca46a3..06e6509e 100644 --- a/docs/download/index.md +++ b/docs/download/index.md @@ -6,6 +6,7 @@ L5 programs run using LÖVE (also called Love2d), a free, open-source framework. Covered by this download tutorial: +- Download and Install a text editor - Download and Install Love2d - Download and Open L5 Starter Folder diff --git a/docs/download/install-mac.md b/docs/download/install-mac.md index 6f7d2296..6f42e744 100644 --- a/docs/download/install-mac.md +++ b/docs/download/install-mac.md @@ -16,7 +16,16 @@ document.getElementById('yt').addEventListener('click', function(e) { ## Text and Screenshot Tutorial -1. Love is the underlying Framework that will allow L5 code to run on your computer. So we start by installing Love. Go to the [Love website](https://love2d.org) and click to download the 64-bit zipped Mac program. +### Install a Text Editor + +1. We will first need a text editor, which is where we write the actual L5 code on our computer. For Mac, we suggest downloading [VSCodium](https://vscodium.com/) or [VSCode](https://code.visualstudio.com/), but any preferred text editor is fine. **Note**: If you use iCloud, VSCodium will have significant lag and it is recommended to install VSCode instead. +2. Install the L5 extension by opening the extensions tab and search for L5 +![Open the extension menu on the left side and search L5 on the top](/assets/tutorials/install/codium-extension.webp "Open the extension menu on the left side and search L5 on the top") + + +### Install Love2d + +1. Love is the underlying Framework that will allow L5 code to run on your computer. Go to the [Love website](https://love2d.org) and click to download the 64-bit zipped Mac program. ![Love2d website with downloads](/assets/tutorials/install/mac1.webp "Love2d website with downloads") 2. Click **"Allow"** if it asks 'Do you want to allow downloads on "love2d.org"?' It should download to your *Downloads* folder by default. ![Alert box asking permission to download Love2d](/assets/tutorials/install/mac2.webp "Alert box asking permission to install Love2d") diff --git a/docs/download/running.md b/docs/download/running.md index fcb6e63b..87203d1c 100644 --- a/docs/download/running.md +++ b/docs/download/running.md @@ -4,6 +4,24 @@ There are two ways to run a L5 program -- one method is using the desktop and th IDEs such as ZeroBrane Studio, Sublime Text, VS Code, Notepad++, and SciTE all support launching LÖVE programs (the engine to run our L5 scripts), though require additional setup configuration not covered here. +## Using the L5 extension + +If you are using a text editor such as VSCodium or VSCode, you can install an extension that will allow you to run your sketches by pushing a button. + +First, in VSCodium or VSCode, open the extension menu and install L5: + +![Open the extension menu on the left side and search L5 on the top](/assets/tutorials/install/codium-extension.webp "Open the extension menu on the left side and search L5 on the top") + +Once it is installed and you have already created a `main.lua` file (or you downloaded the L5-starter folder), a new button appears in the bottom left corner. + +![Run L5 button in the bottom left corner](/assets/tutorials/install/run-l5.webp "Run L5 button in the bottom left corner") + +When you want to see your sketch in action, press "Run L5". You can close the window or push the "Stop" button to stop running your sketch. + +![Close the sketch by closing the window or by pressing Stop](/assets/tutorials/install/stop-l5.webp "Close the sketch by closing the window or by pressing Stop") + +You can read more about the settings of the extension in the [extension docs](https://github.com/L5lua/L5-vscode-extension#l5-extension). You can also download it directly from the [OpenVSX Marketplace](https://open-vsx.org/extension/l5lua/l5) or the [VS Marketplace](https://marketplace.visualstudio.com/items?itemName=l5.l5). + ## Running L5 from the desktop The easiest way to run your L5 program is to drag the **folder** containing your main.lua onto the Love2d application. Remember to drag the **folder** containing `main.lua`, and not `main.lua` itself. diff --git a/docs/reference/applyMatrix.md b/docs/reference/applyMatrix.md index 9a88b420..40ec9a96 100644 --- a/docs/reference/applyMatrix.md +++ b/docs/reference/applyMatrix.md @@ -4,7 +4,7 @@ Applies a transformation matrix to the coordinate system. Transformations such as translate(), rotate(), and scale() use matrix-vector multiplication behind the scenes. A table of numbers, called a matrix, encodes each transformation. The values in the matrix then multiply each point on the canvas, which is represented by a vector. -`applyMatrix()` allows for many transformations to be applied at once attempts to replicate the behavior of the p5.js implementation. +`applyMatrix()` allows for many transformations to be applied at once. Attempts to replicate the behavior of the p5.js implementation. There are two ways to call `applyMatrix()` in two dimensions. diff --git a/docs/reference/createGraphics.md b/docs/reference/createGraphics.md index 677c0229..7b61ada3 100644 --- a/docs/reference/createGraphics.md +++ b/docs/reference/createGraphics.md @@ -6,7 +6,7 @@ Creates an offscreen canvas that can be rendered to the window later. The first two parameters, `width` and `height`, are optional. They set the dimensions of the offscreen canvas object. For example, calling `createGraphics(900, 500)` creates an offscreen canvas that's 900×500 pixels. By default the offscreen canvas is the same size as the window. -Note that L5's createGraphics() implementation is similar to Processing rather than p5.js. All drawing to the offscreen buffer should happen between the `:beginDraw()` and `:endDraw()` methods and can be display in the window with `:getCanvas()`. +Note that L5's createGraphics() implementation is similar to Processing rather than p5.js. All drawing to the offscreen buffer should happen between the `:beginDraw()` and `:endDraw()` methods. ## Examples @@ -33,7 +33,7 @@ end function mousePressed() -- display offscreenCanvas on screen - image(offscreenCanvas:getCanvas(), 0,0,width,height) + image(offscreenCanvas, 0,0,width,height) end ``` diff --git a/docs/reference/imageMode.md b/docs/reference/imageMode.md index f0a42d90..23fc3232 100644 --- a/docs/reference/imageMode.md +++ b/docs/reference/imageMode.md @@ -84,7 +84,7 @@ imageMode(mode) | Parameter | | | - | -------------------------------------------------- | -| mode | Constant: either CORNER (default), CORNERS, CENTER, RADIUS | +| mode | Constant: either CORNER (default), CORNERS, CENTER | ## Related diff --git a/docs/reference/loadTable.md b/docs/reference/loadTable.md index 20be8673..3857426b 100644 --- a/docs/reference/loadTable.md +++ b/docs/reference/loadTable.md @@ -1,6 +1,6 @@ # loadTable() -Reads the contents of a file or URL and creates a table object with its values. The file's path should be specified relative to the sketch's folder. The file format can be a comma-separated (in CSV format), a tab-separated value (in TSV format), or a lua table (as a lua file). Table only looks for a header row if the 'header' option is included. +Reads the contents of a file and creates a table object with its values. The file's path should be specified relative to the sketch's folder. The file format can be a comma-separated (in CSV format), a tab-separated value (in TSV format), or a lua table (as a lua file). Table only looks for a header row if the 'header' option is included. `#table` always returns the total rows in the imported table. diff --git a/docs/reference/scale.md b/docs/reference/scale.md index 46a42c95..2f1769ac 100644 --- a/docs/reference/scale.md +++ b/docs/reference/scale.md @@ -6,7 +6,7 @@ By default, shapes are drawn at their original scale. A rectangle that's 50 pixe The first way to call `scale()` uses numbers to set the amount of scaling. The first parameter, `s`, sets the amount to scale each axis. For example, calling `scale(2)` stretches the x-, y-, and z-axes by a factor of 2. The next parameter, `y` is optional. It sets the amount to scale the y-axis. For example, calling `scale(2, 0.5)` stretches the x-axis by a factor of 2, and shrinks the y-axis by a factor of 0.5. -By default, transformations accumulate. For example, calling `scale(1)` twice has the same effect as calling `scale(2)` once. The push() and pop() functions +By default, transformations accumulate. For example, calling `scale(2)` twice has the same effect as calling `scale(4)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `scale(2)` inside the draw() function won't cause shapes to grow continuously.