2.17.8

q5js · Jan 28, 2025 · b4f227a · b4f227a
1 parent 10290fb
commit b4f227a
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 107 deletions.
diff --git a/home/index.css b/home/index.css
@@ -38,17 +38,20 @@ body {
 	background-color: var(--brand-secondary);
 	color: var(--primary);
 	font-size: 20px;
+	font-family: 'adobe-heiti-std', monospace;
 }
 
 h2 {
 	color: var(--brand-primary);
 	text-shadow: 2px 2px 0 var(--brand-secondary);
-	font-family: monospace;
 	font-size: 32px;
+	margin-top: 8px;
+	margin-bottom: 0px;
 }
 
 p {
-	line-height: 1.3;
+	line-height: 1.5;
+	margin: 12px 0;
 }
 
 pre {
@@ -210,6 +213,7 @@ a {
 }
 
 #navLinks {
+	font-family: 'adobe-heiti-std', sans-serif;
 	box-sizing: border-box;
 	display: flex;
 	justify-content: center;

diff --git a/home/index.html b/home/index.html
@@ -11,6 +11,17 @@
 	<meta property="og:url" content="https://q5js.org">
 	<meta property="og:image" content="q5js_logo.webp">
 	<meta property="og:description" content="q5.js is a sequel to p5.js that's smaller and faster!">
+	<!-- load Adobe Heiti font -->
+	<script>
+		(function (d) {
+			var config = {
+				kitId: 'oqc5ofj',
+				scriptTimeout: 3000,
+				async: true
+			},
+				h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
+		})(document);
+	</script>
 </head>
 
 <body class="dark">
@@ -40,17 +51,16 @@
 	<div id="reel1" class="reel">
 		<md id="md1-0">
 <h2 id="create-art-with-q5js-🎨">Create art with q5.js! 🎨</h2>
-<p><strong>q5.js</strong> is a spiritual successor to the <a href="https://p5js.org" target="_blank">p5.js</a> and <a href="https://processing.org/" target="_blank">Processing Java</a> graphics libraries. ⭐️</p>
+<p><strong>q5.js</strong> is a sequel to the <a href="https://p5js.org" target="_blank">p5.js</a> and <a href="https://processing.org/" target="_blank">Processing Java</a> graphics libraries. ⭐️</p>
 <ul>
 <li>performance optimized for interactive art 🚀</li>
 <li>includes a brand new renderer powered by WebGPU 💪</li>
 <li>up to 32x faster than p5.js 🏎️</li>
-<li>HDR color support 🌈</li>
+<li>beginner friendly API and documentation 📚</li>
 <li>compatible with popular addons, including <a href="https://p5js.org/reference/#/libraries/p5.sound" target="_blank">p5.sound</a> and <a href="https://p5play.org" target="_blank">p5play</a> 🎮</li>
-<li>no dependencies, less than 100kb minified 📦</li>
-<li>LGPL licensed (just like p5.js) 🆓</li>
+<li>no dependencies, ~100kb minified 📦</li>
+<li>100% free to use under the LGPL (just like p5.js) 🆓</li>
 </ul>
-<p>q5.js was designed to make creative coding fun and accessible for a new generation of artists, designers, educators, and beginners. 🤝</p>
 </md>
 		<md id="md1-1">
 <p>If you're already familiar with p5, you'll find yourself right at home with q5. 🏡</p>
@@ -168,7 +178,7 @@ <h2 id="sound-on-🔊">Sound On 🔊</h2>
 			<md id="md10-2">
 <h2 id="lightweight-🪶">Lightweight 🪶</h2>
 <p>p5.js and p5.sound.js have a combined size of 5.6MB! ⚠️</p>
-<p>q5.js is &lt;140kb, that's 98% smaller. 🌳</p>
+<p>q5.js is ~140kb, that's 98% smaller. 🌳</p>
 <p>For extremely lightweight use, load only the features you need from the <a href="https://github.com/q5js/q5.js/tree/main/src" target="_blank">q5 source folder</a>. Load q5 using script tags or as JavaScript modules. 📦</p>
 </md>
 			<md id="md10-3">
@@ -182,7 +192,7 @@ <h2 id="frame-your-art-🖼️">Frame your Art 🖼️</h2>
 	<div id="reel20" class="reel">
 		<md id="md20-0">
 <h2 id="credits-🌟">Credits 🌟</h2>
-<p>This project aims to be the spiritual successor to the incredible work done by <a href="https://benfry.com" target="_blank">Ben Fry</a> and <a href="https://x.com/REAS" target="_blank">Casey Reas</a> on Java <a href="https://processingfoundation.org/" target="_blank">Processing</a>, <a href="http://lauren-mccarthy.com" target="_blank">Lauren McCarthy</a>'s work on <a href="https://p5js.org" target="_blank">p5.js</a>, and all contributors to these projects.</p>
+<p>This project aims to continue the legacy of the incredible work done by <a href="https://benfry.com" target="_blank">Ben Fry</a> and <a href="https://x.com/REAS" target="_blank">Casey Reas</a> on Java <a href="https://processingfoundation.org/" target="_blank">Processing</a>, <a href="http://lauren-mccarthy.com" target="_blank">Lauren McCarthy</a>'s work on <a href="https://p5js.org" target="_blank">p5.js</a>, and all contributors to these projects.</p>
 <p>The original <a href="https://github.com/LingDong-/q5xjs" target="_blank">q5xjs (v0)</a> was created by <a href="https://github.com/LingDong-" target="_blank">@LingDong~</a> and released under the public domain Unlicense license. We forked and significantly extended the abandoned codebase.</p>
 <p>q5.js v2 is open source under the LGPLv3, created and actively maintained by the q5 team: <a href="https://github.com/quinton-ashley" target="_blank">@quinton-ashley</a> and <a href="https://github.com/Tezumie" target="_blank">@Tezumie</a>.</p>
 </md>
@@ -289,7 +299,4 @@ <h2 id="credits-🌟">Credits 🌟</h2>
 
 
 
-
-
-
 </body></html>
diff --git a/lang/en/home/index.md b/lang/en/home/index.md
@@ -2,17 +2,15 @@
 
 ## Create art with q5.js! 🎨
 
-**q5.js** is a spiritual successor to the [p5.js](https://p5js.org) and [Processing Java](https://processing.org/) graphics libraries. ⭐️
+**q5.js** is a sequel to the [p5.js](https://p5js.org) and [Processing Java](https://processing.org/) graphics libraries. ⭐️
 
 - performance optimized for interactive art 🚀
 - includes a brand new renderer powered by WebGPU 💪
 - up to 32x faster than p5.js 🏎️
-- HDR color support 🌈
+- beginner friendly API and documentation 📚
 - compatible with popular addons, including [p5.sound](https://p5js.org/reference/#/libraries/p5.sound) and [p5play](https://p5play.org) 🎮
 - no dependencies, ~100kb minified 📦
-- LGPL licensed (just like p5.js) 🆓
-
-q5.js was designed to make creative coding fun and accessible for a new generation of artists, designers, educators, and beginners. 🤝
+- 100% free to use under the LGPL (just like p5.js) 🆓
 
 # 1-1
 
@@ -82,7 +80,7 @@ q5.js includes sound loading, playback, and basic mixing by default. 🎚️
 
 p5.js and p5.sound.js have a combined size of 5.6MB! ⚠️
 
-q5.js is <140kb, that's 98% smaller. 🌳
+q5.js is ~140kb, that's 98% smaller. 🌳
 
 For extremely lightweight use, load only the features you need from the [q5 source folder](https://github.com/q5js/q5.js/tree/main/src). Load q5 using script tags or as JavaScript modules. 📦
 
@@ -98,7 +96,7 @@ Make a canvas be centered or fill the screen without clipping or changing the as
 
 ## Credits 🌟
 
-This project aims to be the spiritual successor to the incredible work done by [Ben Fry](https://benfry.com) and [Casey Reas](https://x.com/REAS) on Java [Processing](https://processingfoundation.org/), [Lauren McCarthy](http://lauren-mccarthy.com)'s work on [p5.js](https://p5js.org), and all contributors to these projects.
+This project aims to continue the legacy of the incredible work done by [Ben Fry](https://benfry.com) and [Casey Reas](https://x.com/REAS) on Java [Processing](https://processingfoundation.org/), [Lauren McCarthy](http://lauren-mccarthy.com)'s work on [p5.js](https://p5js.org), and all contributors to these projects.
 
 The original [q5xjs (v0)](https://github.com/LingDong-/q5xjs) was created by [@LingDong~](https://github.com/LingDong-) and released under the public domain Unlicense license. We forked and significantly extended the abandoned codebase.
 

diff --git a/learn/docs.js b/learn/docs.js
@@ -85,8 +85,9 @@ function stripParams(params) {
 function convertTSDefToMarkdown(data) {
 	data = data.replaceAll('https://q5js.org/learn', '.');
 
+	let markdownCode = '';
+
 	let lines = data.split('\n').slice(7, -4),
-		markdownCode = '',
 		insideJSDoc = false,
 		insideParams = false,
 		insideProps = false,
@@ -152,6 +153,7 @@ function convertTSDefToMarkdown(data) {
 				jsDocBuffer += line + '\n';
 			}
 		} else if (!line) {
+			if (jsDocBuffer.length > 0) markdownCode += jsDocBuffer;
 			markdownCode += '\n';
 		} else if (line.startsWith('//')) {
 			let sectionTitle = line.slice(3);
@@ -167,6 +169,7 @@ function convertTSDefToMarkdown(data) {
 			markdownCode += jsDocBuffer + '\n\n';
 			jsDocBuffer = '';
 		} else if (inClassDef && line.startsWith('static')) {
+			jsDocBuffer = '';
 			continue;
 		} else if (line.includes('(')) {
 			let funcMatch = line.match(/(\w+)\s*\((.*)\)\s*:\s*(\w+)/);
@@ -733,7 +736,8 @@ function performSearch(searchText) {
 
 			resultElement.addEventListener('click', () => {
 				searchResultsContainer.innerHTML = '';
-				navigateTo(result.id);
+				let { sectionId, subsectionId } = findSectionAndSubsection(result.id);
+				navigateTo(sectionId, subsectionId);
 				searchInput.value = '';
 				searchResultsContainer.innerHTML = '';
 				displayPromptMessage('Start typing to search the documentation');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.17.7",
+	"version": "2.17.8",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

diff --git a/q5.d.ts b/q5.d.ts
@@ -7,6 +7,20 @@
 declare global {
 	// ⭐️ core
 
+	/** ⭐️
+	 * Welcome to q5's documentation! ☺️
+	 * 
+	 * First time coding? Check out the [q5 Beginner's Guide to JavaScript](https://github.com/q5js/q5.js/wiki/q5-Beginner's-Guide-to-JavaScript).
+	 * 
+	 * On these Learn pages you'll find concise descriptions for
+	 * q5's functions and variables. Scroll through entire topics without
+	 * needing to click between separate pages.
+	 * 
+	 * Experiment with editing the code in the interactive mini examples,
+	 * which are often only 8 lines of code or less. They automatically
+	 * update as you type, so you can see results right away.
+	 */
+
 	/** ⭐️
 	 * The draw function is run 60 times per second by default.
 	 * @example
@@ -480,6 +494,8 @@ square(80, 80, 80);
 	 * Like the [`color`](https://q5js.org/learn/#color) function, this function
 	 * can accept colors in a wide range of formats: as a CSS color string,
 	 * a `Color` object, grayscale value, or color component values.
+	 * 
+	 * Not available in q5 WebGPU.
 	 * @param {Color} color shadow color
 	 * @example
 createCanvas(200);
@@ -837,7 +853,7 @@ createCanvas(200, 100);
 background('crimson');
 	 * @example
 function draw() {
-	background(128, 20);
+	background(128, 100);
 	circle(mouseX, mouseY, 20);
 }
 	 */
@@ -1355,15 +1371,15 @@ createCanvas(200, 100);
 	function createVideo(src: string): HTMLVideoElement;
 
 	/** 📑
-	 * Finds an element in the DOM using a CSS selector.
-	 * @param {string} selector CSS selector
+	 * Finds the first element in the DOM that matches the given [CSS selector](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors).
+	 * @param {string} selector
 	 * @returns {HTMLElement} element
 	 */
 	function findElement(selector: string): HTMLElement;
 
 	/** 📑
-	 * Finds multiple elements in the DOM using a CSS selector.
-	 * @param {string} selector CSS selector
+	 * Finds all elements in the DOM that match the given [CSS selector](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors).
+	 * @param {string} selector
 	 * @returns {HTMLElement[]} elements
 	 */
 	function findElements(selector: string): HTMLElement[];