steve-wang-hydra-presentations [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.
======Hydra Presentations======

Made by: [[steve-wang|Steve Wang]]

I presented a few things about hydra here are some of them.

====== Install and Run Hydra Locally ======
** Make sure system is up to date **
This tutorial will also teach you how to load your own files into Hydra

1. Make sure npm and nodejs is installed:
Check if they are installed.
<code>
node --help
npm --help
</code>
If you one of those do not exist make sure to download it.
Download on Linux:
<code>
pacman -S npm nodejs
</code>
Download on Mac:
<code>
brew install node
</code>
2. Do:
<code>
npm install --global yarn
</code>
3. Download zip from github:
https://github.com/hydra-synth/hydra
For now use this old version (The newest one is broken): https://github.com/hydra-synth/hydra/tree/0b10d01a5ed9fb2b07445474b8f9e14d8ecf5a66


[[students:yiler-huang|Yiler Huang found it]]


4. Unzip it and move the hydra main directory to where you want it to be.

5. Go to the hydra main directory and type this:
<code>
yarn install
</code>
if that does not work try this:
<code>
yarn install --ignore-engines
</code>
6. Then, go to backend and make a directory called:
 <code>
public
</code>


7. Put whatever you want to load in Hydra inside it. Try putting this picture I downloaded from somewhere on the internet:

{{downloaded-from-internet-smile.png?400|}}

[[https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.maxpixel.net%2Fstatic%2Fphoto%2F1x%2FThumbs-Up-Smiley-Face-Face-Smiley-Happy-Emoji-4007573.png&imgrefurl=https%3A%2F%2Fwww.maxpixel.net%2FThumbs-Up-Smiley-Face-Face-Smiley-Happy-Emoji-4007573&tbnid=2iGQ77i_hYR29M&vet=12ahUKEwjFs-Lq3_z6AhUJgJQKHVbzBKcQMygAegUIARCPAg..i&docid=Iw5Kc7RHOcLl-M&w=960&h=671&q=smiley%20face%20emoji&hl=en&ved=2ahUKEwjFs-Lq3_z6AhUJgJQKHVbzBKcQMygAegUIARCPAg|source]]

8. The go back to backend and open server.js on the last line of that file, add this:
<code>
app.use(express.static('public'))
</code>

9. Go back to hydra main and type:
<code>
yarn serve
</code>

===== Sources =====
  - https://github.com/hydra-synth/hydra
  - https://hydra.ojack.xyz/api/
  - https://hydra.ojack.xyz/docs/#/

====== 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. 

====== 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:
{{:steve-hydra-out-area.png?400|}}

[[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]]