steve-hydra_studies [Designing Service]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Steve Hydra Studies ======
====== Steve teach everyone one cool thing about Hydra =====
====== BELL ON DRUGS ======
innitimage function takes a link to a photo as an argument. The, you can add Hydra effects on it. Some pictures that are blocked by the source cannot be used. The front part s something is the location where hydra is going to put the image. To get the image, src() function will be needed. The argument of the src function should be the location of the image. So, if I did s0.initimage, I would need src(s0)
{{:students:steve-hydra_.png?400|}}
{{:students:steve-hydradra.png?400|}}
[[https://hydra.ojack.xyz/?code=czAuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTJGJTJGb3NjKDYpLm1vZHVsYXRlKHNyYyhzMCklMkMxKS5vdXQobzApJTBBc3JjKHMwKS5pbnZlcnQoKS5kaWZmKG9zYygxMyUyQzAuNSUyQzUpKS5vdXQobzAp|Here]]
[[https://hydra.ojack.xyz/?code=czAuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTJGJTJGb3NjKDYpLm1vZHVsYXRlKHNyYyhzMCklMkMxKS5vdXQobzApJTBBc3JjKHMwKS5pbnZlcnQoKS5kaWZmKG9zYygxJTJDMC41JTJDMTAwMCkpLmNvbG9yKDElMkMwJTJDMykub3V0KG8wKSUwQSUwQXNwZWVkJTNEMTA%3D|test 2]]
[[https://hydra.ojack.xyz/?code=czAuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTJGJTJGb3NjKDYpLm1vZHVsYXRlKHNyYyhzMCklMkMxKS5vdXQobzApJTBBc3JjKHMwKS5pbnZlcnQoKS5kaWZmKG9zYygxMyUyQzAuNSUyQzUpKS5jb250cmFzdCglMjAoKSUyMCUzRCUzRSUyME1hdGguc2luKHRpbWUpJTIwKiUyMDUlMjApLm91dChvMCk%3D|3]]

[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwZnJlcXVlbmN5JTBBb3NjKCUyMCU1QjElMkMxMCUyQzUwJTJDMTAwJTJDMjUwJTJDNTAwJTVELmZhc3QoKSUyMCkub3V0KG8wKSUwQSUwQXNldFRpbWVvdXQoKCklM0QlM0UlN0IlMEElMjAlMjBzb2xpZCgpLm91dCgpJTdEJTJDMTAwMDAp|End]]
Gave test subject drugs. Not interesitng enough more drugs becuase research paper needs content. Then weird things started to happen to test subject
===== Order to speak in =====

  - Real world uses of hydra
  - The main function used.
    - [[https://hydra.ojack.xyz/api/#functions/initImage/0|initImg]]
  - The other function [[https://hydra-book.glitch.me/#/textures?id=oscillator|OSC]]
  - Example.

====== Steve teach everyone one cool thing about Hydra, round 2 ======
===== Notes and Explanation =====
I created a way for SVG.js to connect to Hydra.
So, I load SVG.js with await loadscript.
Then I did normal SVG.js stuff and I "took a picture" of SVG.js and I wrapped it in an html canvas element and gave it to Hydra.


The hydra console/editor is like the draw function in p5.js it loops forever 
In the future can make it so SVG into hydra because already have the tools to import svg into svg.js
Try it make it so can export the whole thing including Hydra output as Svg

[[https://hydra.ojack.xyz/docs/#/additional_topics?id=loading-external-scripts|load script API]]
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwSW5pdGlhbGl6ZSUyMGElMjBuZXclMjBwNSUyMGluc3RhbmNlJTIwSXQlMjBpcyUyMG9ubHklMjBuZWNlc3NhcnklMjB0byUyMGNhbGwlMjB0aGlzJTIwb25jZSUwQXA1JTIwJTNEJTIwbmV3JTIwUDUoKSUyMCUyRiUyRiUyMCU3QndpZHRoJTNBJTIwd2luZG93LmlubmVyV2lkdGglMkMlMjBoZWlnaHQlM0F3aW5kb3cuaW5uZXJIZWlnaHQlMkMlMjBtb2RlJTNBJTIwJ1AyRCclN0QlMEElMEElMEFmdW5jdGlvbiUyMGVhcnRoJTIwKCklMjAlN0IlMEElMjAlMjBwNS5maWxsKCd3aGl0ZScpJTNCJTBBJTIwJTIwcDUudGV4dFNpemUoNTApJTNCJTBBJTIwJTIwcDUudGV4dCgnSGVsbG8lMjBXb3JsZCEnJTJDJTIwNTAlMkMlMjAxMDApJTNCJTBBJTIwJTIwcDUuZmlsbCgnYmx1ZScpJTNCJTBBJTIwJTIwcDUuY2lyY2xlKDIwMCUyQzI1MCUyQzIwMCklM0IlMEElMjAlMjBwNS5maWxsKCdncmVlbicpJTNCJTBBJTIwJTIwcDUuZWxsaXBzZSgyMDAlMkMyMjAlMkMxMzAlMkMxMDApJTBBJTdEJTBBJTBBJTBBJTIwJTIwcDUuYmFja2dyb3VuZCgwKSUzQiUwQSUyMCUyMGVhcnRoKCklM0IlMEE%3D|step1]]
{{:students:steve-svgjs-hydra.png?400|}}
[[https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCdodHRwcyUzQSUyRiUyRmNkbmpzLmNsb3VkZmxhcmUuY29tJTJGYWpheCUyRmxpYnMlMkZzdmcuanMlMkYzLjEuMiUyRnN2Zy5taW4uanMnKSUwQSUwQXZhciUyMGRyYXclMjAlM0QlMjBTVkcoKS5hZGRUbygnYm9keScpLnNpemUod2luZG93LmlubmVyV2lkdGglMkN3aW5kb3cuaW5uZXJIZWlnaHQpJTBBJTBBbGV0JTIwcGlnJTNEZHJhdy5yZWN0KDEwMDAlMkMxMDAwKS5maWxsKCd3aGl0ZScpLnNpemUoMTAwJTJDMTAwKSUwQSUwQXNldEludGVydmFsKCgpJTNEJTNFJTdCJTBBU3ZnVG9DYW52YXMoKSUwQSU3RCUyQzEwMDApJTBBJTBBc2V0VGltZW91dCgoKSUzRCUzRSU3QiUwQXMwLmluaXQoJTdCc3JjJTNBJTIwc3RldmUlN0QpJTBBJTdEJTJDMTEwMCklMEElMEFmdW5jdGlvbiUyMFN2Z1RvQ2FudmFzKCklN0IlMEF2YXIlMjBzdmdFbGVtZW50JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ3N2ZycpJTVCMCU1RCUzQiUwQWxldCUyMCU3QndpZHRoJTJDJTIwaGVpZ2h0JTdEJTIwJTNEJTIwc3ZnRWxlbWVudC5nZXRCQm94KCklM0IlMEFjb25zb2xlLmxvZyh3aWR0aCUyQ2hlaWdodCklMEFsZXQlMjBjbG9uZWRTdmdFbGVtZW50JTIwJTNEJTIwc3ZnRWxlbWVudC5jbG9uZU5vZGUodHJ1ZSklM0IlMEElMkYlMkYlMjB0cnVlJTIwZm9yJTIwZGVlcCUyMGNsb25lJTBBbGV0JTIwb3V0ZXJIVE1MJTIwJTNEJTIwY2xvbmVkU3ZnRWxlbWVudC5vdXRlckhUTUwlMkMlMEFibG9iJTIwJTNEJTIwbmV3JTIwQmxvYiglNUJvdXRlckhUTUwlNUQlMkMlN0J0eXBlJTNBJ2ltYWdlJTJGc3ZnJTJCeG1sJTNCY2hhcnNldCUzRHV0Zi04JyU3RCklM0IlMEFsZXQlMjBVUkwlMjAlM0QlMjB3aW5kb3cuVVJMJTIwJTdDJTdDJTIwd2luZG93LndlYmtpdFVSTCUyMCU3QyU3QyUyMHdpbmRvdyUzQiUwQWxldCUyMGJsb2JVUkwlMjAlM0QlMjBVUkwuY3JlYXRlT2JqZWN0VVJMKGJsb2IpJTNCJTBBbGV0JTIwaW1hZ2UlMjAlM0QlMjBuZXclMjBJbWFnZSgpJTNCJTBBaW1hZ2Uub25sb2FkJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjBsZXQlMjBjYW52YXMlMjAlM0QlMjBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKSUzQiUwQWNhbnZhcy5pZCUzRCdzdGV2ZSclMEElMjAlMjAlMjBjYW52YXMud2lkdGglMjAlM0QlMjB3aWR0aCUzQiUwQSUyMCUyMCUyMGNhbnZhcy5oZWlnaHQlMjAlM0QlMjBoZWlnaHQlM0IlMEElMjAlMjAlMjAlMjBjb25zb2xlLmxvZyhjYW52YXMpJTBBZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChjYW52YXMpJTNCJTBBJTIwJTIwJTIwbGV0JTIwY29udGV4dCUyMCUzRCUyMGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpJTNCJTBBJTIwJTIwJTIwJTJGJTJGJTIwZHJhdyUyMGltYWdlJTIwaW4lMjBjYW52YXMlMjBzdGFydGluZyUyMGxlZnQtMCUyMCUyQyUyMHRvcCUyMC0lMjAwJTBBJTIwJTIwJTIwY29udGV4dC5kcmF3SW1hZ2UoaW1hZ2UlMkMlMjAwJTJDJTIwMCUyQyUyMHdpZHRoJTJDJTIwaGVpZ2h0JTIwKSUzQiUwQSUyMCUyMCUyRiUyRiUyMCUyMGRvd25sb2FkSW1hZ2UoY2FudmFzKSUzQiUyMG5lZWQlMjB0byUyMGltcGxlbWVudCUwQSU3RCUzQiUwQWltYWdlLnNyYyUyMCUzRCUyMGJsb2JVUkwlM0IlMEElMjAlMjAlMjAlMjAlN0QlMEFzY3JvbGxUbyg1MDAlMkM1MDApJTBBJTJGJTJGaHR0cHMlM0ElMkYlMkZsZXZlbHVwLmdpdGNvbm5lY3RlZC5jb20lMkZkcmF3LWFuLXN2Zy10by1jYW52YXMtYW5kLWRvd25sb2FkLWl0LWFzLWltYWdlLWluLWphdmFzY3JpcHQtZjdmNzcxM2NmODFmJTBBJTJGJTJGV2l0aCUyMEh5cmRyYSUzQSUwQSUyRiUyRnNyYyhzMCkucmVwZWF0KCkub3V0KCklMEElMEE%3D|here]]

Examples work: TO get it to work, manually run code. CTRL+SHIFT+ enter. Then scroll down.TO get to example, put mouse on error output are and scroll down.
The error output looks like this: >>
or try scrollTo(500, 500) in the console 

https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCdodHRwcyUzQSUyRiUyRmNkbmpzLmNsb3VkZmxhcmUuY29tJTJGYWpheCUyRmxpYnMlMkZzdmcuanMlMkYzLjEuMiUyRnN2Zy5taW4uanMnKSUwQSUwQXZhciUyMGRyYXclMjAlM0QlMjBTVkcoKS5hZGRUbygnYm9keScpLnNpemUod2luZG93LmlubmVyV2lkdGglMkN3aW5kb3cuaW5uZXJIZWlnaHQpJTBBJTBBbGV0JTIwcGlnJTNEZHJhdy5yZWN0KDEwMDAlMkMxMDAwKS5maWxsKCd3aGl0ZScpLnNpemUoMTAwJTJDMTAwKSUwQSUwQXNldEludGVydmFsKCgpJTNEJTNFJTdCJTBBU3ZnVG9DYW52YXMoKSUwQSU3RCUyQzEwMDApJTBBJTBBc2V0VGltZW91dCgoKSUzRCUzRSU3QiUwQXMwLmluaXQoJTdCc3JjJTNBJTIwc3RldmUlN0QpJTBBJTdEJTJDMTEwMCklMEElMEFmdW5jdGlvbiUyMFN2Z1RvQ2FudmFzKCklN0IlMEF2YXIlMjBzdmdFbGVtZW50JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ3N2ZycpJTVCMCU1RCUzQiUwQWxldCUyMCU3QndpZHRoJTJDJTIwaGVpZ2h0JTdEJTIwJTNEJTIwc3ZnRWxlbWVudC5nZXRCQm94KCklM0IlMEFjb25zb2xlLmxvZyh3aWR0aCUyQ2hlaWdodCklMEFsZXQlMjBjbG9uZWRTdmdFbGVtZW50JTIwJTNEJTIwc3ZnRWxlbWVudC5jbG9uZU5vZGUodHJ1ZSklM0IlMEElMkYlMkYlMjB0cnVlJTIwZm9yJTIwZGVlcCUyMGNsb25lJTBBbGV0JTIwb3V0ZXJIVE1MJTIwJTNEJTIwY2xvbmVkU3ZnRWxlbWVudC5vdXRlckhUTUwlMkMlMEFibG9iJTIwJTNEJTIwbmV3JTIwQmxvYiglNUJvdXRlckhUTUwlNUQlMkMlN0J0eXBlJTNBJ2ltYWdlJTJGc3ZnJTJCeG1sJTNCY2hhcnNldCUzRHV0Zi04JyU3RCklM0IlMEFsZXQlMjBVUkwlMjAlM0QlMjB3aW5kb3cuVVJMJTIwJTdDJTdDJTIwd2luZG93LndlYmtpdFVSTCUyMCU3QyU3QyUyMHdpbmRvdyUzQiUwQWxldCUyMGJsb2JVUkwlMjAlM0QlMjBVUkwuY3JlYXRlT2JqZWN0VVJMKGJsb2IpJTNCJTBBbGV0JTIwaW1hZ2UlMjAlM0QlMjBuZXclMjBJbWFnZSgpJTNCJTBBaW1hZ2Uub25sb2FkJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjBsZXQlMjBjYW52YXMlMjAlM0QlMjBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKSUzQiUwQWNhbnZhcy5pZCUzRCdzdGV2ZSclMEElMjAlMjAlMjBjYW52YXMud2lkdGglMjAlM0QlMjB3aWR0aCUzQiUwQSUyMCUyMCUyMGNhbnZhcy5oZWlnaHQlMjAlM0QlMjBoZWlnaHQlM0IlMEElMjAlMjAlMjAlMjBjb25zb2xlLmxvZyhjYW52YXMpJTBBZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChjYW52YXMpJTNCJTBBJTIwJTIwJTIwbGV0JTIwY29udGV4dCUyMCUzRCUyMGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpJTNCJTBBJTIwJTIwJTIwJTJGJTJGJTIwZHJhdyUyMGltYWdlJTIwaW4lMjBjYW52YXMlMjBzdGFydGluZyUyMGxlZnQtMCUyMCUyQyUyMHRvcCUyMC0lMjAwJTBBJTIwJTIwJTIwY29udGV4dC5kcmF3SW1hZ2UoaW1hZ2UlMkMlMjAwJTJDJTIwMCUyQyUyMHdpZHRoJTJDJTIwaGVpZ2h0JTIwKSUzQiUwQSUyMCUyMCUyRiUyRiUyMCUyMGRvd25sb2FkSW1hZ2UoY2FudmFzKSUzQiUyMG5lZWQlMjB0byUyMGltcGxlbWVudCUwQSU3RCUzQiUwQWltYWdlLnNyYyUyMCUzRCUyMGJsb2JVUkwlM0IlMEElMjAlMjAlMjAlMjAlN0QlMEFzY3JvbGxUbyg1MDAlMkM1MDApJTBBJTJGJTJGaHR0cHMlM0ElMkYlMkZsZXZlbHVwLmdpdGNvbm5lY3RlZC5jb20lMkZkcmF3LWFuLXN2Zy10by1jYW52YXMtYW5kLWRvd25sb2FkLWl0LWFzLWltYWdlLWluLWphdmFzY3JpcHQtZjdmNzcxM2NmODFmJTBBJTJGJTJGV2l0aCUyMEh5cmRyYSUzQSUwQSUyRiUyRnNyYyhzMCkucmVwZWF0KCkub3V0KCklMEElMEE%3D
====== Citation ======
https://levelup.gitconnected.com/draw-an-svg-to-canvas-and-download-it-as-image-in-javascript-f7f7713cf81f

====== COde ======
<code javascript>
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js')

var draw = SVG().addTo('body').size(window.innerWidth,window.innerHeight)

let pig=draw.rect(1000,1000).fill('white').size(100,100)

setInterval(()=>{
SvgToCanvas()
},1000)

setTimeout(()=>{
s0.init({src: steve})
},1100)

function SvgToCanvas(){
var svgElement = document.getElementsByTagName('svg')[0];
let {width, height} = svgElement.getBBox();
console.log(width,height)
let clonedSvgElement = svgElement.cloneNode(true);
// true for deep clone
let outerHTML = clonedSvgElement.outerHTML,
blob = new Blob([outerHTML],{type:'image/svg+xml;charset=utf-8'});
let URL = window.URL || window.webkitURL || window;
let blobURL = URL.createObjectURL(blob);
let image = new Image();
image.onload = () => {
   let canvas = document.createElement('canvas');
canvas.id='steve'
   canvas.width = width;
   canvas.height = height;
    console.log(canvas)
document.body.appendChild(canvas);
   let context = canvas.getContext('2d');
   // draw image in canvas starting left-0 , top - 0
   context.drawImage(image, 0, 0, width, height );
  //  downloadImage(canvas); need to implement
};
image.src = blobURL;
    }
scrollTo(500,500)
//https://levelup.gitconnected.com/draw-an-svg-to-canvas-and-download-it-as-image-in-javascript-f7f7713cf81f
//With Hyrdra:
//src(s0).repeat().out()

</code>

====== Steve teach everyone one cool thing about Hydra, round 3 ======
Render function 

render() without arguments displays all inputs. 

render(s0) only displays one input on the whole screen in this case source s0

In hydra, you can split the screen into four parts or 1 whole part. There are s0,s1,s2,s3. Where those thing will place the image:
{{:students:steve-hydra-out-area.png|}}

[[https://hydra.ojack.xyz/docs/#/getting_started?id=save-your-sketch-on-the-internet|API(search for MULTIPLE OUTPUTS section)]]

[[https://hydra.ojack.xyz/?code=czAuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTJGJTJGb3NjKDYpLm1vZHVsYXRlKHNyYyhzMCklMkMxKS5vdXQobzApJTBBc3JjKHMwKS5pbnZlcnQoKS5kaWZmKG9zYygxMyUyQzAuNSUyQzUpKS5vdXQobzAp|Here]]
[[https://hydra.ojack.xyz/?code=czAuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTJGJTJGb3NjKDYpLm1vZHVsYXRlKHNyYyhzMCklMkMxKS5vdXQobzApJTBBc3JjKHMwKS5pbnZlcnQoKS5kaWZmKG9zYygxJTJDMC41JTJDMTAwMCkpLmNvbG9yKDElMkMwJTJDMykub3V0KG8wKSUwQSUwQXNwZWVkJTNEMTA%3D|test 2]]
[[https://hydra.ojack.xyz/?code=czAuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTJGJTJGb3NjKDYpLm1vZHVsYXRlKHNyYyhzMCklMkMxKS5vdXQobzApJTBBc3JjKHMwKS5pbnZlcnQoKS5kaWZmKG9zYygxMyUyQzAuNSUyQzUpKS5jb250cmFzdCglMjAoKSUyMCUzRCUzRSUyME1hdGguc2luKHRpbWUpJTIwKiUyMDUlMjApLm91dChvMCk%3D|3]]
Up old:

[[https://hydra.ojack.xyz/api/#functions/solid/0|api]]
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwZGVmYXVsdCUwQXNvbGlkKDAlMkMxJTJDMCkub3V0KG8wKSUwQXNvbGlkKDEpLm91dChvMSklMEFzb2xpZCgwJTJDMCUyQzEpLm91dChvMiklMEFzb2xpZCgwKS5vdXQobzMpJTBBcmVuZGVyKCk%3D|simple]]
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwZGVmYXVsdCUwQXMxLmluaXRJbWFnZSglMjJodHRwcyUzQSUyRiUyRmRvejZqMmI2cWY0azkuY2xvdWRmcm9udC5uZXQlMkZhcmNoaXZlJTJGZDNkbWozYWNhaXpoYmEuY2xvdWRmcm9udC5uZXQlMkZhdHRhY2htZW50cyUyRmUzYmE3MTY0MjAwM2RmMWQ5NmIyNmE1ZDQ1YzljNDViNmFhNGYyN2YlMkZzdG9yZSUyRmZpbGwlMkYxMTkwJTJGNDgwJTJGNTBmMDEyOWY5YmNiZjFmNmJhZjAwZDgwYjNiNjU0Nzk5Y2U2NzlmOTQ4NTQ0MzMzZjRjOGZjMjg1MDBkJTJGcmVuaWNrYmVsbDExOTAuanBnJTIyKSUwQXNyYyhzMSkuaW52ZXJ0KCkuZGlmZihvc2MoMTMlMkMwLjUlMkM1KSkuY29udHJhc3QoJTIwKCklMjAlM0QlM0UlMjBNYXRoLnNpbih0aW1lKSUyMColMjA1JTIwKS5vdXQobzApJTBBJTBBczIuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBdm9yb25vaSgyNSUyQzAlMkMwKSUwQSUyMCUyMC5tb2R1bGF0ZVNjcm9sbFkoc3JjKHMyKSUyQzElMkMyKSUwQSUyMCUyMC5vdXQobzEpJTBBJTJGJTJGc2hhcGUoc3JjKHMyKSUyQzAuOCkua2FsZWlkKCgpJTNEJTNFNiUyQk1hdGguc2luKHRpbWUpKjQpLm91dChvMSklMEElMkYlMkYuaW52ZXJ0KCkuZGlmZihvc2MoMTMlMkMwLjUlMkM1KSkuY29udHJhc3QoJTIwKCklMjAlM0QlM0UlMjBNYXRoLnNpbih0aW1lKSUyMColMjA1JTIwKS5vdXQobzEpJTBBJTBBczMuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGdXBsb2FkLndpa2ltZWRpYS5vcmclMkZ3aWtpcGVkaWElMkZjb21tb25zJTJGMSUyRjFhJTJGQWJvdXRfdG9fTGF1bmNoXyUyNTI4MjYwNzUzMjAzNTIlMjUyOS5qcGclMjIpJTBBc3JjKHMzKS5pbnZlcnQoKS5kaWZmKG9zYygxMyUyQzAuNSUyQzUpKS5jb250cmFzdCglMjAoKSUyMCUzRCUzRSUyME1hdGguc2luKHRpbWUpJTIwKiUyMDUlMjApLm91dChvMiklMEElMEFzMC5pbml0SW1hZ2UoJTIyaHR0cHMlM0ElMkYlMkZpbWcuaS1zY21wLmNvbSUyRmNkbi1jZ2klMkZpbWFnZSUyRmZpdCUzRGNvbnRhaW4lMkN3aWR0aCUzRDEwOTglMkNmb3JtYXQlM0RhdXRvJTJGc2l0ZXMlMkZkZWZhdWx0JTJGZmlsZXMlMkZzdHlsZXMlMkYxMjAweDgwMCUyRnB1YmxpYyUyRmQ4JTJGaW1hZ2VzJTJGbWV0aG9kZSUyRjIwMTklMkYxMSUyRjI3JTJGNmIxYmE4NWMtMDliYi0xMWVhLWFmY2QtN2IzMDhiZTNiYTQ1X2ltYWdlX2hpcmVzXzEyMjk0MS5KUEclM0ZpdG9rJTNEeV9XS3d2aTAlMjZ2JTNEMTU3NDgyODk5NCUyMiklMEF2b3Jvbm9pKDI1JTJDMCUyQzApJTBBJTIwJTIwLm1vZHVsYXRlU2Nyb2xsWShzcmMoczApJTJDMSUyQzIpJTBBJTIwJTIwLm91dChvMyklMEElMkYlMkZzcmMoczApLmludmVydCgpLmRpZmYob3NjKDEzJTJDMC41JTJDNSkpLmNvbnRyYXN0KCUyMCgpJTIwJTNEJTNFJTIwTWF0aC5zaW4odGltZSklMjAqJTIwNSUyMCkub3V0KG8zKSUwQXJlbmRlcigp|multiple screens]]

====== Steve teach everyone one cool thing about Hydra, round 3 ======
add(texture,brightness)
add can add a texture to an existing canvas. Argument 1 is the texture argument 2 is the brightness. 
[[https://hydra.ojack.xyz/api/#functions/add/0|Add on the api]]

[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwZGVmYXVsdCUwQXMxLmluaXRJbWFnZSglMjJodHRwcyUzQSUyRiUyRmRvejZqMmI2cWY0azkuY2xvdWRmcm9udC5uZXQlMkZhcmNoaXZlJTJGZDNkbWozYWNhaXpoYmEuY2xvdWRmcm9udC5uZXQlMkZhdHRhY2htZW50cyUyRmUzYmE3MTY0MjAwM2RmMWQ5NmIyNmE1ZDQ1YzljNDViNmFhNGYyN2YlMkZzdG9yZSUyRmZpbGwlMkYxMTkwJTJGNDgwJTJGNTBmMDEyOWY5YmNiZjFmNmJhZjAwZDgwYjNiNjU0Nzk5Y2U2NzlmOTQ4NTQ0MzMzZjRjOGZjMjg1MDBkJTJGcmVuaWNrYmVsbDExOTAuanBnJTIyKSUwQXMyLmluaXRJbWFnZSgnaHR0cHMlM0ElMkYlMkZlbmNyeXB0ZWQtdGJuMC5nc3RhdGljLmNvbSUyRmltYWdlcyUzRnElM0R0Ym4lM0FBTmQ5R2NTaTFjczZaOFlKN2wwdEdGSWowQ1k4ZGRsR1NybjZMaFRucjRsN1RIVWQlMjZzJyklMEElMEElMEElMkYlMkZzaGFwZSgpLnNjYWxlKDAuNSkuYWRkKHNoYXBlKDQpJTJDJTVCMCUyQzAuMjUlMkMwLjUlMkMwLjc1JTJDMSU1RCkub3V0KG8wKSUwQSUwQSUyRiUyRnNyYyhzMSkuYWRkKHNyYyhzMikpLmxheWVyKHNoYXBlKDQpLmNvbG9yKDAlMkMxJTJDMCUyQygpJTNEJTNFTWF0aC5zaW4odGltZSoyKSkpLm91dCgpJTBBc3JjKHMxKS5hZGQoc3JjKHMyKSkub3V0KCklMEElMEFwYi5zZXROYW1lKCUyMm15R3JhcGhpY3MlMjIpJTBB|merge images]]

=== ergerg===
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwZGVmYXVsdCUwQXMxLmluaXRJbWFnZSglMjJodHRwcyUzQSUyRiUyRmRvejZqMmI2cWY0azkuY2xvdWRmcm9udC5uZXQlMkZhcmNoaXZlJTJGZDNkbWozYWNhaXpoYmEuY2xvdWRmcm9udC5uZXQlMkZhdHRhY2htZW50cyUyRmUzYmE3MTY0MjAwM2RmMWQ5NmIyNmE1ZDQ1YzljNDViNmFhNGYyN2YlMkZzdG9yZSUyRmZpbGwlMkYxMTkwJTJGNDgwJTJGNTBmMDEyOWY5YmNiZjFmNmJhZjAwZDgwYjNiNjU0Nzk5Y2U2NzlmOTQ4NTQ0MzMzZjRjOGZjMjg1MDBkJTJGcmVuaWNrYmVsbDExOTAuanBnJTIyKSUwQXMyLmluaXRJbWFnZSgnaHR0cHMlM0ElMkYlMkZlbmNyeXB0ZWQtdGJuMC5nc3RhdGljLmNvbSUyRmltYWdlcyUzRnElM0R0Ym4lM0FBTmQ5R2NTaTFjczZaOFlKN2wwdEdGSWowQ1k4ZGRsR1NybjZMaFRucjRsN1RIVWQlMjZzJyklMEElMEElMEElMkYlMkZzaGFwZSgpLnNjYWxlKDAuNSkuYWRkKHNoYXBlKDQpJTJDJTVCMCUyQzAuMjUlMkMwLjUlMkMwLjc1JTJDMSU1RCkub3V0KG8wKSUwQSUwQSUyRiUyRnNyYyhzMSkuYWRkKHNyYyhzMikpLmxheWVyKHNoYXBlKDQpLmNvbG9yKDAlMkMxJTJDMCUyQygpJTNEJTNFTWF0aC5zaW4odGltZSoyKSkpLm91dCgpJTBBc3JjKHMxKS5hZGQoc3JjKHMyKSkub3V0KCklMEElMEFwYi5zZXROYW1lKCUyMm15R3JhcGhpY3MlMjIpJTBB|send from window]]
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEElMkYlMkZDTkRTRCUwQSUyRiUyRmh0dHAlM0ElMkYlMkZtYWxpdHppbmNvcnRlcy5uZXQlMkYlMEElMkYlMkYlMjBzYW5kJTIwc3BpcmFscyUwQSUwQXMwLmluaXRTdHJlYW0oJTIybXlHcmFwaGljcyUyMiklMEFzcmMoczApLm1vZHVsYXRlKG5vaXNlKDMpKS5vdXQobzApJTBBJTBB|source from window]]
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwc2VsZWN0JTIwYSUyMHdpbmRvdyUwQXMwLmluaXRTY3JlZW4oKSUwQXMxLmluaXRTY3JlZW4oKSUwQXMyLmluaXRTY3JlZW4oKSUwQXNyYyhzMCkuYWRkKHNyYyhzMSkpLmFkZChzcmMoczIpKS5vdXQobzAp|sharing multiple windows]]

====== other stuff =====
[[https://hydra.ojack.xyz/?code=JTJGJTJGJTIwY2xlYXIlMjB0aGUlMjBidWZmZXJzJTBBb3NjKCkub3V0KG8wKSUwQWh1c2goKQ==|simplest]]
[[https://hydra.ojack.xyz/?code=c2V0SW50ZXJ2YWwoKCklM0QlM0UlN0Jzb2xpZCgxJTJDMCUyQzEpLm91dChvMCklN0QlMkMxMDApJTBBc2V0SW50ZXJ2YWwoKCklM0QlM0UlN0JodXNoKCklN0QlMkM1MDAp|simple]]
[[https://hydra.ojack.xyz/?code=czEuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTBBJTBBc3JjKG8wKSUwQSUyMCUyMC5tb2R1bGF0ZVNjYWxlKG9zYyg4MCklMkMwLjAxKS5jb250cmFzdCglMjAoKSUyMCUzRCUzRSUyME1hdGguc2luKHRpbWUpJTIwKiUyMDUlMjApJTBBJTIwJTIwLmxheWVyKCUwQSUyMCUyMG9zYygxMyUyQzAuNSUyQzUpLm1hc2soc3JjKHMxKSklMEElMjAlMjApLm91dChvMCk%3D|this]]
[[https://hydra.ojack.xyz/?code=czEuaW5pdEltYWdlKCUyMmh0dHBzJTNBJTJGJTJGZG96NmoyYjZxZjRrOS5jbG91ZGZyb250Lm5ldCUyRmFyY2hpdmUlMkZkM2RtajNhY2FpemhiYS5jbG91ZGZyb250Lm5ldCUyRmF0dGFjaG1lbnRzJTJGZTNiYTcxNjQyMDAzZGYxZDk2YjI2YTVkNDVjOWM0NWI2YWE0ZjI3ZiUyRnN0b3JlJTJGZmlsbCUyRjExOTAlMkY0ODAlMkY1MGYwMTI5ZjliY2JmMWY2YmFmMDBkODBiM2I2NTQ3OTljZTY3OWY5NDg1NDQzMzNmNGM4ZmMyODUwMGQlMkZyZW5pY2tiZWxsMTE5MC5qcGclMjIpJTBBJTBBJTBBc3JjKG8wKSUwQSUyMCUyMC5tb2R1bGF0ZVNjYWxlKG9zYyg4MCklMkMwLjAxKSUwQSUyMCUyMC5sYXllciglMEElMjAlMjBvc2MoMTMlMkMwLjUlMkM1KS5tYXNrKHNyYyhzMSkpJTBBJTIwJTIwKS5vdXQobzAp|more obvious this?]]
====== Steve preparing for public hydra presentations ======
Use the program. Show can use source for picture, video, other screen, and camera.

Press 5 buttons and show what it does and show how much code it will take.

Sharing hydra with non programmers
This program uses a Javascript and a library called hydra to make these weird animations. This is an animation sequencer. You use buttons to add animations of effects to a texture.

R to run

l to loop

L to stop loop

a to re print source

c for colorama

s for solid

r for resolution

o for osc

S for shape

v for voroni

d for diff

n for noise

p for posterize

k for kaleid

m for shift

b for brightness

h for hue

c for saturation

t for rotate

g for gradient

clearAll() for clear all


Before my presentation my classmates have basically explained what hydra is. For those who are still not clear, hydra is a Javascript library that allows you to make cool animations with code. However, when I was using this library I ran into a problem. I was new to this library and programming in general. I did not know how to use it or it's potential. So, I developed this program that can help you use all of the functions and all of what my classmates explained to you just with a click of a button. Click 5 functions, use them, loop them. GIve audience a chance to look at it and show them how much code it would have needed to write and understand but, they could just do all that with a few clicks. Not only can it source pictures, it can source, videos, other tabs on device, and camerfa. (SHOW premade examples). All that can be done with the same method of clicking on the keyboard. So, I think this is a great tool for beginerers to knwo what hydra or programming in general is capable of. It can also be useful to programmers to want to test out ideas of how different animations stacked together or sequnced together would look.