Skip to content

Add Greetings from p5.js 2.0 tutorial #920

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 30, 2025
Merged

Add Greetings from p5.js 2.0 tutorial #920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
166a031
Add Greetings from p5.js 2.0 tutorial
davepagurek Jul 27, 2025
5d36d10
Add new prop to type
davepagurek Jul 27, 2025
81443ab
Put p5.strands tutorial in 2.0 category
davepagurek Jul 30, 2025
76d3d3d
Shorten alt text
davepagurek Jul 30, 2025
1bd1b31
Rearrange sections, link to describe tutorial
davepagurek Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/CodeEmbed/frameForServer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface CodeBundle {
htmlBody?: string;
js?: string;
base?: string;
scripts?: string[]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 cool!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}

/*
Expand All @@ -29,6 +30,7 @@ ${code.css || ""}
<body>${code.htmlBody || ""}</body>
<script id="code" type="text/javascript">${code.js || ""}</script>
<script src="${cdnLibraryUrl}"></script>
${(code.scripts || []).map(src => `<script src="${src}"></script>`).join('\n')}
`.replace(/\u00A0/g, " ");

export interface CodeFrameProps {
Expand All @@ -38,6 +40,7 @@ export interface CodeFrameProps {
height?: number | string;
width?: number | string;
base?: string;
scripts?: string[]
}

/*
Expand Down Expand Up @@ -88,6 +91,7 @@ export const CodeFrameForServer = (props: CodeFrameProps) => {
css: props.cssCode,
htmlBody: props.htmlBodyCode,
base: props.base,
scripts: props.scripts,
})}
sandbox="allow-scripts allow-popups allow-modals allow-forms"
aria-label="Code Preview"
Expand Down
6 changes: 5 additions & 1 deletion src/components/CodeEmbed/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { Icon } from "../Icon";
* allowSideBySide?: boolean
* fullWidth?: boolean
* includeSound?: boolean
* scripts?: string[]
* }
*/
export const CodeEmbed = (props) => {
Expand Down Expand Up @@ -96,7 +97,10 @@ export const CodeEmbed = (props) => {
base={props.base}
frameRef={codeFrameRef}
lazyLoad={props.lazyLoad}
scripts={props.includeSound ? [cdnSoundUrl] : []}
scripts={[
...(props.includeSound ? [cdnSoundUrl] : []),
...(props.scripts ?? []),
]}
/>
</div>
<div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>
Expand Down
3 changes: 2 additions & 1 deletion src/components/EditableSketch/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface Props {
width?: number;
height?: number;
base?: string;
scripts?: string[];
}

const { props } = Astro;
Expand All @@ -22,4 +23,4 @@ const vertical = !previewWidth || previewWidth > 200

---

<CodeEmbed client:load initialValue={props.code.trim()} previewWidth={previewWidth} previewHeight={previewHeight} base={props.base} previewable editable allowSideBySide={!vertical} fullWidth={!vertical} />
<CodeEmbed client:load initialValue={props.code.trim()} previewWidth={previewWidth} previewHeight={previewHeight} base={props.base} previewable editable allowSideBySide={!vertical} fullWidth={!vertical} scripts={props.scripts} />
27 changes: 18 additions & 9 deletions src/components/SketchEmbed/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
---
import { CodeFrameForServer } from "../CodeEmbed/frameForServer";
import { CodeFrame } from "../CodeEmbed/frame";

interface Props {
code: string;
cssCode?: string;
bodyCode?: string;
width?: number | string;
height?: number | string;
scripts?: string[];
hideOffscreen?: boolean;
}

const defaultHeight = 400,
defaultWidth = "100%";

const { code, cssCode, bodyCode, height, width } = Astro.props;
const { code, cssCode, bodyCode, height, width, scripts, hideOffscreen } = Astro.props;
// A component that displays a full-width sketch without showing its code.
---

<CodeFrameForServer
jsCode={code}
cssCode={cssCode}
htmlBodyCode={bodyCode}
height={height || defaultHeight}
width={width || defaultWidth}
/>
const frameProps = {
jsCode: code,
cssCode: cssCode,
htmlBodyCode: bodyCode,
height: height || defaultHeight,
width: width || defaultWidth,
scripts,
};
---
{hideOffscreen ? (
<CodeFrame client:only {...frameProps} />
) : (
<CodeFrameForServer {...frameProps} />
)}
3 changes: 2 additions & 1 deletion src/content/tutorials/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import { z, defineCollection } from "astro:content";
import { relatedContent } from "../shared";

export const categories = [
"2.0",
"introduction",
"drawing",
"web-design",
"accessibility",
"criticalAI",
"p5-strands",
// "p5-strands",
"webgl",
"advanced",
] as const;
Expand Down
2 changes: 1 addition & 1 deletion src/content/tutorials/en/intro-to-p5-strands.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "p5.strands: Introduction to Shaders"
description: An introduction to shaders using p5.strands
category: p5-strands
category: "2.0"
categoryIndex: 0
featuredImage: ../images/featured/intro-to-p5-strands.png
featuredImageAlt: An abstract, cosmic scene with particles
Expand Down
Loading