{"id":1512,"date":"2014-12-09T18:22:30","date_gmt":"2014-12-09T18:22:30","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=1512"},"modified":"2020-04-22T21:35:13","modified_gmt":"2020-04-22T21:35:13","slug":"particles-jewels","status":"publish","type":"post","link":"https:\/\/astoryisnotatree.net\/?p=1512","title":{"rendered":"Games from Nothing: Black & White Exercise #4 \u2014 Jewels"},"content":{"rendered":"

When I started this exercise, I wanted to create an array of slowly rotating rectangles that appeared wherever the player tapped on screen, basically like in this sketch:<\/p>\n

\"jewelsrotation\"<\/a><\/p>\n

I had programmed the rectangles to have a completely random color, and a random size within a small range. I also changed to rectMode(CENTER) so that they appeared evenly around wherever the user tapped the screen. I was still having problems with the rotation, though. I couldn\u2019t quite figure out how to get each rectangle to rotate around its center.<\/p>\n

However, I somehow stumbled across a solution that turned out to be much more aesthetically pleasing, and satisfying to manipulate, than what I had set out to do:<\/p>\n

\"Screen<\/a><\/p>\n

I know it doesn\u2019t look like much, but at every point where there\u2019s a rectangle on screen, the program is rendering a new one every frame with a random color and size. So really, each rectangle actually looks something like this sketch to the naked eye:<\/p>\n

\"photo<\/a><\/p>\n

I know it’s hard to tell from the sketch, but the resulting effect onscreen is not unlike a crystal or jewel twinkling in front of a light source. I\u2019ve limited the array to a maximum of 50 different jewels on screen, and each one has a timer that gradually dims it within one to five seconds (a random setting for each jewel). I was very pleased with the results, and found it very enjoyable to tap all over the screen and look at the pretty twinkling lights that ensue!<\/p>\n","protected":false},"excerpt":{"rendered":"

When I started this exercise, I wanted to create an array of slowly rotating rectangles that appeared wherever the player tapped on screen, basically like in this sketch: I had programmed the rectangles to have a completely random color, and…<\/p>\n","protected":false},"author":20,"featured_media":1513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[16,90],"class_list":["post-1512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games-from-nothing","tag-black-white-exercises","tag-particle-systems","wpcat-5-id"],"_links":{"self":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/1512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1512"}],"version-history":[{"count":4,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/1512\/revisions"}],"predecessor-version":[{"id":13812,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/1512\/revisions\/13812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/1513"}],"wp:attachment":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}