Differences

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

--- zoey-lin-hydra-presentations [2022/12/28 17:01] – zoey.lin
+++ zoey-lin-hydra-presentations [2022/12/29 03:34] (current) – renick
@@ Line 1: / Line 1: @@
-=====Hydra Presentations=====
+======Hydra Presentations======
 Made by: [[zoey-lin|Zoey]]
@@ Line 12: / Line 12: @@
   - [[zoey-lin-hydra-presentations#color|Color]]
   - [[zoey-lin-hydra-presentations#render|Render]]
+  - [[zoey-lin-hydra-presentations#pixelate|Pixelate]]
 ====Kaleid====
 ===Simple Example===
-<HTML>
-<iframe
-src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSUyQzAuNSkua2FsZWlkKDUwKS5vdXQobzAp" width = "100%" height = "500">
-</iframe>
-</HTML>
 **Code**
 <code>
@@ Line 38: / Line 33: @@
 </code>
-===Complex Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSklMEElMDkua2FsZWlkKDUpJTBBJTA5LmNvbG9yKDMlMkMwLjkxJTJDMC4zOSklMEElMDkucm90YXRlKDAuOSUyQyUyMDAuMSklMEElMDkubW9kdWxhdGUobzAlMkMlMjAoKSUyMCUzRCUzRSUyMG1vdXNlLnglMjAqJTIwMC4wMDAzKSUwQSUyMCUyMCUwOS5vdXQobzApJTBB" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSUyQzAuNSkua2FsZWlkKDUwKS5vdXQobzAp" width = "100%" height = "500">
 </iframe>
 </HTML>
+===Complex Example===
 **Code**
 <code>
@@ Line 59: / Line 54: @@
 osc(25,-0.1)
 .kaleid(5)
-- over here I set the kaleid to five, so you can see the shape is pentagon.
+- over here I set the kaleid to five, so you can see the shape is the pentagon.
 .color(3,0.91,0.39)
-- This color function is hard for me. Because the color function over here is different from SVG.js and p5.js So i am still find the answer
+- This color function is hard for me. Because the color function over here is different from SVG.js and p5.js So I am still finding the answer
 .rotate(0.9, 0.1)
-- I am still finding what is the first number mean, but the second number is mean how fast the rotate should be.
+- I am still finding what the first number means, but the second number is mean how fast the rotate should be.
 .modulate(o0, () => mouse.x * 0.0003)
-- In this function it is work when you move your mouse. The first number is texture, In hydra there have 4 different texture, ex.o0,o1,o2,o3
+- In this function, works when you move your mouse. The first number is texture, In hydra, there have 4 different textures, ex.o0,o1,o2,o3
 .out()
 </code>
-====Repeat====
+<HTML>
-===Simple Example===
+<iframe
-<HTML><iframe
+src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSklMEElMDkua2FsZWlkKDUpJTBBJTA5LmNvbG9yKDMlMkMwLjkxJTJDMC4zOSklMEElMDkucm90YXRlKDAuOSUyQyUyMDAuMSklMEElMDkubW9kdWxhdGUobzAlMkMlMjAoKSUyMCUzRCUzRSUyMG1vdXNlLnglMjAqJTIwMC4wMDAzKSUwQSUyMCUyMCUwOS5vdXQobzApJTBB" width = "100%" height = "500">
-src = "https://hydra.ojack.xyz/?code=c2hhcGUoNCUyQzAuOCkucmVwZWF0KDYuMCUyQzcuMCkub3V0KCklMEE%3D" width = "100%" height = "500">
 </iframe>
 </HTML>
+====Repeat====
+===Simple Example===
 **Code**
 <code>
@@ Line 85: / Line 81: @@
 </code>
-===Complex Example===
+<HTML><iframe
-<HTML>
+src = "https://hydra.ojack.xyz/?code=c2hhcGUoNCUyQzAuOCkucmVwZWF0KDYuMCUyQzcuMCkub3V0KCklMEE%3D" width = "100%" height = "500">
-<iframe
-src = "https://hydra.ojack.xyz/?code=b3NjKDklMkMlMjAtMC4xJTJDJTIwMTkpJTBBJTA5JTJGJTJGLmNvbG9yKCU1QjcwJTJDJTIwMCUyQyUyMDU4LjAyNSUyQyUyMDAlNUQlMkMlMjAlNUI1Mi42NjIlMkMlMjAwLjgxJTJDJTIwNTElMkMlMjAwJTVEJTJDJTIwJTVCMTI3LjUzNCUyQyUyMDAlMkMlMjA1MSUyQyUyMDAlNUQpJTBBJTA5LmthbGVpZCg2KSUwQSUwOS5yZXBlYXQoMiUyQyUyMDQpJTBBJTA5Lm91dCgpJTNC" width = "100%" height = "500">
 </iframe>
 </HTML>
+===Complex Example===
 **Code**
 <code>
@@ Line 100: / Line 95: @@
 </code>
-====modulateScroll====
-===Simple Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTApJTIwJTBBJTIwJTIwLm1vZHVsYXRlU2Nyb2xsWShvc2MoNTApJTJDMC4xJTJDMCklMEElMjAlMjAub3V0KCk%3D" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=b3NjKDklMkMlMjAtMC4xJTJDJTIwMTkpJTBBJTA5JTJGJTJGLmNvbG9yKCU1QjcwJTJDJTIwMCUyQyUyMDU4LjAyNSUyQyUyMDAlNUQlMkMlMjAlNUI1Mi42NjIlMkMlMjAwLjgxJTJDJTIwNTElMkMlMjAwJTVEJTJDJTIwJTVCMTI3LjUzNCUyQyUyMDAlMkMlMjA1MSUyQyUyMDAlNUQpJTBBJTA5LmthbGVpZCg2KSUwQSUwOS5yZXBlYXQoMiUyQyUyMDQpJTBBJTA5Lm91dCgpJTNC" width = "100%" height = "500">
 </iframe>
 </HTML>
+====modulateScroll====
+===Simple Example===
 **Code**
 <code>
@@ Line 129: / Line 124: @@
 </code>
-===Complex Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTAlMkMlMjAxKSUyMCUwQSUyMCUyMC5tb2R1bGF0ZVNjcm9sbFkob3NjKCU1QjEwJTJDMTAwJTVEKSUyQzAuMSUyQzApJTBBJTIwJTIwLnJvdGF0ZSglMjAoKSUyMCUzRCUzRSUyMHRpbWUlMjUzNjAlMjAlMkMwLjEpJTBBJTIwJTIwLmNvbG9yKDElMkMwJTJDMyklMEElMjAlMjAub3V0KCk%3D" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTApJTIwJTBBJTIwJTIwLm1vZHVsYXRlU2Nyb2xsWShvc2MoNTApJTJDMC4xJTJDMCklMEElMjAlMjAub3V0KCk%3D" width = "100%" height = "500">
 </iframe>
 </HTML>
+===Complex Example===
 **Code**
 <code>
@@ Line 164: / Line 159: @@
 </code>
-====Color====
-===Simple Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=b3NjKCkuY29sb3IoJTVCMSUyQzAlMkMwJTVEJTJDJTVCMCUyQzElMkMwJTVEJTJDJTVCMCUyQzAlMkMxJTVEKS5vdXQobzAp" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTAlMkMlMjAxKSUyMCUwQSUyMCUyMC5tb2R1bGF0ZVNjcm9sbFkob3NjKCU1QjEwJTJDMTAwJTVEKSUyQzAuMSUyQzApJTBBJTIwJTIwLnJvdGF0ZSglMjAoKSUyMCUzRCUzRSUyMHRpbWUlMjUzNjAlMjAlMkMwLjEpJTBBJTIwJTIwLmNvbG9yKDElMkMwJTJDMyklMEElMjAlMjAub3V0KCk%3D" width = "100%" height = "500">
 </iframe>
 </HTML>
+====Color====
+===Simple Example===
 **Code**
 <code>
@@ Line 184: / Line 179: @@
 </code>
-===Complex Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTAlMkMwLjEpLmNvbG9yKDAlMkMxJTJDMCklMEElMjAlMjAuYWRkKG9zYygxMCUyQzAuMSUyQzApLmNvbG9yKDElMkMxJTJDMCkpJTBBJTIwJTIwLmFkZChvc2MoNjAlMkMwLjElMkMwKS5jb2xvcigwJTJDMCUyQzEpKSUwQSUyMCUyMC5hZGQob3NjKDY0JTJDMC4xJTJDMCkuY29sb3IoMSUyQzAlMkMwKSklMEElMjAlMjAub3V0KG8wKQ%3D%3D" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=b3NjKCkuY29sb3IoJTVCMSUyQzAlMkMwJTVEJTJDJTVCMCUyQzElMkMwJTVEJTJDJTVCMCUyQzAlMkMxJTVEKS5vdXQobzAp" width = "100%" height = "500">
 </iframe>
 </HTML>
+===Complex Example===
 **Code**
 <code>
@@ Line 208: / Line 203: @@
 </code>
-====Render====
-===Simple Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=bm9pc2UoKS5jb2xvcigxJTJDMCUyQzEpLm91dChvMCklMEFub2lzZSgpLmNvbG9yKDMlMkMwJTJDNSkub3V0KG8xKSUwQW5vaXNlKCkuY29sb3IoMCUyQzUlMkMyKS5vdXQobzIpJTBBbm9pc2UoKS5jb2xvcigwJTJDMSUyQzEpLm91dChvMyklMEFyZW5kZXIoKQ%3D%3D" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTAlMkMwLjEpLmNvbG9yKDAlMkMxJTJDMCklMEElMjAlMjAuYWRkKG9zYygxMCUyQzAuMSUyQzApLmNvbG9yKDElMkMxJTJDMCkpJTBBJTIwJTIwLmFkZChvc2MoNjAlMkMwLjElMkMwKS5jb2xvcigwJTJDMCUyQzEpKSUwQSUyMCUyMC5hZGQob3NjKDY0JTJDMC4xJTJDMCkuY29sb3IoMSUyQzAlMkMwKSklMEElMjAlMjAub3V0KG8wKQ%3D%3D" width = "100%" height = "500">
 </iframe>
 </HTML>
+====Render====
+===Simple Example===
 **Code**
 <code>
@@ Line 232: / Line 227: @@
 </code>
-===Complex Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=JTJGJTJGbzAlMEFub2lzZSgpJTBBJTIwJTIwLnBpeGVsYXRlKDMwJTJDNDApJTBBJTIwJTIwLmNvbG9yKDElMkMwJTJDMyklMEElMjAlMjAub3V0KG8wKSUwQSUyRiUyRm8xJTBBb3NjKDUwJTJDJTIwLTAuMSUyQyUyMDEwKSUwQSUyMCUyMC5rYWxlaWQoNSklMEElMjAlMjAucmVwZWF0KDglMkMlMjA1KSUwQSUyMCUyMC5vdXQobzEpJTBBJTJGJTJGbzIlMEFub2lzZSgxMCUyQzAuMSklMEElMjAlMjAuY29sb3IoMCUyQzElMkMwKSUwQSUyMCUyMC5hZGQob3NjKDEwJTJDMC4xJTJDMCkuY29sb3IoMSUyQzElMkMwKSklMEElMjAlMjAuYWRkKG9zYyg2MCUyQzAuMSUyQzApLmNvbG9yKDAlMkMwJTJDMSkpJTBBJTIwJTIwLm91dChvMiklMEElMkYlMkZvMyUwQW5vaXNlKDEwJTJDJTIwMC4xKS5jb2xvcigzJTJDMSUyQzkpLm91dChvMyklMEFyZW5kZXIoKQ%3D%3D" width = "100%" height = "500">
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoKS5jb2xvcigxJTJDMCUyQzEpLm91dChvMCklMEFub2lzZSgpLmNvbG9yKDMlMkMwJTJDNSkub3V0KG8xKSUwQW5vaXNlKCkuY29sb3IoMCUyQzUlMkMyKS5vdXQobzIpJTBBbm9pc2UoKS5jb2xvcigwJTJDMSUyQzEpLm91dChvMyklMEFyZW5kZXIoKQ%3D%3D" width = "100%" height = "500">
 </iframe>
 </HTML>
+===Complex Example===
 **Code**
 <code>
@@ Line 261: / Line 256: @@
 render()
 </code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=JTJGJTJGbzAlMEFub2lzZSgpJTBBJTIwJTIwLnBpeGVsYXRlKDMwJTJDNDApJTBBJTIwJTIwLmNvbG9yKDElMkMwJTJDMyklMEElMjAlMjAub3V0KG8wKSUwQSUyRiUyRm8xJTBBb3NjKDUwJTJDJTIwLTAuMSUyQyUyMDEwKSUwQSUyMCUyMC5rYWxlaWQoNSklMEElMjAlMjAucmVwZWF0KDglMkMlMjA1KSUwQSUyMCUyMC5vdXQobzEpJTBBJTJGJTJGbzIlMEFub2lzZSgxMCUyQzAuMSklMEElMjAlMjAuY29sb3IoMCUyQzElMkMwKSUwQSUyMCUyMC5hZGQob3NjKDEwJTJDMC4xJTJDMCkuY29sb3IoMSUyQzElMkMwKSklMEElMjAlMjAuYWRkKG9zYyg2MCUyQzAuMSUyQzApLmNvbG9yKDAlMkMwJTJDMSkpJTBBJTIwJTIwLm91dChvMiklMEElMkYlMkZvMyUwQW5vaXNlKDEwJTJDJTIwMC4xKS5jb2xvcigzJTJDMSUyQzkpLm91dChvMyklMEFyZW5kZXIoKQ%3D%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+====Pixelate====
+===Simple Example===
+**Code**
+<code>
+noise()
+ .pixelate(30,40)
+ .color(1,0,3)
+  .out()
+</code>
+**Explanation of pixelate**
+<code>
+First of all, you can see that this picture is made up of many small squares the reason why it worked like this is that I use a code called pixelate, pixelate is kind of like picture quality, If the number in the code is larger, it means the picture quality is clearer. The first number is the mean of the x-position and the second one is the y-position, it is just like normal math. So if I set the x-position to 1000 it means the x-position will have 1000 small squares.
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoKSUwQSUyRiUyRi5waXhlbGF0ZSh4LXBvc2l0aW9uJTJDeS1wb3NpdGlvbiklMEElMjAucGl4ZWxhdGUoMzAlMkM0MCklMEElMkYlMkYuY29scm8ocmVkJTJDZ3JlZW4lMkNibHVlKSUyMCUyMCUwQSUyMCUyMC5jb2xvcigxJTJDMCUyQzMpJTBBJTIwJTIwLm91dCgpJTBB" width = "100%" height = "500">
+</iframe>
+</HTML>
+===Complex Example===
+**Code**
+<code>
+noise()
+  .color(4,2,0)
+  .add(osc(20,0.6,0.7))
+  .pixelate(200,40)
+  .out()
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoKSUwQSUyMCUyMC5jb2xvcig0JTJDMiUyQzApJTBBJTIwJTIwLmFkZChvc2MoMjAlMkMwLjYlMkMwLjcpKSUwQSUyMCUyMC5waXhlbGF0ZSgyMDAlMkM0MCklMEElMjAlMjAub3V0KCklMEE%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+===More Complex Example===
+**Code**
+<code>
+noise()
+  .color(2,0,5)
+  .kaleid(50)
+  .pixelate(200,40)
+  .add(osc(10,0.5).color(2,1,1))
+  .out()
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoKSUwQSUyMCUyMC5jb2xvcigyJTJDMCUyQzUpJTBBJTIwJTIwLmthbGVpZCg1MCklMEElMjAlMjAucGl4ZWxhdGUoMjAwJTJDNDApJTBBJTIwJTIwLmFkZChvc2MoMTAlMkMwLjUpLmNvbG9yKDIlMkMxJTJDMSkpJTBBJTIwJTIwLm91dCgp" width = "100%" height = "500">
+</iframe>
+</HTML>