Add Greetings from p5.js 2.0 tutorial #920
Conversation
| @@ -6,6 +6,7 @@ interface CodeBundle { | |||
| htmlBody?: string; | |||
| js?: string; | |||
| base?: string; | |||
| scripts?: string[] | |||
There was a problem hiding this comment.
Potential alt names: "include" "depedencies" - scripts is also totally ok! But I'm thinking how to distinguish the "script.js" concept which usually refers to the sketch from external includes
There was a problem hiding this comment.
I think includes/dependencies also work as names, although I'm going to refactor this separately I think -- there's an existing scripts prop in the CodeFrame component that I'd want to change to match, and I'd want to give that a little more time to to thoroughly test in the different spots it's used.
| --- | ||
| title: "Greetings from p5.js 2.0: Animation, Interaction, and Typography in 2D and 3D" | ||
| description: "Use new typography and 3D features of p5.js 2.0 to create an interactive postcard!" | ||
| category: "2.0" |
There was a problem hiding this comment.
Maybe makes sense to put the existing p5.strands tut in the 2.0 category too? I'm also working on the transition guide for this hypothetical/forthcoming category
|
|
||
| A common theme in old postcards is to have large block letters with local imagery showing through. Here's [an example of such a postcard](https://commons.wikimedia.org/wiki/File:Greetings_from_St._Paul,_Minnesota_postcard.jpg) from 1937: | ||
|
|
||
|  |
There was a problem hiding this comment.
Minor optional suggestion - alt text <=100 chars: "Postcard with "Greetings from St. Paul, Minnesota" in big letters with local buildings inside them." This is not a hard and fast rule but a UX convention suggested by web accessibility stewards
|
|
||
|  | ||
|
|
||
|  |
There was a problem hiding this comment.
Minor/optional "Screenshot of the p5.js Editor version picker showing a list of versions, and the latest 2.0 version selected"
|
|
||
| We've got a nice looking postcard already! But since this isn't going to be a physical postcard--we're going to put it on a website--we want viewers who use screen readers to be able to tell what's on the canvas. | ||
|
|
||
| To do so, we can use `describe()` in setup, and write a short, descriptive string about what we've drawn. |
There was a problem hiding this comment.
Minor/optional - thanks for including this! Could also link to https://p5js.org/tutorials/writing-accessible-canvas-descriptions/ for more info?
|
|
||
| We have a small canvas here, what would you do if you wanted to get a high-res image saved? | ||
|
|
||
| Well, first, I'll add `setAttributes({ antialias: true })` after the `createCanvas` line to make sure our edges are nice and smooth. |
There was a problem hiding this comment.
Minor/optional: consider switching this sectionand the previous? Most tutorials end in a full copy-able sketch that includes all functionality
| @@ -102,6 +102,7 @@ tutorialCategories: | |||
| "advanced": "Advanced Topics" | |||
| "p5-strands": p5.strands | |||
There was a problem hiding this comment.
Maybe this PR should also remove this one, for the time being
I've added a new tutorial for our upcoming SIGGRAPH Labs workshop!
I've added it to a new 2.0 category for now, for content new in 2.0 from 1.x. It's a little weird with just one thing for now, but this is also under the assumption that we'll want to put something in here about migrating from 1.x, and maybe also @ksen0's quilting tutorial too.
This also includes some updates to our UI components:
hideOffscreenoption that uses a live JS embed.Especially as the sketch gets long near the end, embedding the whole thing every time feels a little heavy, but I also want checkpoints where you can see the full sketch source code, so I've left them in for now. In the future it might be nice to have a component that highlights just a subset of the code that could then be expanded to show the whole thing, but that would take a little too much time for this tutorial for now.