{"id":830,"date":"2023-02-14T01:54:41","date_gmt":"2023-02-13T16:54:41","guid":{"rendered":"https:\/\/heyyocg.link\/?p=830"},"modified":"2023-02-19T00:25:43","modified_gmt":"2023-02-18T15:25:43","slug":"procedual-regular-polygon-shader","status":"publish","type":"post","link":"https:\/\/heyyocg.link\/en\/procedual-regular-polygon-shader\/","title":{"rendered":"Shader Drawing Regular Polygon Procedurally"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Introduction<\/h1>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Drawing Regular Polygons Procedurally by UE5 Material<br>The trick is Dot Product<br>Some explanation blog would come soon! <a href=\"https:\/\/t.co\/EnSokUEnyB\">pic.twitter.com\/EnSokUEnyB<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/twitter.com\/yo_hanashima\/status\/1553250036858834944?ref_src=twsrc%5Etfw\">July 30, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>I will explain a shader that can procedurally draw regular polygons, like in the video above.<\/p>\n\n\n\n<p>I take UE5 material as an example for the implementation of this shader, but the logic itself is basically written in HLSL, so it can be easily reproduced in Unity or GLSL or anything.<\/p>\n\n\n\n<p>I assume that there are some ways to procedurally draw polygons, but I personally like this method because it is a fairly concise logic, even though there are aspects that limit it to regular polygons.<\/p>\n\n\n\n<p>I offer, in the below link, this UE5 material and some material instances for some variations like a stripe pattern shown later, so you can check it out if you want directly the data itself.<\/p>\n\n\n\n<p><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/nmusq\">https:\/\/heyyohanashima.gumroad.com\/l\/nmusq<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Explanation of the shader <\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Overall Picture<\/h2>\n\n\n\n<p>The overall picture of the part that draws regular polygons looks like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"528\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sfssf-1024x528.png\" alt=\"\" class=\"wp-image-838\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sfssf-1024x528.png 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sfssf-300x155.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sfssf-768x396.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sfssf-816x421.png 816w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sfssf.png 1251w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Most of the processing, however, is implemented in the Custom node using HLSL, so I will explain this while showing the code, but first, I will explain the concept.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create a gradation<\/h2>\n\n\n\n<p>This method calculates the gradient from the center to each side to creat a regular polygon mask.<\/p>\n\n\n\n<p>Create a gradient, from 0 to 1, from the center to each side, and erase (make transparent) the area beyond 1 to create a mask for each regular polygon.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"887\" height=\"748\" data-id=\"840\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adfsdf.png\" alt=\"\" class=\"wp-image-840\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adfsdf.png 887w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adfsdf-300x253.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adfsdf-768x648.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adfsdf-816x688.png 816w\" sizes=\"(max-width: 887px) 100vw, 887px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"794\" height=\"669\" data-id=\"842\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/asdaczc-1.jpg\" alt=\"\" class=\"wp-image-842\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/asdaczc-1.jpg 794w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/asdaczc-1-300x253.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/asdaczc-1-768x647.jpg 768w\" sizes=\"(max-width: 794px) 100vw, 794px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>The nice thing about gradients is that they can be used not only to create a mask but also for coloring and fading, which broadens their use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to get the gradients<\/h3>\n\n\n\n<p>This section explains how to create a gradation from the center to each side.<\/p>\n\n\n\n<p>The key is the &#8216;dot product&#8217;.<\/p>\n\n\n\n<p>When dot product is discussed in the context of computer graphics, it is often used to find the angle formed by two vectors. But there are other important usages of dot product.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Review of inner product<\/h4>\n\n\n\n<p>There are two properties of dot products that I often use myself in CG-related work.<\/p>\n\n\n\n<p>\u2460 Angle formed by two vectors<\/p>\n\n\n\n<p>\u2461 Length of the production vector<\/p>\n\n\n\n<p>Both properties come from the mathematical definition of dot product, but since I won&#8217;t explain the formulas here, I will give a brief explanation using diagrams.<\/p>\n\n\n\n<p>The first part is used in Fresnel calculations, or simple diffuse and specular reflection calculations in shader-related applications, and is probably a topic that comes up frequently, so I will not explain it here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"708\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sdfvdsfsf.jpg\" alt=\"\" class=\"wp-image-844\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sdfvdsfsf.jpg 825w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sdfvdsfsf-300x257.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sdfvdsfsf-768x659.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/sdfvdsfsf-816x700.jpg 816w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/figure>\n\n\n\n<p>\u2461 is the nature that will be used in this project.<\/p>\n\n\n\n<p>The term &#8216;production vector&#8217; sounds a bit difficult, but it is easier to understand if you look at the diagram.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsfsf-1024x568.jpg\" alt=\"\" class=\"wp-image-902\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsfsf-1024x568.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsfsf-300x166.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsfsf-768x426.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsfsf.jpg 1232w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As shown in the figure above, when there are two vectors (a, b) starting from a point and you draw a line perpendicularly from the end point of one vector (b) to the other vector (a), the vector from the starting point to its intersection is called &#8216;production vector&#8217; (c).<\/p>\n\n\n\n<p>The dot product of a and b is the product of the length of the production vector c and the length of vector a.<\/p>\n\n\n\n<p>By setting the length of vector a to 1, you can get the length between the intersection and the starting point (= length of the production vector), since multiplying by 1 by whatever does not change the value.<\/p>\n\n\n\n<p>This property can be used to calculate the gradient from the center to each side of a regular polygon.<\/p>\n\n\n\n<p>In addition, the value will be negative for the following vector positional relationships.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsvxv-1024x507.jpg\" alt=\"\" class=\"wp-image-904\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsvxv-1024x507.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsvxv-300x148.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsvxv-768x380.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fsvxv.jpg 1136w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Incidentally, the positive projection vector itself can also be obtained by multiplying with vector a. This can be used when you want to cancel vector components in a specific direction, so it is good to keep this in mind.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Explanation of the specific method<\/h4>\n\n\n\n<p>First, let us take an equilateral triangle as an example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"965\" height=\"757\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fvsvs.jpg\" alt=\"\" class=\"wp-image-905\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fvsvs.jpg 965w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fvsvs-300x235.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fvsvs-768x602.jpg 768w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/figure>\n\n\n\n<p>From the center of an equilateral triangle, find a vector (a) of length 1 perpendicular to the sides.<\/p>\n\n\n\n<p>Next, find the vector (b) from the center of the equilateral triangle to any point (P).<\/p>\n\n\n\n<p>By computing the dot product of these a and b vectors, we can find the length of the production vector of vector b (= length of \u03b1).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/vxvevfv-1024x656.jpg\" alt=\"\" class=\"wp-image-906\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/vxvevfv-1024x656.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/vxvevfv-300x192.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/vxvevfv-768x492.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/vxvevfv.jpg 1166w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Similarly, by following the same procedure for arbitrary points Q, R, and S, we can see that the farther each point is from the center to the side direction, the larger the value becomes, and the closer to the center side, the smaller the value becomes.<\/p>\n\n\n\n<p>We also see that points on a line parallel to a side, such as P and S, have the same production vector length.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"777\" height=\"687\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adadacazcas.jpg\" alt=\"\" class=\"wp-image-865\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adadacazcas.jpg 777w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adadacazcas-300x265.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adadacazcas-768x679.jpg 768w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/figure>\n\n\n\n<p>Thus, by computing the dot product, a gradient parallel to a side can be obtained.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"719\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/gvsvv-1024x719.jpg\" alt=\"\" class=\"wp-image-907\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/gvsvv-1024x719.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/gvsvv-300x211.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/gvsvv-768x539.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/gvsvv.jpg 1085w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In addition, for an equilateral triangle, three perpendicular lines (a, a&#8217;, a&#8221;) can be drawn from the center to each side. As shown in the figure above, the dot product obtained with the perpendicular vector drawn to the nearest side of its own point is always the largest value. In an implementation, you can find the dot product of the three vectors and use the largest value as the gradient for that point.<\/p>\n\n\n\n<p>By doing so, a gradient parallel to each side can be obtained for all sides as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"526\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adacadada.jpg\" alt=\"\" class=\"wp-image-855\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adacadada.jpg 680w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/adacadada-300x232.jpg 300w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>The same idea can be used to obtain a gradation in the case of a rectangle.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"706\" data-id=\"908\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fewfsfscs.jpg\" alt=\"\" class=\"wp-image-908\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fewfsfscs.jpg 880w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fewfsfscs-300x241.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/fewfsfscs-768x616.jpg 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"624\" data-id=\"854\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/dqwfasfa.jpg\" alt=\"\" class=\"wp-image-854\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/dqwfasfa.jpg 737w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/02\/dqwfasfa-300x254.jpg 300w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>And the same logic can be used to obtain the gradient for all regular polygons.<\/p>\n\n\n\n<p>Finally, we summarize the steps to get the gradient.<\/p>\n\n\n\n<ol><li>Find a vector of length 1 perpendicular to each side from the center<\/li><li>Take the dot product of a vector from the center to any point and the vector of Step 1<\/li><li>Take the highest value in Step 2 as the gradient value for that point.<\/li><li>Divide the value of Step 3 by the distance from the center to the side and normalize (0~1)<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Explanation of implementation code<\/h3>\n\n\n\n<p>Now, I will start to explain the actual HLSL code<\/p>\n\n\n\n<p>First, I will show the full text of the code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const float DEG_TO_RAD = 0.0174533;\nint _num = max(num, 3); \/\/ Make sure more than 3 vertices\n\nfloat _deltaAngle = 360.0 \/ (float)_num;\nfloat2 _dir = uv - center;\n\nfloat _gradAlongMedian = 0;\n\n\/\/ Repeat calculation _num times and get max value of dot product\nfor(int i = 0; i &lt; _num; i++) {\n   float _degree = angleOffset + _deltaAngle * i;\n   float _x = cos(_degree * DEG_TO_RAD);\n   float _y = sin(_degree * DEG_TO_RAD);\n   float2 _medianDir = normalize(float2(_x,_y));\n   _gradAlongMedian = max(dot(_medianDir, _dir), _gradAlongMedian);\n}\n\nfloat _centerToSideLength = radius * cos(_deltaAngle * 0.5 * DEG_TO_RAD);\nfloat _normalizedMedianGradation = _gradAlongMedian \/ _centerToSideLength;\n\nreturn _normalizedMedianGradation;<\/code><\/pre>\n\n\n\n<p>The five inputs are as follows.<\/p>\n\n\n\n<ul><li>num\uff1aNumber of vertices<\/li><li>uv\uff1aCoordinate system for drawing regular polygons<\/li><li>center\uff1aCenter of regular polygons in the coordinate<\/li><li>angleOffset\uff1aOffset of regular polygon orientation<\/li><li>radius\uff1aSize of regular polygon (length from center to vertex)<\/li><\/ul>\n\n\n\n<p>The output returns a gradient from the center to each side.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>float _gradAlongMedian = 0;\n\n\/\/ Repeat calculation _num times and get max value of dot product\nfor(int i = 0; i &lt; _num; i++) {\n   float _degree = angleOffset + _deltaAngle * i;\n   float _x = cos(_degree * DEG_TO_RAD);\n   float _y = sin(_degree * DEG_TO_RAD);\n   float2 _medianDir = normalize(float2(_x,_y));\n   _gradAlongMedian = max(dot(_medianDir, _dir), _gradAlongMedian);\n}<\/code><\/pre>\n\n\n\n<p>Here, the dot product is calculated for the number of vertices (= number of sides) and the maximum value is stored in _gradAlongMedian.<\/p>\n\n\n\n<p>The vector of perpendicular lines from the center to each side is calculated by trigonometric functions. Each angle can be calculated by first dividing 360 by the number of vertices and adding the delta angles in each repetition.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>float _centerToSideLength = radius * cos(_deltaAngle * 0.5 * DEG_TO_RAD);\nfloat _normalizedMedianGradation = _gradAlongMedian \/ _centerToSideLength;<\/code><\/pre>\n\n\n\n<p>The length from the center to the side is obtained by multiplying the length from the center to the vertex by cos(360\/(number of vertices x 2)). Then, divide _gradAlongMedian to normalize.<\/p>\n\n\n\n<p>Now we have a gradient that goes from 0 to 1 from the center to each side, and the points with _normalizedMedianGradation&gt;1 will be located outside of the regular polygon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use gradients<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Masking<\/h3>\n\n\n\n<p>As mentioned above, we have created a gradient such that the outer points are larger than 1. Using step function, we can create a regular polygon mask by erasing the points larger than 1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add color, Make stripes<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Since I can get gradation from a centroid, not only masking as a shape, but also I can use it to colorize or make stripes, or anything.<br>I&#39;m writing the post about this currently \ud83d\ude42 <a href=\"https:\/\/t.co\/SJ0OItNh5t\">https:\/\/t.co\/SJ0OItNh5t<\/a> <a href=\"https:\/\/t.co\/Vk2lmNYeWC\">pic.twitter.com\/Vk2lmNYeWC<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/twitter.com\/yo_hanashima\/status\/1624281836066320384?ref_src=twsrc%5Etfw\">February 11, 2023<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Since gradient information is available, coloring can be done in any way. Stripes can also be easily created using fmod function, etc. although details are beyond the scope of this article.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Lastly<\/h1>\n\n\n\n<p>I had the opportunity to do some motion graphic work in UE at work, and I wanted to easily play with the size and rotation of primitive shapes, which led me to create this shader.<\/p>\n\n\n\n<p>After all, it feels good to be able to create something generic with clean logic. It is also nice to realize a use for mathematical knowledge that you did not know before. I will keep exploring more hidden uses of math for CG!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction I will explain a shader that can procedurally draw regular polygons, like in the video above. I take UE5 material as an example for the implementation of this shader, but the logic itself is basically written in HLSL, so it can be easily reproduced in Unity or GLSL or anything. I assume that there [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","_mi_skip_tracking":false,"footnotes":"","_locale":"en_US","_original_post":"https:\/\/heyyocg.link\/?p=830"},"categories":[17,31],"tags":[35,15,30],"modified_by":"yohanashima","_links":{"self":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/830"}],"collection":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":33,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/830\/revisions"}],"predecessor-version":[{"id":923,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/830\/revisions\/923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media\/860"}],"wp:attachment":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media?parent=830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/categories?post=830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/tags?post=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}