diff --git a/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md b/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md index de9a5ad..1d0fffc 100644 --- a/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md +++ b/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md @@ -76,8 +76,8 @@ 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/circle-grid-canvas.webp)](../../img/circle-grid-canvas.webp) +[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/circle-grid-canvas.webp "A good start!")](../../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: ``` javascript @@ -214,7 +214,9 @@ 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/circle-grid-line.webp)](../../img/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 "We have a line!")](../../img/circle-grid-line.webp) + And look at that! We have a line! ## Repeating rows @@ -287,7 +289,8 @@ 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/circle-grid-grid.webp)](../../img/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 "Beautiful!")](../../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 `` of index.html, @@ -447,5 +450,7 @@ 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/circle-grid-complete.webp)](../../img/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 "The finished article.")](../../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. diff --git a/public/css/index.css b/public/css/index.css index bd07f7f..2111daf 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -267,6 +267,9 @@ main > p > img, main > p > a > img { margin: 0; padding-bottom: var(--space-s); } +pre { + grid-column: 1 / span 12; +} p:last-child { margin-bottom: 0; } @@ -681,6 +684,7 @@ h2 + .header-anchor { /* Components */ article.post { grid-column: 1 / span 12; + container: article / inline-size; } /* Utilities */ diff --git a/public/img/circle-grid-canvas.webp b/public/img/circle-grid-canvas.webp index 73d587f..72a6d92 100644 Binary files a/public/img/circle-grid-canvas.webp and b/public/img/circle-grid-canvas.webp differ diff --git a/public/img/circle-grid-complete.webp b/public/img/circle-grid-complete.webp index 83c9696..4aa87ef 100644 Binary files a/public/img/circle-grid-complete.webp and b/public/img/circle-grid-complete.webp differ diff --git a/public/img/circle-grid-grid.webp b/public/img/circle-grid-grid.webp index 96c249e..6fbe12b 100644 Binary files a/public/img/circle-grid-grid.webp and b/public/img/circle-grid-grid.webp differ diff --git a/public/img/circle-grid-line.webp b/public/img/circle-grid-line.webp index b9719f2..15e67db 100644 Binary files a/public/img/circle-grid-line.webp and b/public/img/circle-grid-line.webp differ