2.0.14

.npmignore

@@ -9,4 +9,3 @@ package-lock.json
 index.html
 jsconfig.json
 CODE_OF_CONDUCT.md
-CONTRIBUTING.md

README.md

@@ -200,7 +200,7 @@ In **p5** the only way to do dimension agnostic sketches is to set variables to
 
 In **q5**, @Tezumie added a new feature called `flexibleCanvas`. It takes a unit as input, then any position coordinates or dimensions you use will be scaled based on that unit.
 
-In this example, the rect will appear in the middle of the canvas, regardless of its size.
+In this example, the rect will appear in the middle of the canvas.
 
 ```js
 new Q5();
@@ -373,7 +373,11 @@ Higher FPS (frames per second) is better.
 
 ## Contributing
 
-See the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) and [CONTRIBUTING.md](CONTRIBUTING.md) files for more information.
+Check out the [q5 planning board](https://github.com/orgs/q5js/projects/1/views/1).
+
+If the q5 project is successful, all contributing developers will be paid for their work. The project will be run as a [worker co-op](https://en.wikipedia.org/wiki/Worker_cooperative).
+
+Contributors must agree to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).
 
 ## Licensing
 

home/index.html

@@ -153,9 +153,9 @@ <h2 id="more-vibrant-colors-🎨">More vibrant colors! 🎨</h2>
 }
  </script>
  <md id="md2-2">
- <p>q5 empowers artists with a <a
- href="https://github.com/quinton-ashley/q5.js?tab=readme-ov-file#hdr-color-support" target="_blank">wider
- range of colors</a> 🤩</p>
+ <p>q5 empowers artists with <a
+ href="https://github.com/quinton-ashley/q5.js?tab=readme-ov-file#hdr-color-support" target="_blank">HDR
+ color support</a> 🤩</p>
  </md>
  </div>
  </div>
@@ -269,7 +269,7 @@ <h2 id="dynamic-🐙">Dynamic 🐙</h2>
  <h2 id="sound-on-🔊">Sound On 🔊</h2>
  <p><a href="https://p5js.org/reference/#/libraries/p5.sound" target="_blank">p5.sound</a> is a great library but
  typical use doesn't require its extensive sound generation and filtering features. 🎛️</p>
- <p>That's why q5.js includes sound loading, playback, and basic mixing by default. 🎚️</p>
+ <p>That's why q5.js includes sounds loading, playback, and basic mixing by default. 🎚️</p>
  </md>
  <md id="md10-2">
  <h2 id="lightweight-🪶">Lightweight 🪶</h2>
@@ -326,9 +326,9 @@ <h2 id="join-our-community-🤝">Join our community 🤝</h2>
  <h2 id="credits-🌟">Credits 🌟</h2>
  <p>This project aims to be the spiritual successor to the invaluable 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> and <a
- href="http://lauren-mccarthy.com" target="_blank">Lauren McCarthy</a>'s work on <a href="https://p5js.org"
-  target="_blank">p5.js</a>.</p>
+ 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 his brilliant codebase!</p>

lang/en/home/index.md

@@ -16,7 +16,7 @@ In p5, bright colors can look dull on modern devices 😕
 
 # 2-2
 
-q5 empowers artists with a [wider range of colors](https://github.com/quinton-ashley/q5.js?tab=readme-ov-file#hdr-color-support) 🤩
+q5 empowers artists with [HDR color support](https://github.com/quinton-ashley/q5.js?tab=readme-ov-file#hdr-color-support) 🤩
 
 # 3-0
 
@@ -78,7 +78,7 @@ createCanvas(400, 400);
 
 [p5.sound](https://p5js.org/reference/#/libraries/p5.sound) is a great library but typical use doesn't require its extensive sound generation and filtering features. 🎛️
 
-That's why q5.js includes sound loading, playback, and basic mixing by default. 🎚️
+That's why q5.js includes sounds loading, playback, and basic mixing by default. 🎚️
 
 # 10-2
 
@@ -140,7 +140,7 @@ If you'd like to work on q5.js, check out our [Contributor Code of Conduct](http
 
 ## Credits 🌟
 
-This project aims to be the spiritual successor to the invaluable work done by [Ben Fry](https://benfry.com) and [Casey Reas](https://x.com/REAS) on Java [Processing](https://processingfoundation.org/) and [Lauren McCarthy](http://lauren-mccarthy.com)'s work on [p5.js](https://p5js.org).
+This project aims to be the spiritual successor to the invaluable 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 his brilliant codebase!
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "q5",
- "version": "2.0.13",
+ "version": "2.0.14",
  "description": "A sequel to p5.js that's smaller and faster",
  "author": "quinton-ashley",
  "contributors": [

q5.js

@@ -1238,9 +1238,7 @@ Q5.modules.q2d_image = ($, p) => {
  let a = document.createElement('a');
  a.href = data;
  a.download = name + '.' + ext;
- document.body.append(a);
  a.click();
- document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
  };
  $.save = (a, b, c) => {
@@ -1932,6 +1930,7 @@ Q5.modules.ai = ($) => {
 };
 Q5.modules.color = ($, p) => {
  $.RGB = $.RGBA = $._colorMode = 'rgb';
+ $.OKLCH = 'oklch';
 
  if (Q5.supportsHDR) $.Color = Q5.ColorRGBA_P3;
  else $.Color = Q5.ColorRGBA;
@@ -2818,30 +2817,44 @@ Q5.PerlinNoise = class extends Q5.Noise {
  }
 };
 Q5.modules.sound = ($, p) => {
+ $.Sound = Q5.Sound;
  $.loadSound = (path, cb) => {
  p._preloadCount++;
- $.aud ??= new window.AudioContext();
- let a = new Audio(path);
+ Q5.aud ??= new window.AudioContext();
+ let a = new Q5.Sound(path, cb);
  a.addEventListener('canplaythrough', () => {
  p._preloadCount--;
  if (cb) cb(a);
  });
+ return a;
+ };
+ $.getAudioContext = () => Q5.aud;
+ $.userStartAudio = () => Q5.aud.resume();
+};
+
+Q5.Sound = class extends Audio {
+ constructor(path) {
+ super(path);
+ let a = this;
  a.load();
- a.setVolume = (l) => (a.volume = l);
- a.setLoop = (l) => (a.loop = l);
- a.panner = $.aud.createStereoPanner();
- a.source = $.aud.createMediaElementSource(a);
+ a.panner = Q5.aud.createStereoPanner();
+ a.source = Q5.aud.createMediaElementSource(a);
  a.source.connect(a.panner);
- a.panner.connect($.aud.destination);
+ a.panner.connect(Q5.aud.destination);
  Object.defineProperty(a, 'pan', {
  get: () => a.panner.pan.value,
  set: (v) => (a.panner.pan.value = v)
  });
- a.setPan = (v) => (a.pan = v);
- return a;
- };
- $.getAudioContext = () => $.aud;
- $.userStartAudio = () => $.aud.resume();
+ }
+ setVolume(level) {
+ this.volume = level;
+ }
+ setLoop(loop) {
+ this.loop = loop;
+ }
+ setPan(value) {
+ this.pan = value;
+ }
 };
 Q5.modules.util = ($, p) => {
  $._loadFile = (path, cb, type) => {

src/q5-2d-image.js

@@ -161,9 +161,7 @@ Q5.modules.q2d_image = ($, p) => {
  let a = document.createElement('a');
  a.href = data;
  a.download = name + '.' + ext;
- document.body.append(a);
  a.click();
- document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
  };
  $.save = (a, b, c) => {

src/q5-color.js

@@ -1,5 +1,6 @@
 Q5.modules.color = ($, p) => {
  $.RGB = $.RGBA = $._colorMode = 'rgb';
+ $.OKLCH = 'oklch';
 
  if (Q5.supportsHDR) $.Color = Q5.ColorRGBA_P3;
  else $.Color = Q5.ColorRGBA;

src/q5-sensors.js

@@ -68,7 +68,7 @@ Q5.modules.sensors = ($) => {
  (A[8] * v[0] + A[9] * v[1] + A[10] * v[2] + A[11]) / (A[12] * v[0] + A[13] * v[1] + A[14] * v[2] + A[15])
  ];
 
- window.ondeviceorientation = (e) => {
+ window.addEventListener('deviceorientation', (e) => {
  $.pRotationX = $.rotationX;
  $.pRotationY = $.rotationY;
  $.pRotationZ = $.rotationZ;
@@ -82,8 +82,9 @@ Q5.modules.sensors = ($) => {
  $.relRotationX = [-$.rotationY, -$.rotationX, $.rotationY][Math.trunc(window.orientation / 90) + 1];
  $.relRotationY = [-$.rotationX, $.rotationY, $.rotationX][Math.trunc(window.orientation / 90) + 1];
  $.relRotationZ = $.rotationZ;
- };
- window.ondevicemotion = (e) => {
+ });
+
+ window.addEventListener('devicemotion', (e) => {
  $.pAccelerationX = $.accelerationX;
  $.pAccelerationY = $.accelerationY;
  $.pAccelerationZ = $.accelerationZ;
@@ -93,5 +94,5 @@ Q5.modules.sensors = ($) => {
  $.accelerationY = e.accelerationIncludingGravity.y + grav[1];
  $.accelerationZ = e.accelerationIncludingGravity.z - grav[2];
  }
- };
+ });
 };

src/q5-sound.js

@@ -1,26 +1,40 @@
 Q5.modules.sound = ($, p) => {
+ $.Sound = Q5.Sound;
  $.loadSound = (path, cb) => {
  p._preloadCount++;
- $.aud ??= new window.AudioContext();
- let a = new Audio(path);
+ Q5.aud ??= new window.AudioContext();
+ let a = new Q5.Sound(path, cb);
  a.addEventListener('canplaythrough', () => {
  p._preloadCount--;
  if (cb) cb(a);
  });
+ return a;
+ };
+ $.getAudioContext = () => Q5.aud;
+ $.userStartAudio = () => Q5.aud.resume();
+};
+
+Q5.Sound = class extends Audio {
+ constructor(path) {
+ super(path);
+ let a = this;
  a.load();
- a.setVolume = (l) => (a.volume = l);
- a.setLoop = (l) => (a.loop = l);
- a.panner = $.aud.createStereoPanner();
- a.source = $.aud.createMediaElementSource(a);
+ a.panner = Q5.aud.createStereoPanner();
+ a.source = Q5.aud.createMediaElementSource(a);
  a.source.connect(a.panner);
- a.panner.connect($.aud.destination);
+ a.panner.connect(Q5.aud.destination);
  Object.defineProperty(a, 'pan', {
  get: () => a.panner.pan.value,
  set: (v) => (a.panner.pan.value = v)
  });
- a.setPan = (v) => (a.pan = v);
- return a;
- };
- $.getAudioContext = () => $.aud;
- $.userStartAudio = () => $.aud.resume();
+ }
+ setVolume(level) {
+ this.volume = level;
+ }
+ setLoop(loop) {
+ this.loop = loop;
+ }
+ setPan(value) {
+ this.pan = value;
+ }
 };