yiler-huang-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 ======

By [[yiler-huang| Yiler Huang]]

We had 5 Hydra presentations this semester (6 if including the one we showed to the public), they are:
  - modulatePixelate
  - P5 class
  - a.fft[]
  - initCam
  - modulateKaleid

The ones below are my favorite ones.

==== modulateKaleid ====

=== Simple ===

https://hydra.ojack.xyz/?code=b3NjKDEwJTJDMSUyQzIpLm1vZHVsYXRlS2FsZWlkKHZvcm9ub2koMTAlMkMxKSUyQygpJTIwJTNEJTNFJTIwbW91c2UueCUyRndpZHRoKS5vdXQoKQ%3D%3D

<html>
<iframe src="https://hydra.ojack.xyz/?code=b3NjKDEwJTJDMSUyQzIpLm1vZHVsYXRlS2FsZWlkKHZvcm9ub2koMTAlMkMxKSUyQygpJTIwJTNEJTNFJTIwbW91c2UueCUyRndpZHRoKS5vdXQoKQ%3D%3D" width = "100%" height = "900"></iframe>
</html>

=== Complex ===

https://hydra.ojack.xyz/?code=b3NjKDEwJTJDJTIwMSUyQyUyMDIpJTBBJTA5Lm1vZHVsYXRlS2FsZWlkKHZvcm9ub2koMTAlMkMlMjAxKSUyQzEwKSUwQSUwOS5sYXllcihvc2MoMTAlMkMxJTJDMikubWFzayhzaGFwZSgzJTJDJTIwMC41KSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC5tb2R1bGF0ZUthbGVpZChvc2MoMiUyQzEpJTJDMSklMEElMDklMDkubW9kdWxhdGVQaXhlbGF0ZShub2lzZSgxJTJDMSklMkMxMDApKSklMEElMDkubWFzayhzaGFwZSg0JTJDMSkubW9kdWxhdGVLYWxlaWQodm9yb25vaSgxJTJDMSklMkMyKSklMEElMDkub3V0KCk%3D

<html>
<iframe src="https://hydra.ojack.xyz/?code=b3NjKDEwJTJDJTIwMSUyQyUyMDIpJTBBJTA5Lm1vZHVsYXRlS2FsZWlkKHZvcm9ub2koMTAlMkMlMjAxKSUyQzEwKSUwQSUwOS5sYXllcihvc2MoMTAlMkMxJTJDMikubWFzayhzaGFwZSgzJTJDJTIwMC41KSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC5tb2R1bGF0ZUthbGVpZChvc2MoMiUyQzEpJTJDMiklMEElMDklMDkubW9kdWxhdGVQaXhlbGF0ZShub2lzZSgxJTJDMSklMkMxMDApKSklMEElMDkubWFzayhzaGFwZSg0JTJDMSkubW9kdWxhdGVLYWxlaWQodm9yb25vaSgxJTJDMSklMkMyKSklMEElMDkub3V0KCk%3D" width = "100%" height = "900"></iframe>
</html>

=== Explanation ===

**modulateKaleid()** is a useful function that could apply **kaleid()** effect to different elements based on the **texture** you choose. The first argument of the function is the texture, and the second one is the strength of the effect. In the first examples above, I used a **voronoi** texture on the oscillation.

==== initCam() ====

==== Simple ====

https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTBBJTBBc3JjKHMwKS5yZXBlYXQoKCklMjAlM0QlM0UlMjBNYXRoLnNpbih0aW1lKSo0KS5vdXQoKQ%3D%3D

<html>
<iframe src="https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTBBJTBBc3JjKHMwKS5yZXBlYXQoKCklMjAlM0QlM0UlMjBNYXRoLnNpbih0aW1lKSo0KS5vdXQoKQ%3D%3D" allow="camera;microphone" width="100%" height="900"></iframe>
</html>

=== Complex ===

https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTBBYS5zZXRTY2FsZSgxKSUwQXNyYyhzMCklMEElMjAlMjAubW9kdWxhdGVQaXhlbGF0ZShub2lzZSg1MCUyQyUyMDEpJTJDKCklMjAlM0QlM0UlMjBNYXRoLnNpbih0aW1lKSo1MDApJTBBJTIwJTIwLmRpZmYob3NjKDUlMkMxKSkucGl4ZWxhdGUoMTAwMCkubWFzayhzaGFwZSgzJTJDMSkucm90YXRlKDElMkMxKSkub3V0KCk%3D

<html>
<iframe src="https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTBBYS5zZXRTY2FsZSgxKSUwQXNyYyhzMCklMEElMjAlMjAubW9kdWxhdGVQaXhlbGF0ZShub2lzZSg1MCUyQyUyMDEpJTJDKCklMjAlM0QlM0UlMjBNYXRoLnNpbih0aW1lKSo1MDApJTBBJTIwJTIwLmRpZmYob3NjKDUlMkMxKSkucGl4ZWxhdGUoMTAwMCkubWFzayhzaGFwZSgzJTJDMSkucm90YXRlKDElMkMxKSkub3V0KCk%3D" allow="camera;microphone" width="100%" height="900"></iframe>
</html>

=== Explanation ===

initCam is a function that activates your web cam and put the things it captured into the Hydra editor. In order to show what you camera captured, you need to use the src() function to source the camera resource.

If you want it to work on Dokuwiki, you need to add **allow="camera;microphone"** in your iframe code.

=== a.fft[](audio) ===

=== Simple ===
https://hydra.ojack.xyz/?code=JTBBYS5zZXRTY2FsZSgxMCklMEFzaGFwZSgzJTJDMC4yNSUyQygpJTIwJTNEJTNFJTIwYS5mZnQlNUIwJTVEKS5vdXQoKSUwQQ%3D%3D

<HTML>
<iframe src = "https://hydra.ojack.xyz/?code=JTBBYS5zZXRTY2FsZSgxMCklMEFzaGFwZSgzJTJDMC4yNSUyQygpJTIwJTNEJTNFJTIwYS5mZnQlNUIwJTVEKS5vdXQoKSUwQQ%3D%3D" allow="camera;microphone" width = "100%" height = "900"></iframe>
</HTML>

=== Complex ===
https://hydra.ojack.xyz/?code=JTBBYS5zZXRTY2FsZSg3KSUwQWEuc2V0U21vb3RoKDAuNSklMEFvc2MoMTAlMkMwLjI1JTJDKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQpLm1vZHVsYXRlKG5vaXNlKDEpJTJDKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQpLm1vZHVsYXRlUGl4ZWxhdGUobm9pc2UoKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQpJTJDMzAwKS5vdXQoKSUwQQ%3D%3D

<HTML>
<iframe src = "https://hydra.ojack.xyz/?code=JTBBYS5zZXRTY2FsZSg3KSUwQWEuc2V0U21vb3RoKDAuNSklMEFvc2MoMTAlMkMwLjI1JTJDKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQpLm1vZHVsYXRlKG5vaXNlKDEpJTJDKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQpLm1vZHVsYXRlUGl4ZWxhdGUobm9pc2UoKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQpJTJDMzAwKS5vdXQoKSUwQQ%3D%3D" allow="camera;microphone" width = "100%" height = "900"></iframe>
</HTML>

=== Explanation ===

here is the API of Hydra

<HTML>
<iframe src = "https://hydra.ojack.xyz/api/#functions/fft/0" allow="camera;microphone" width = "800" height = "500"></iframe>
</HTML>

() => a.fft[<color #ed1c24>pitch</color>] is a function that transform the volume of the voice your microphone got into numbers. The <color #ed1c24>pitch</color> argument could decide how high the pitch you want the available sound input to be. I learned this function from the API above.

setScale() sets the scale of a.fft, the smaller the number is the bigger the output will be.

modulatePixelate() applies the texture you want onto a pixelate effect, so you can create pixelate effects that doesn't look blocky.