v1.2.9 added load script

CHANGELOG.md

@@ -1,4 +1,16 @@
 # Changelog
+
+## [1.2.9] - 2021-10-29
+### Added 
+- Added load script function
+- added README examples of loading script
+
+### Changed
+- updated prettier formatting
+
+### Changed
+- updated screen capture info in readme
+
 ## [1.2.8] - 2021-10-26
 ### Changed
 - updated to latest version of hydra synth

README.md

@@ -35,35 +35,35 @@ Check [@hydra_patterns](https://twitter.com/hydra_patterns) for patterns folks h
 
 #### Basic functions
 render an oscillator with parameters frequency, sync, and rgb offset:
-```
+```javascript
 osc(20, 0.1, 0.8).out()
 ```
 
 rotate the oscillator 0.8 radians:
-```
+```javascript
 osc(20, 0.1, 0.8).rotate(0.8).out()
 ```
 pixelate the output of the above function:
-```
+```javascript
 osc(20, 0.1, 0.8).rotate(0.8).pixelate(20, 30).out()
 ```
 show webcam output:
-```
+```javascript
 s0.initCam() // initialize a webcam in source buffer s0
 src(s0).out() // render source buffer s0
 ```
 If you have more than one camera connected, you can select the camera using an index:
-```
+```javascript
 s0.initCam(1) // initialize a webcam in source buffer s0
 ```
 webcam kaleidoscope:
-```
+```javascript
 s0.initCam() // initialize a webcam in source buffer s0
 src(s0).kaleid(4).out() // render the webcam to a kaleidoscope
 ```
 
 You can also composite multiple sources together:
-```
+```javascript
 osc(10)
   .rotate(0.5)
   .diff(osc(200))
@@ -73,18 +73,18 @@ osc(10)
 By default, the environment contains four separate output buffers that can each render different graphics.  The outputs are accessed by the variables o0, o1, o2, and o3.
 
 to render to output buffer o1:
-```
+```javascript
 osc().out(o1)
 render(o1) // render the contents of o1
 ```
 If no output is specified in out(), the graphics are rendered to buffer o0.
 to show all render buffers at once:
-```
+```javascript
 render()
 ```
 
 The output buffers can then be mixed and composited to produce what is shown on the screen.
-```
+```javascript
 s0.initCam() // initialize a webcam in source buffer s0
 src(s0).out(o0) // set the source of o0 to render the buffer containing the webcam
 osc(10, 0.2, 0.8).diff(o0).out(o1) // initialize a gradient in output buffer o1, composite with the contents of o0
@@ -94,42 +94,37 @@ render(o1) // render o1 to the screen
 The composite functions blend(), diff(), mult(), and add() perform arithmetic operations to combine the input texture color with the base texture color, similar to photoshop blend modes.
 
 modulate(texture, amount) uses the red and green channels of the input texture to modify the x and y coordinates of the base texture. More about modulation at: https://lumen-app.com/guide/modulation/
-```
+```javascript
 osc(21, 0).modulate(o1).out(o0)
 osc(40).rotate(1.57).out(o1)
 ```
 
 use a video as a source:
-```
+```javascript
 s0.initVideo("https://media.giphy.com/media/AS9LIFttYzkc0/giphy.mp4")
 src(s0).out()
 ```
 
 
 use an image as a source:
-```
+```javascript
 s0.initImage("https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg")
 src(s0).out()
 ```
 
 #### Passing functions as variables
 Each parameter can be defined as a function rather than a static variable. For example,
-```
+```javascript
 osc(function(){return 100 * Math.sin(time * 0.1)}).out()
 ```
 modifies the oscillator frequency as a function of time. (Time is a global variable that represents the milliseconds that have passed since loading the page). This can be written more concisely using es6 syntax:
-```
+```javascript
 osc(() => (100 * Math.sin(time * 0.1))).out()
 ```
 
 ## Desktop capture
 Open a dialog to select a screen tab to use as input texture:
-```
-s0.initScreen()
-```
-
-render screen tab:
-```
+```javascript
 s0.initScreen()
 src(s0).out()
 ```
@@ -139,26 +134,99 @@ Any hydra instance can use other instances/windows containing hydra as input sou
 
 To begin, open hydra simultaneously in two separate windows.
 In one of the windows, set a name for the given patch-bay source:
-```
+```javascript
 pb.setName("myGraphics")
 ```
 The title of the window should change to the name entered in setName().
 
 From the other window, initiate "myGraphics" as a source stream.
-```
+```javascript
 s0.initStream("myGraphics")
 ```
 render to screen:
-```
+```javascript
 s0.initStream("myGraphics")
 src(s0).out()
 ```
 The connections sometimes take a few seconds to be established; open the browser console to see progress.
 To list available sources, type the following in the console:
-```
+```javascript
 pb.list()
 ```
 
+## Using p5.js with hydra
+
+```javascript
+// Initialize a new p5 instance It is only necessary to call this once
+p5 = new P5() // {width: window.innerWidth, height:window.innerHeight, mode: 'P2D'}
+
+// draw a rectangle at point 300, 100
+p5.rect(300, 100, 100, 100)
+
+// Note that P5 runs in instance mode, so all functions need to start with the variable where P5 was initialized (in this case p5)
+// reference for P5: https://P5js.org/reference/
+// explanation of instance mode: https://github.com/processing/P5.js/wiki/Global-and-instance-mode
+
+// When live coding, the "setup()" function of P5.js has basically no use; anything that you would have called in setup you can just call outside of any function.
+
+p5.clear()
+
+for(var i = 0; i < 100; i++){
+  p5.fill(i*10, i%30, 255)
+  p5.rect(i*20, 200, 10,200)
+}
+
+// To live code animations, you can redefine the draw function of P5 as follows:
+// (a rectangle that follows the mouse)
+p5.draw = () => {
+  p5.fill(p5.mouseX/5, p5.mouseY/5, 255, 100)
+  p5.rect(p5.mouseX, p5.mouseY, 30, 150)
+}
+
+// To use P5 as an input to hydra, simply use the canvas as a source:
+s0.init({src: p5.canvas})
+
+// Then render the canvas
+src(s0).repeat().out()
+```
+
+## Loading external scripts
+The `await loadScript()` function lets you load other packaged javascript libraries within the hydra editor. Any javascript code can run in the hydra editor.
+
+Here is an example using Three.js from the web editor:
+```javascript
+await loadScript("https://threejs.org/build/three.js")
+
+scene = new THREE.Scene()
+camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+
+renderer = new THREE.WebGLRenderer()
+renderer.setSize(width, height)
+geometry = new THREE.BoxGeometry()
+material = new THREE.MeshBasicMaterial({color: 0x00ff00})
+cube = new THREE.Mesh(geometry, material);
+scene.add(cube)
+camera.position.z = 1.5
+
+// 'update' is a reserved function that will be run every time the main hydra rendering context is updated
+update = () => {
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render( scene, camera );
+}
+
+s0.init({ src: renderer.domElement })
+
+src(s0).repeat().out()
+```
+
+And here is an example loading the Tone.js library:
+```javascript
+await loadScript("https://unpkg.com/tone")
+
+synth = new Tone.Synth().toDestination();
+synth.triggerAttackRelease("C4", "8n");
+```
 ## Running locally
 To run locally, you must have nodejs and npm installed. Install from: https://nodejs.org/en/
 

hydra-server/app/index.js

@@ -36,6 +36,33 @@ function init () {
   var menu = new Menu({ editor: editor, hydra: hydra})
   log.init()
 
+  // add extra functions to the web editor
+   // hush clears what you see on the screen
+   window.hush = () => {
+    solid().out()
+    solid().out(o1)
+    solid().out(o2)
+    solid().out(o3)
+    render(o0)
+  }
+
+  window.loadScript = (url = "") => {
+    const p = new Promise((res, rej) => {
+      var script = document.createElement("script");
+      script.onload = function () {
+        log.log(`loaded script ${url}`);
+        res();
+      };
+      script.onerror = (err) => {
+        log.log(`error loading script ${url}`, "log-error");
+        res()
+      };
+      script.src = url;
+      document.head.appendChild(script); 
+    });
+    return p;
+  };
+
   // get initial code to fill gallery
   var sketches = new Gallery(function(code, sketchFromURL) {
     editor.setValue(code)
@@ -60,15 +87,7 @@ function init () {
 
   // define extra functions (eventually should be added to hydra-synth?)
 
-  // hush clears what you see on the screen
-  window.hush = () => {
-    solid().out()
-    solid().out(o1)
-    solid().out(o2)
-    solid().out(o3)
-    render(o0)
-  }
-
+ 
 
   pb.init(hydra.captureStream, {
     server: window.location.origin,

hydra-server/app/src/repl.js

@@ -3,7 +3,9 @@ const log = require('./log.js').log
 module.exports = {
   eval: (arg, callback) => {
     var self = this
-    var jsString = arg
+
+    // wrap everything in an async function
+  var jsString = `(async() => {${arg}})()`
     var isError = false
     try {
       eval(jsString)

hydra-server/public/index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title>&lt; hydra &gt;</title>
-  <!-- <script src="./bundle.min.js?1.2.8"></script> -->
-  <script src="./bundle.js"></script>
+  <script src="./bundle.min.js?1.2.9"></script>
+  <!-- <script src="./bundle.js"></script> -->
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta property="og:title" content="HYDRA">