{"id":428,"date":"2011-12-14T01:00:45","date_gmt":"2011-12-14T09:00:45","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=428"},"modified":"2011-12-13T11:31:50","modified_gmt":"2011-12-13T19:31:50","slug":"perlin-star","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/12\/perlin-star\/","title":{"rendered":"Perlin Star"},"content":{"rendered":"<p><script type=\"application\/processing\">\/\/ Perlin Star - Jim Bumgardner\n\/\/ \n\/\/ Using noise to permutate the points of a star shape\n\nint nbrPoints = 11;\nfloat mutateSpeed = .001;\nfloat rotateSpeed = .0001;\nfloat innerRatio = 2\/9.0;\n\nvoid setup()\n{\n  size(500,500);\n  smooth();\n  noStroke();\n}\n\nvoid draw()\n{\n  background( #000030 );\n  fill( #F6DD08 );\n  float orad = height*.3;\n  float irad = orad*innerRatio;\n  float dev = orad*.8;\n\n  pushMatrix();\n  translate(width\/2,height\/2);\n  rotate(millis()*.0001);\n  float a = TWO_PI\/nbrPoints;\n  float a2 = a*1.5;\n  beginShape();\n  for (int i = 0; i < nbrPoints; ++i) {\n    vertex( cos( a * i) * (orad+noise(i,0,millis()*mutateSpeed)*dev), sin( a * i) * (orad+noise(i,1,millis()*mutateSpeed)*dev));\n    vertex( cos( a * (i+.5)) * irad, sin( a * (i+.5)) * irad);\n  }\n  endShape(CLOSE);\n  popMatrix();\n}\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=perlin_star\">source<\/a><\/div>\n<p>This star is similar to the aster from my <a href=\"\/blog\/2011\/11\/stars-and-asters\/\">Stars and Asters<\/a> tutorial.  Here, I&#8217;m stretching the outer points using Perlin noise.<\/p>\n<p>Normally, I would draw the outer point using<\/p>\n<pre>\r\n   vertex( cos( a * i) * orad, \r\n           sin( a * i) * orad);\r\n<\/pre>\n<p>But instead I&#8217;m using<\/p>\n<pre>\r\n   vertex( cos( a * i) * (orad+noise(i,0,millis()*mutateSpeed)*dev), \r\n           sin( a * i) * (orad+noise(i,1,millis()*mutateSpeed)*dev));\r\n<\/pre>\n<p>Let&#8217;s break this down.  orad is the radius of the vertex, from the center of the star.<br \/>\nI&#8217;m adding a value to it which is noise(something)*dev.  noise returns a value from 0 to 1, so I&#8217;m using dev to specify how much I want to mutate the point by.<\/p>\n<p>Noise is like a sponge that is being sampled in 3d space.  You pass it x,y,z parameters, and you get the value of the sponge at that point in space.  By carefully controlling what x,y,z coordinates you pass, you can get different effects.  Here, I&#8217;m passing<\/p>\n<p>(i,0,millis()*mutateSpeed) to mutate the X coordinate and<br \/>\n(i,1,millis()*mutateSpeed) to mutate the Y coordinate.<\/p>\n<p>x = i<br \/>\nThis corresponds to the point of the star, and insures I get a unique noise grid coordinate for each point in the star.  As long as the positions in noise space are separated by at least 1, you&#8217;ll get very different values.<\/p>\n<p>y = 0 or 1<br \/>\nAgain, this is used to get a unique noise grid cell for each coordinate.<\/p>\n<p>z = millis()*mutateSpeed<br \/>\nThis is a slowly increasing number which causes the mutation effect. If I passed a constant here, the star wouldn&#8217;t move.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>source This star is similar to the aster from my Stars and Asters tutorial. Here, I&#8217;m stretching the outer points using Perlin noise. Normally, I would draw the outer point using vertex( cos( a * i) * orad, sin( a * i) * orad); But instead I&#8217;m using vertex( cos( a * i) * (orad+noise(i,0,millis()*mutateSpeed)*dev), [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11,9,8,14,15],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-animation","tag-circles","tag-intermediate","tag-stars","tag-symmetry"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":3,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":431,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/428\/revisions\/431"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}