Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
25 changes: 19 additions & 6 deletions src/content/text-detail/en/download.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import {
cdnLibraryUrl,
fullDownloadUrl,
libraryDownloadUrl,
minifiedLibraryDownloadUrl
minifiedLibraryDownloadUrl,
p5LatestUrl,
p5MajorVersion
} from '@src/globals/globals'

Welcome! This page contains the links to start using p5.js in the way that suits you best. Open the p5.js Editor in your web browser, or download the library to your own computer. We’ve tried to order the links to reflect what a beginner might want first, then what a more experienced programmer may be looking for.
Expand All @@ -30,11 +32,22 @@ These are downloads or links to the p5.js library file. No additional contents a
<LinkButton variant='download' url={minifiedLibraryDownloadUrl}> p5.min.js </LinkButton>
</div>

### Use p5.js from CDN
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing.
## Use p5.js from CDN

All versions of p5.js are hosted on a content delivery network (CDN), a geographically distributed group of servers. There are a couple different ways to access the JavaScript library from your code editor.

### Current Version of p5.js (recommended)

Use the following URL if you'd like to access the current version of p5.js.

<CodeContainerWithCopy>{cdnLibraryUrl}</CodeContainerWithCopy>

### Older versions
Looking for older versions?
Head over to GitHub for [earlier releases](https://github.com/processing/p5.js/releases) of p5.js.
### Latest Version of p5.js

Use the following URL if you'd like to ensure that you're always accessing the latest version of p5.js {p5MajorVersion}.x.

<CodeContainerWithCopy>{p5LatestUrl}</CodeContainerWithCopy>

### Other Versions of p5.js

If you'd like to access an earlier version of p5.js, you can look up the corresponding URL on [p5.js' jsDelivr webpage](https://www.jsdelivr.com/package/npm/p5).
4 changes: 4 additions & 0 deletions src/globals/globals.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ export const cdnSoundUrl =
(!!import.meta.env?.PUBLIC_P5_LIBRARY_PATH || p5Version.startsWith('2'))
? `https://cdn.jsdelivr.net/npm/p5.sound@${p5SoundVersion}/dist/p5.sound.min.js` as const
: `https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/addons/p5.sound.min.js` as const
export const p5MajorVersion =
p5Version.split('.')[0];
export const p5LatestUrl =
`https://cdn.jsdelivr.net/npm/p5@${p5Version.split('.')[0]}/lib/p5.min.js` as const;
export const cdnWebGPUUrl =
import.meta.env?.PUBLIC_P5_WEBGPU_LIBRARY_PATH ||
(`https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/p5.webgpu.min.js` as const);
Loading