n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change how passthrough works

Browse Source
This commit is contained in:
N-Upchurch
2023-08-06 19:52:01 -05:00
parent 2fff7685e8
commit 233e3e6e43
16 changed files with 88 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md
View File

@ -76,7 +76,7 @@ function setup() {
}
```
Now if we click the play icon at the top left of the Processing IDE, a browser window should open and load a page showing our sketch so far. We ought to see a viewport entirely covered with one large black canvas.
[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp)
[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/circle-grid-canvas.webp)](../../img/circle-grid-canvas.webp)
## Random results
To meet conditions two and three of our goal, we'll need a way to get random numbers. Let's write a quick function inside `setup()` to provide us with random integers:
@ -214,7 +214,7 @@ We can check that everything is working by calling our new function at the botto
``` javascript
generateCircleLine(10, 10, 20, 0, 5, 10, 10, 'x', [[255,255,255]]);
```
[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp)
[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/circle-grid-line.webp)](../../img/circle-grid-line.webp)
And look at that! We have a line!
## Repeating rows
@ -287,7 +287,7 @@ generateCircleGrid(
);
```
...to see the result:
[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)
[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/circle-grid-grid.webp)](../../img/circle-grid-grid.webp)
## SVG export
Looking back on our goals, we've accomplished all but one: SVG export. Happily, there's [a library](https://github.com/zenozeng/p5.js-svg) that makes this trivial. All we need to do is link the script in the `<head>` of index.html,
@ -447,5 +447,5 @@ function draw() {
## Et voilà
And we're done! Now you can tweak the parameters and make grids with all sorts of colors and size variations, and even export and edit them in Inkscape!
[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp)
[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/circle-grid-complete.webp)](../../img/circle-grid-complete.webp)
If you'd like to make this project even better, maybe consider implementing a GUI to adjust your grid paramaters, or adding some interactivity.