Differences

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

--- zoey-lin-hydra-presentations [2022/12/28 07:45] – created 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]]
-====Kaleid====
+===introduce Hydra===
-===Simple Example===
+Hydra is a computer program, most people use computer programs to make the computer work but now we are using a computer program to make photos or animations in Hydra.
-<HTML>
+↓↓↓ here are some simple Explanation of hydra code ↓↓↓
-<iframe
+  - [[zoey-lin-hydra-presentations#kaleid|Kaleid]]
-src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSUyQzAuNSkua2FsZWlkKDUwKS5vdXQobzAp" width = "100%" height = "900">
+  - [[zoey-lin-hydra-presentations#repeat|Repeat]]
-</iframe>
+  - [[zoey-lin-hydra-presentations#modulatescroll|Modulatescroll]]
-</HTML>
+  - [[zoey-lin-hydra-presentations#color|Color]]
+  - [[zoey-lin-hydra-presentations#render|Render]]
+  - [[zoey-lin-hydra-presentations#pixelate|Pixelate]]
+====Kaleid====
+===Simple Example===
 **Code**
 <code>
@@ Line 17: / Line 21: @@
 </code>
-**Explain**
+**Explanation**
 <code>
 osc(25,-0.1,0.5)
@@ Line 29: / Line 33: @@
 </code>
-===Complex Example===
 <HTML>
 <iframe
-src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSklMEElMDkua2FsZWlkKDUpJTBBJTA5LmNvbG9yKDMlMkMwLjkxJTJDMC4zOSklMEElMDkucm90YXRlKDAuOSUyQyUyMDAuMSklMEElMDkubW9kdWxhdGUobzAlMkMlMjAoKSUyMCUzRCUzRSUyMG1vdXNlLnglMjAqJTIwMC4wMDAzKSUwQSUyMCUyMCUwOS5vdXQobzApJTBB" width = "100%" height = "900">
+src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSUyQzAuNSkua2FsZWlkKDUwKS5vdXQobzAp" width = "100%" height = "500">
 </iframe>
 </HTML>
+===Complex Example===
 **Code**
 <code>
@@ Line 46: / Line 50: @@
 </code>
-**Explain**
+**Explanation**
 <code>
 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>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=b3NjKDI1JTJDLTAuMSklMEElMDkua2FsZWlkKDUpJTBBJTA5LmNvbG9yKDMlMkMwLjkxJTJDMC4zOSklMEElMDkucm90YXRlKDAuOSUyQyUyMDAuMSklMEElMDkubW9kdWxhdGUobzAlMkMlMjAoKSUyMCUzRCUzRSUyMG1vdXNlLnglMjAqJTIwMC4wMDAzKSUwQSUyMCUyMCUwOS5vdXQobzApJTBB" width = "100%" height = "500">
+</iframe>
+</HTML>
+====Repeat====
+===Simple Example===
+**Code**
+<code>
+shape(4,0.8).repeat(6.0,7.0).out()
+</code>
+<HTML><iframe
+src = "https://hydra.ojack.xyz/?code=c2hhcGUoNCUyQzAuOCkucmVwZWF0KDYuMCUyQzcuMCkub3V0KCklMEE%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+===Complex Example===
+**Code**
+<code>
+osc(9, -0.1, 19)
+	.kaleid(6)
+	.repeat(2, 4)
+	.out();
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=b3NjKDklMkMlMjAtMC4xJTJDJTIwMTkpJTBBJTA5JTJGJTJGLmNvbG9yKCU1QjcwJTJDJTIwMCUyQyUyMDU4LjAyNSUyQyUyMDAlNUQlMkMlMjAlNUI1Mi42NjIlMkMlMjAwLjgxJTJDJTIwNTElMkMlMjAwJTVEJTJDJTIwJTVCMTI3LjUzNCUyQyUyMDAlMkMlMjA1MSUyQyUyMDAlNUQpJTBBJTA5LmthbGVpZCg2KSUwQSUwOS5yZXBlYXQoMiUyQyUyMDQpJTBBJTA5Lm91dCgpJTNC" width = "100%" height = "500">
+</iframe>
+</HTML>
+====modulateScroll====
+===Simple Example===
+**Code**
+<code>
+noise(10)
+  .modulateScrollY(osc(50),0.1,0)
+  .out()
+</code>
+**Explanation**
+<code>
+noise(10)
+noise is one kind of texture, and the number inside parentheses is the mean scale so the bigger the scale, the more it returns.
+.modulateScrollY(osc(50),0.1,0)
+- modulateScroll you can set it for Y-position or X-position.
+- Because I set osc to 50 so the number of scrolls will be 50 times.
+- If I set modulateScroll the Y so the second number is how much move in Y-position. The last number is speed, number bigger is faster.
+.out()
+- out is mean tell the Hydra to return the function and show the photo. So at the end of code need to have this.
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTApJTIwJTBBJTIwJTIwLm1vZHVsYXRlU2Nyb2xsWShvc2MoNTApJTJDMC4xJTJDMCklMEElMjAlMjAub3V0KCk%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+===Complex Example===
+**Code**
+<code>
+noise(10, 1)
+  .modulateScrollY(osc([10,100]),0.1,0)
+  .rotate( () => time%360 ,0.1)
+  .color(1,0,3)
+  .out()
+</code>
+**Explanation**
+<code>
+noise(10, 1)
+noice(scale, movement speed)
+.modulateScrollY(osc([10,100]),0.1,0)
+- over here I set osc to 10 and 100, It is mean the modulateScrollY will return two time one time is 10 the other time is 100.
+.rotate( () => time%360 ,0.1)
+- 360 is mean rotate 360 degree, and how fast it return each time.
+.color(1,0,3)
+- The three number here is mean Red, Green and Blue, But I am still confused about how to use the color function, I will ask Dr.bell.
+.out()
+- out is mean tell the Hydra to return the function and show the photo. So at the end of code need to have this.
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTAlMkMlMjAxKSUyMCUwQSUyMCUyMC5tb2R1bGF0ZVNjcm9sbFkob3NjKCU1QjEwJTJDMTAwJTVEKSUyQzAuMSUyQzApJTBBJTIwJTIwLnJvdGF0ZSglMjAoKSUyMCUzRCUzRSUyMHRpbWUlMjUzNjAlMjAlMkMwLjEpJTBBJTIwJTIwLmNvbG9yKDElMkMwJTJDMyklMEElMjAlMjAub3V0KCk%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+====Color====
+===Simple Example===
+**Code**
+<code>
+osc().color([1,0,0],[0,1,0],[0,0,1]).out(o0)
+</code>
+**Explanation of color**
+<code>
+the reason that the color changes is that I set three different colors, and each square bracket means one color, there are three numbers inside the square bracket the order of numbers is red, green, and blue. So if you look at the first number I set you can see [1,0,0] This is mean I only want red so set red to "1" and the other two be "0".Then if you want blue you need to set the number for blue to 1.The order of the colors is important. Once you set the wrong position, the color won't be the one that you want.
+You must be curious here I only set red, green, and blue. But why is there black? This is because in hydra the original color is white and black. White is good to be overshadowed by other colors but black is hard to be overshadowed by other colors, so white is covered by the three other colors I set, black does not. Consequently, you can see black in this art.
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=b3NjKCkuY29sb3IoJTVCMSUyQzAlMkMwJTVEJTJDJTVCMCUyQzElMkMwJTVEJTJDJTVCMCUyQzAlMkMxJTVEKS5vdXQobzAp" width = "100%" height = "500">
+</iframe>
+</HTML>
+===Complex Example===
+**Code**
+<code>
+noise(10,0.1).color(0,1,0)
+  .add(osc(10,0.1,0).color(1,1,0))
+  .add(osc(60,0.1,0).color(0,0,1))
+  .add(osc(64,0.1,0).color(1,0,0))
+  .out(o0)
+</code>
+**Explanation**
+<code>
+Just now I talked about setting colors but I only said red green and blue so why are there other colors in this art.
+hydra is very cool. It is just like painting, you can make many colors, but you need to make the color yourself. For example, if you want purple you need to add blue and red together, so if you set red, green, and blue at the same time. All the colors will be overlapped so there will be many different colors.
+* The setting color in hydra is hard so I am still trying. get me some time🙃.
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoMTAlMkMwLjEpLmNvbG9yKDAlMkMxJTJDMCklMEElMjAlMjAuYWRkKG9zYygxMCUyQzAuMSUyQzApLmNvbG9yKDElMkMxJTJDMCkpJTBBJTIwJTIwLmFkZChvc2MoNjAlMkMwLjElMkMwKS5jb2xvcigwJTJDMCUyQzEpKSUwQSUyMCUyMC5hZGQob3NjKDY0JTJDMC4xJTJDMCkuY29sb3IoMSUyQzAlMkMwKSklMEElMjAlMjAub3V0KG8wKQ%3D%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+====Render====
+===Simple Example===
+**Code**
+<code>
+noise().color(1,0,1).out(o0)
+noise().color(3,0,5).out(o1)
+noise().color(0,5,2).out(o2)
+noise().color(0,1,1).out(o3)
+render()
+</code>
+**Explanation of render and out**
+<code>
+usually, we use one out to show the photo but over here I have 4 out. The reason that there have 4 out is that I want hydra to show 4 different photos at the same time. So "out(o0)" is mean the top left screen, "out(o1)" is the bottom left screen, "out(o2)" is the top right screen, and "out(o3)" is the bottom right screen.
+Inside each out, you can put any hydra function.
+"render()" is to show the 4 out. render also have another very cool usage if you put any each out that you want inside the render function it can show the only screen that you put inside
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=bm9pc2UoKS5jb2xvcigxJTJDMCUyQzEpLm91dChvMCklMEFub2lzZSgpLmNvbG9yKDMlMkMwJTJDNSkub3V0KG8xKSUwQW5vaXNlKCkuY29sb3IoMCUyQzUlMkMyKS5vdXQobzIpJTBBbm9pc2UoKS5jb2xvcigwJTJDMSUyQzEpLm91dChvMyklMEFyZW5kZXIoKQ%3D%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+===Complex Example===
+**Code**
+<code>
+//o0
+noise()
+  .pixelate(30,40)
+  .color(1,0,3)
+  .out(o0)
+//o1
+osc(50, -0.1, 10)
+  .kaleid(5)
+  .repeat(8, 5)
+  .out(o1)
+//o2
+noise(10,0.1)
+  .color(0,1,0)
+  .add(osc(10,0.1,0).color(1,1,0))
+  .add(osc(60,0.1,0).color(0,0,1))
+  .out(o2)
+//o3
+noise(10, 0.1).color(3,1,9).out(o3)
+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>