Steve Hydra Studies

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) Here test 2 3

End Gave test subject drugs. Not interesitng enough more drugs becuase research paper needs content. Then weird things started to happen to test subject

Real world uses of hydra
The main function used.
1. initImg
The other function OSC
Example.

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

load script API step1 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

https://levelup.gitconnected.com/draw-an-svg-to-canvas-and-download-it-as-image-in-javascript-f7f7713cf81f

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()

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:

API(search for MULTIPLE OUTPUTS section)

Here test 2 3 Up old:

api simple multiple screens

add(texture,brightness) add can add a texture to an existing canvas. Argument 1 is the texture argument 2 is the brightness. Add on the api

merge images

ergerg

send from window source from window sharing multiple windows

simplest simple this more obvious this?

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.