q5 2.10.7 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +8 -1
  2. package/deno.json +36 -0
  3. package/package.json +3 -6
  4. package/q5-deno-server.js +45 -0
  5. package/q5-server.js +6 -7
  6. package/q5.js +19 -13
  7. package/q5.min.js +2 -2
  8. package/src/q5-2d-image.js +1 -1
  9. package/src/q5-canvas.js +16 -10
  10. package/src/q5-core.js +2 -2
  11. package/test/core.test.js +30 -0
  12. package/test/readme.md +5 -0
  13. package/.vscode/launch.json +0 -26
  14. package/.vscode/settings.json +0 -3
  15. package/bun.lockb +0 -0
  16. package/p5-tests/js/chai_helpers.js +0 -20
  17. package/p5-tests/js/mocha_setup.js +0 -2
  18. package/p5-tests/js/modernizr.js +0 -5
  19. package/p5-tests/js/p5_helpers.js +0 -135
  20. package/p5-tests/js/sinon.js +0 -5949
  21. package/p5-tests/mocha.css +0 -289
  22. package/p5-tests/test.html +0 -71
  23. package/p5-tests/unit/color/color_conversion.js +0 -68
  24. package/p5-tests/unit/color/creating_reading.js +0 -217
  25. package/p5-tests/unit/color/p5.Color.js +0 -1000
  26. package/p5-tests/unit/color/setting.js +0 -289
  27. package/p5-tests/unit/core/2d_primitives.js +0 -490
  28. package/p5-tests/unit/core/attributes.js +0 -115
  29. package/p5-tests/unit/core/curves.js +0 -139
  30. package/p5-tests/unit/core/environment.js +0 -248
  31. package/p5-tests/unit/core/error_helpers.js +0 -1158
  32. package/p5-tests/unit/core/main.js +0 -340
  33. package/p5-tests/unit/core/p5.Element.js +0 -773
  34. package/p5-tests/unit/core/p5.Graphics.js +0 -179
  35. package/p5-tests/unit/core/preload.js +0 -285
  36. package/p5-tests/unit/core/rendering.js +0 -116
  37. package/p5-tests/unit/core/structure.js +0 -293
  38. package/p5-tests/unit/core/transform.js +0 -144
  39. package/p5-tests/unit/core/version.js +0 -28
  40. package/p5-tests/unit/core/vertex.js +0 -137
  41. package/p5-tests/unit/dom/dom.js +0 -2146
  42. package/p5-tests/unit/events/acceleration.js +0 -213
  43. package/p5-tests/unit/events/keyboard.js +0 -179
  44. package/p5-tests/unit/events/mouse.js +0 -487
  45. package/p5-tests/unit/events/touch.js +0 -180
  46. package/p5-tests/unit/image/downloading.js +0 -379
  47. package/p5-tests/unit/image/filters.js +0 -92
  48. package/p5-tests/unit/image/loading.js +0 -413
  49. package/p5-tests/unit/image/p5.Image.js +0 -201
  50. package/p5-tests/unit/image/pixels.js +0 -234
  51. package/p5-tests/unit/io/files.js +0 -378
  52. package/p5-tests/unit/io/loadBytes.js +0 -149
  53. package/p5-tests/unit/io/loadImage.js +0 -123
  54. package/p5-tests/unit/io/loadJSON.js +0 -185
  55. package/p5-tests/unit/io/loadModel.js +0 -215
  56. package/p5-tests/unit/io/loadShader.js +0 -176
  57. package/p5-tests/unit/io/loadStrings.js +0 -140
  58. package/p5-tests/unit/io/loadTable.js +0 -183
  59. package/p5-tests/unit/io/loadXML.js +0 -127
  60. package/p5-tests/unit/io/saveModel.js +0 -113
  61. package/p5-tests/unit/io/saveTable.js +0 -142
  62. package/p5-tests/unit/math/calculation.js +0 -452
  63. package/p5-tests/unit/math/noise.js +0 -66
  64. package/p5-tests/unit/math/p5.Vector.js +0 -1886
  65. package/p5-tests/unit/math/random.js +0 -177
  66. package/p5-tests/unit/math/trigonometry.js +0 -144
  67. package/p5-tests/unit/spec.js +0 -50
  68. package/p5-tests/unit/typography/attributes.js +0 -120
  69. package/p5-tests/unit/typography/loadFont.js +0 -162
  70. package/p5-tests/unit/typography/p5.Font.js +0 -63
  71. package/p5-tests/unit/utilities/conversion.js +0 -329
  72. package/p5-tests/unit/utilities/time_date.js +0 -133
package/README.md CHANGED
@@ -2,10 +2,17 @@
2
2
 
3
3
  [**q5.js**](https://q5js.org) is a spiritual successor to the [p5.js][] and [Processing Java][] graphics libraries.
4
4
 
5
- The q5 team aims to make creative coding even more fun and accessible for a new generation of artists, designers, educators, and beginners!
5
+ q5 was designed to make creative coding even more fun and accessible for a new generation of artists, educators, and beginners!
6
6
 
7
7
  If you're already familiar with p5, you'll find yourself right at home with q5. It's also compatible with popular addons, including [p5.sound][] and [p5play][].
8
8
 
9
+ ```js
10
+ function setup() {
11
+ createCanvas(100, 100);
12
+ circle(50, 50, 50);
13
+ }
14
+ ```
15
+
9
16
  ## No Installation Required
10
17
 
11
18
  Try out the [q5.js template sketch](https://aijs.io/editor?user=quinton-ashley&project=logoSpin) for the Aijs online code editor.
package/deno.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@q5/q5",
3
+ "version": "2.11.0",
4
+ "license": "LGPL-3.0",
5
+ "description": "A sequel to p5.js that's optimized for interactive art",
6
+ "author": "quinton-ashley",
7
+ "exports": "./q5-deno-server.js",
8
+ "types": "./q5-deno-server.d.ts",
9
+ "tasks": {
10
+ "tests": "deno test --unstable-node-globals -A"
11
+ },
12
+ "imports": {
13
+ "@std/expect": "jsr:@std/expect",
14
+ "@gfx/canvas": "jsr:@gfx/canvas",
15
+ "@b-fuze/deno-dom": "jsr:@b-fuze/deno-dom"
16
+ },
17
+ "publish": {
18
+ "exclude": [
19
+ ".vscode",
20
+ "assets",
21
+ "dev",
22
+ "fonts",
23
+ "home",
24
+ "lang",
25
+ "learn",
26
+ "test",
27
+ ".npmignore",
28
+ ".prettierignore",
29
+ "CNAME",
30
+ "CODE_OF_CONDUCT.md",
31
+ "deno.lock",
32
+ "Icon?",
33
+ "package.json"
34
+ ]
35
+ }
36
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "q5",
3
- "version": "2.10.7",
3
+ "version": "2.11.0",
4
4
  "description": "A sequel to p5.js that's optimized for interactive art",
5
5
  "author": "quinton-ashley",
6
6
  "contributors": [
@@ -15,6 +15,7 @@
15
15
  "min": "terser q5.js --compress ecma=2024 --mangle > q5.min.js",
16
16
  "dist": "bun bundle && bun min",
17
17
  "dist-p5play": "bun dist && cp q5.js ../../web/p5play-web/v3/q5.js && cp q5.min.js ../../web/p5play-web/v3/q5.min.js",
18
+ "tests": "deno test --unstable-node-globals -A",
18
19
  "v": "npm version patch --force",
19
20
  "V": "npm version minor --force",
20
21
  "version": "git add -A",
@@ -35,9 +36,5 @@
35
36
  "q5xjs",
36
37
  "q5.js",
37
38
  "q5js"
38
- ],
39
- "devDependencies": {
40
- "canvas": "^2.11.2",
41
- "jsdom": "^24.1.0"
42
- }
39
+ ]
43
40
  }
package/q5-deno-server.js ADDED
@@ -0,0 +1,45 @@
1
+ /**
2
+ * @module q5-deno-server
3
+ * @description Run q5 with deno using skia canvas and deno-dom
4
+ */
5
+
6
+ import { createCanvas } from 'jsr:@gfx/canvas@0';
7
+ import { DOMParser } from 'jsr:@b-fuze/deno-dom@0';
8
+
9
+ globalThis.global = globalThis;
10
+
11
+ global.window = global;
12
+ global.document = new DOMParser().parseFromString(
13
+ `
14
+ <!DOCTYPE html>
15
+ <html>
16
+ <head></head>
17
+ <body></body>
18
+ </html>
19
+ `,
20
+ 'text/html'
21
+ );
22
+
23
+ import './q5.js';
24
+
25
+ Q5._createServerCanvas = function () {
26
+ let skiaCanvas = createCanvas(...arguments);
27
+ let domCanvas = document.createElement('canvas');
28
+
29
+ return new Proxy(skiaCanvas, {
30
+ get: function (target, prop) {
31
+ let t = prop in target ? target : domCanvas;
32
+ let p = t[prop];
33
+ if (typeof p === 'function') return p.bind(t);
34
+ return p;
35
+ },
36
+ set: function (target, prop, value) {
37
+ if (prop in target) {
38
+ target[prop] = value;
39
+ } else {
40
+ domCanvas[prop] = value;
41
+ }
42
+ return true;
43
+ }
44
+ });
45
+ };
package/q5-server.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /**
2
- * q5-server.js
3
- * @author quinton-ashley
4
- * @license LGPL-3.0
2
+ * @module q5-server
3
+ * @description Run q5 with node.js using node-canvas and jsdom
5
4
  */
6
5
 
7
6
  try {
@@ -27,13 +26,13 @@ global.window = new JSDOM('', { url: 'http://localhost' }).window;
27
26
 
28
27
  require('./q5.js');
29
28
 
30
- Q5._createNodeJSCanvas = function () {
29
+ Q5._createServerCanvas = function () {
31
30
  let cairoCanvas = CairoCanvas.createCanvas(...arguments);
32
- let jsdomCanvas = window.document.createElement('canvas');
31
+ let domCanvas = window.document.createElement('canvas');
33
32
 
34
33
  return new Proxy(cairoCanvas, {
35
34
  get: function (target, prop) {
36
- let t = prop in target ? target : jsdomCanvas;
35
+ let t = prop in target ? target : domCanvas;
37
36
  let p = t[prop];
38
37
  if (typeof p === 'function') return p.bind(t);
39
38
  return p;
@@ -42,7 +41,7 @@ Q5._createNodeJSCanvas = function () {
42
41
  if (prop in target) {
43
42
  target[prop] = value;
44
43
  } else {
45
- jsdomCanvas[prop] = value;
44
+ domCanvas[prop] = value;
46
45
  }
47
46
  return true;
48
47
  }
package/q5.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * q5.js
3
- * @version 2.10
3
+ * @version 2.11
4
4
  * @author quinton-ashley, Tezumie, and LingDong-
5
5
  * @license LGPL-3.0
6
6
  * @class Q5
@@ -312,7 +312,7 @@ function createCanvas(w, h, opt) {
312
312
  }
313
313
  }
314
314
 
315
- Q5.version = Q5.VERSION = '2.10';
315
+ Q5.version = Q5.VERSION = '2.11';
316
316
 
317
317
  if (typeof document == 'object') {
318
318
  document.addEventListener('DOMContentLoaded', () => {
@@ -327,8 +327,8 @@ Q5.modules.canvas = ($, q) => {
327
327
  };
328
328
 
329
329
  if (Q5._nodejs) {
330
- if (Q5._createNodeJSCanvas) {
331
- q.canvas = Q5._createNodeJSCanvas(100, 100);
330
+ if (Q5._createServerCanvas) {
331
+ q.canvas = Q5._createServerCanvas(100, 100);
332
332
  }
333
333
  } else if ($._scope == 'image' || $._scope == 'graphics') {
334
334
  q.canvas = new $._OffscreenCanvas(100, 100);
@@ -343,17 +343,21 @@ Q5.modules.canvas = ($, q) => {
343
343
  }
344
344
 
345
345
  let c = $.canvas;
346
- c.width = $.width = 100;
347
- c.height = $.height = 100;
346
+ $.width = 200;
347
+ $.height = 200;
348
348
  $._pixelDensity = 1;
349
349
 
350
350
  $.displayDensity = () => window.devicePixelRatio || 1;
351
351
 
352
- if ($._scope != 'image') {
353
- c.renderer = $._renderer;
354
- c[$._renderer] = true;
352
+ if (c) {
353
+ c.width = 200;
354
+ c.height = 200;
355
+ if ($._scope != 'image') {
356
+ c.renderer = $._renderer;
357
+ c[$._renderer] = true;
355
358
 
356
- $._pixelDensity = Math.ceil($.displayDensity());
359
+ $._pixelDensity = Math.ceil($.displayDensity());
360
+ }
357
361
  }
358
362
 
359
363
  $._adjustDisplay = () => {
@@ -538,8 +542,10 @@ Q5.modules.canvas = ($, q) => {
538
542
  $._resizeCanvas(w, h);
539
543
  };
540
544
 
541
- $.canvas.resize = $.resizeCanvas;
542
- $.canvas.save = $.saveCanvas = $.save;
545
+ if (c && !Q5._createServerCanvas) {
546
+ c.resize = $.resizeCanvas;
547
+ c.save = $.saveCanvas = $.save;
548
+ }
543
549
 
544
550
  $.pixelDensity = (v) => {
545
551
  if (!v || v == $._pixelDensity) return $._pixelDensity;
@@ -1353,7 +1359,7 @@ Q5.renderers.q2d.image = ($, q) => {
1353
1359
  $.image = (img, dx, dy, dw, dh, sx = 0, sy = 0, sw, sh) => {
1354
1360
  if (!img) return;
1355
1361
  let drawable = img?.canvas || img;
1356
- if (Q5._createNodeJSCanvas) {
1362
+ if (Q5._createServerCanvas) {
1357
1363
  drawable = drawable.context.canvas;
1358
1364
  }
1359
1365