Differences

This shows you the differences between two versions of the page.

--- yiler-huang-hydra-presentations [2022/12/25 18:13] – created yiler.huang
+++ yiler-huang-hydra-presentations [2023/01/29 21:01] (current) – yiler.huang
@@ Line 1: / Line 1: @@
-===== Hydra Presentations =====
+====== Hydra Presentations ======
 By [[yiler-huang| Yiler Huang]]
-==== moudlateKaleid ====
+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
-==== Simple ====
+The ones below are my favorite ones.
+==== modulateKaleid ====
+=== Simple ===
 https://hydra.ojack.xyz/?code=b3NjKDEwJTJDMSUyQzIpLm1vZHVsYXRlS2FsZWlkKHZvcm9ub2koMTAlMkMxKSUyQygpJTIwJTNEJTNFJTIwbW91c2UueCUyRndpZHRoKS5vdXQoKQ%3D%3D
@@ Line 24: / Line 33: @@
 **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.