{"id":8653,"date":"2022-01-21T20:35:29","date_gmt":"2022-01-21T19:35:29","guid":{"rendered":"https:\/\/www.pimpampum.net\/?p=8653"},"modified":"2022-01-22T09:30:01","modified_gmt":"2022-01-22T08:30:01","slug":"quad-monsters","status":"publish","type":"post","link":"https:\/\/www.pimpampum.net\/en\/quad-monsters\/","title":{"rendered":"Quad monsters"},"content":{"rendered":"\n<p>This project began with the idea to build something that should be not only \u201cbeautiful\u201d but somehow playable at the same time.<\/p>\n\n\n\n<p>It should be a collection with good variations, aesthetically nice, and as most of my creations in the great platform <a href=\"https:\/\/www.fxhash.xyz\/\">fxhash<\/a>, animated and interactive.<\/p>\n\n\n\n<p>So the initial idea was to create a recursive grid of squares that was navigable. The grid would be divided in 4x4x4 etc.<\/p>\n\n\n\n<p>Each tile would have a given form (triangle, square, etc), and the game consisted in trying to keep the same form as you were going inside the recursive grid. When you\u2019d reach the end, keeping the same form, it would give you \u201cpoints\u201d. You could navigate back and forth on this grid. I tried to make more complex forms on the tiles, etc. And actually I ended implementing all this!<\/p>\n\n\n\n<p>But then I realized it was not usable at all and hard to understand, and so, I had a crisis and almost going to leave the idea.<\/p>\n\n\n\n<p>But then I thought I could warp the tiles and make something \u201ccubist\u201d. Looking at some famous cubist paintings like Picasso I realized the eyes were playing an important role on the perception of the transformed space, and the biased perspectives. So finally I had the idea. The puzzle had to be finding the eyes in this \u201ccubist\u201d picture!&nbsp;<\/p>\n\n\n\n<p>After some sketches I realized that, besides cubism, it had something to do with the hawaiian masks and even with my hometown Badalona where every year a \u201cdevil\u201d is burned in town\u2019s biggest festival. <\/p>\n\n\n\n<p>I even see a relationship with the tangram game.<\/p>\n\n\n\n<p>But above all related with the \u201cI see faces\u201d paradigm, it seems like the brain is programmed to see faces in objects. And so, the quad monsters should be the same!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp-1.png\" alt=\"\" class=\"wp-image-8710\" srcset=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp-1.png 1024w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp-1-768x768.png 768w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp-1-120x120.png 120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Like all my creations on fxhash the Quad Monsters are coded using a canvas in vanilla javascript.<\/p>\n\n\n\n<p>The features of the tokens are<\/p>\n\n\n\n<p>&#8211;<strong> Color Palette (plenty of them)<\/strong><\/p>\n\n\n\n<p><strong>&#8211; Tile Distortion (4)<\/strong><\/p>\n\n\n\n<p>&#8211;<strong> Frame Distortion (4)<\/strong><\/p>\n\n\n\n<p>&#8211; <strong>Paint Noise (texture) (4)<\/strong><\/p>\n\n\n\n<p>&#8211; <strong>Animation Rotation Speed (4)<\/strong><\/p>\n\n\n\n<p>&#8211; <strong>Shape (5)<\/strong><\/p>\n\n\n\n<p>&#8211; <strong>Visible eyes. Usually between 0 and 4. More are rare.<\/strong><\/p>\n\n\n\n<p>&#8211; <strong>Total eyes. Usually between 0 and 10. More is not frequent.<\/strong><\/p>\n\n\n\n<p>&#8211;<strong> Name<\/strong><\/p>\n\n\n\n<p>The project had some technical challenges like using massive recursive arrays, or trying to add some noise to the tile colors where I ended using the simplex noise package using always the same seed (so each token has always exactly the same noise)<\/p>\n\n\n\n<p>I could write much more on the project but I&#8217;ll leave it like that for now.<\/p>\n\n\n\n<p>Maybe I\u2019ll update it with comments on the actual mints on the <a href=\"https:\/\/www.fxhash.xyz\/\">fxhash<\/a> platform.<\/p>\n\n\n\n<p>A basic tutorial in this video<\/p>\n\n\n\n<p><a href=\"https:\/\/www.fxhash.xyz\/generative\/slug\/quad-monsters\">You can mint your monster in fxhash<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-wrapper\"><iframe loading=\"lazy\" title=\"Quad Monsters NFT tokens on Fxhash\" width=\"1000\" height=\"563\" src=\"https:\/\/www.youtube.com\/embed\/Uv22whdI70E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooh8o9h6fQBHJPEY3BrJpXGRJzcGCxs1eEzX2KBnpMRQ3jXr9Gw.png\" alt=\"\" data-id=\"8664\" data-link=\"https:\/\/www.pimpampum.net\/quad-monsters\/quadmonster_ooh8o9h6fqbhjpey3brjpxgrjzcgcxs1eezx2kbnpmrq3jxr9gw\/\" class=\"wp-image-8664\" srcset=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooh8o9h6fQBHJPEY3BrJpXGRJzcGCxs1eEzX2KBnpMRQ3jXr9Gw.png 1024w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooh8o9h6fQBHJPEY3BrJpXGRJzcGCxs1eEzX2KBnpMRQ3jXr9Gw-768x768.png 768w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooh8o9h6fQBHJPEY3BrJpXGRJzcGCxs1eEzX2KBnpMRQ3jXr9Gw-120x120.png 120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooLjQR7MEpAMPi4fjk37Kx5rf4kAJZpyqMkRincoyBEimY6QjGQ.png\" alt=\"\" data-id=\"8667\" data-link=\"https:\/\/www.pimpampum.net\/quad-monsters\/quadmonster_ooljqr7mepampi4fjk37kx5rf4kajzpyqmkrincoybeimy6qjgq\/\" class=\"wp-image-8667\" srcset=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooLjQR7MEpAMPi4fjk37Kx5rf4kAJZpyqMkRincoyBEimY6QjGQ.png 1024w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooLjQR7MEpAMPi4fjk37Kx5rf4kAJZpyqMkRincoyBEimY6QjGQ-768x768.png 768w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooLjQR7MEpAMPi4fjk37Kx5rf4kAJZpyqMkRincoyBEimY6QjGQ-120x120.png 120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp.png\" alt=\"\" data-id=\"8673\" data-link=\"https:\/\/www.pimpampum.net\/quad-monsters\/quadmonster_oo97twj9yl8np7xcf82em1mhyuv5umt4exbk4reyfxeebrghsbp\/\" class=\"wp-image-8673\" srcset=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp.png 1024w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp-768x768.png 768w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_oo97twJ9yL8NP7xCF82em1mHyuv5umT4EXBK4ReYFxeeBrgHSBp-120x120.png 120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooxD9112RTNDMq1LcfNdWoGMLjnbbBiyp7x7re4bgA2vVmiy785.png\" alt=\"\" data-id=\"8690\" data-full-url=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooxD9112RTNDMq1LcfNdWoGMLjnbbBiyp7x7re4bgA2vVmiy785.png\" data-link=\"https:\/\/www.pimpampum.net\/quad-monsters\/quadmonster_ooxd9112rtndmq1lcfndwogmljnbbbiyp7x7re4bga2vvmiy785\/\" class=\"wp-image-8690\" srcset=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooxD9112RTNDMq1LcfNdWoGMLjnbbBiyp7x7re4bgA2vVmiy785.png 1024w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooxD9112RTNDMq1LcfNdWoGMLjnbbBiyp7x7re4bgA2vVmiy785-768x768.png 768w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooxD9112RTNDMq1LcfNdWoGMLjnbbBiyp7x7re4bgA2vVmiy785-120x120.png 120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooQPzVWjjeXt58UwzurovEyaz8K9YWfcVDXYaYjAK1cCjnTufRf.png\" alt=\"\" data-id=\"8693\" data-full-url=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooQPzVWjjeXt58UwzurovEyaz8K9YWfcVDXYaYjAK1cCjnTufRf.png\" data-link=\"https:\/\/www.pimpampum.net\/quad-monsters\/quadmonster_ooqpzvwjjext58uwzuroveyaz8k9ywfcvdxyayjak1ccjntufrf\/\" class=\"wp-image-8693\" srcset=\"https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooQPzVWjjeXt58UwzurovEyaz8K9YWfcVDXYaYjAK1cCjnTufRf.png 1024w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooQPzVWjjeXt58UwzurovEyaz8K9YWfcVDXYaYjAK1cCjnTufRf-768x768.png 768w, https:\/\/www.pimpampum.net\/wordpress\/wp-content\/uploads\/quadmonster_ooQPzVWjjeXt58UwzurovEyaz8K9YWfcVDXYaYjAK1cCjnTufRf-120x120.png 120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This project began with the idea to build something that should be not only \u201cbeautiful\u201d but somehow playable at the same time. It should be a collection with good variations, aesthetically nice, and as most of my creations in the great platform fxhash, animated and interactive. So the initial idea was to create a recursive [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":8657,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-8653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/posts\/8653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/comments?post=8653"}],"version-history":[{"count":10,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/posts\/8653\/revisions"}],"predecessor-version":[{"id":8718,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/posts\/8653\/revisions\/8718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/media\/8657"}],"wp:attachment":[{"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/media?parent=8653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/categories?post=8653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pimpampum.net\/en\/wp-json\/wp\/v2\/tags?post=8653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}