{"id":4205,"date":"2019-07-31T16:40:21","date_gmt":"2019-07-31T23:40:21","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=4205"},"modified":"2021-03-24T14:36:22","modified_gmt":"2021-03-24T21:36:22","slug":"the-electric-zine-maker-website-is-up","status":"publish","type":"post","link":"https:\/\/www.nathalielawhead.com\/candybox\/the-electric-zine-maker-website-is-up","title":{"rendered":"The Electric Zine Maker website is up!"},"content":{"rendered":"

This last week or so I’ve been neck deep in building the website for the Electric Zine Maker<\/a>. At this point in development it seemed like a good idea to make it because I need to write people about it, and sharing just the itch page seemed boring… so here it is.<\/p>\n

I think it worked out wonderfully. It’s very interesting!<\/p>\n

LINK: http:\/\/unicornycopia.com\/ezm\/<\/a><\/p>\n

\"\"<\/p>\n

It’s part of the Unicornycopia<\/a> webring :) Yes, I’m viewing it as that now. All my games have a website, and it’s kind of cute to think of it that way.
\nWith making these sites, especially this one, I’m really trying to keep it unique. I don’t want it to be just a website that you scroll through. I want it to be strange, interesting, special…
\nIn this case there’s a lot of physics. It’s a cute idea. Website that has physics. So pages can fall apart, or get destroyed.
\nIn the main page, you can throw the rocks at the nav and it falls apart.
\nHaving collision detection AND physics on divs is interesting. I wouldn’t say it was hard, but getting it to work across as many browsers and device conditions as possible was hard. I did have to end up cutting back on some things that I wanted because of Safari.<\/p>\n

\"\"<\/p>\n

Physics is done with Matter.js<\/a>. It’s wonderful, and worth looking at if you don’t know about it already.<\/p>\n

In case it’s of value to anyone, here’s the collision code…<\/p>\n

<\/p>\n

\n
hitTest =<\/span> function<\/span>(a, b){\r\n\t\/\/<\/span>\r\n\tvar<\/span> circleRect =<\/span> a.getBoundingClientRect();\r\n\tvar<\/span> squareRect =<\/span> b.getBoundingClientRect();\r\n\tvar<\/span> b_width =<\/span> squareRect.width;\r\n\tvar<\/span> b_height =<\/span> squareRect.height;\r\n\tvar<\/span> a_height =<\/span> circleRect.height;\r\n\tvar<\/span> a_width =<\/span> circleRect.width;\r\n\t\/\/<\/span>\r\n\taPos =<\/span> {x:<\/span>circleRect.left, y:<\/span>circleRect.top};\r\n\tbPos =<\/span> {x:<\/span>squareRect.left, y:<\/span>squareRect.top};\r\n\t\/\/<\/span>\r\n\treturn<\/span> aPos.x <<\/span> bPos.x +<\/span> b_width &&<\/span> aPos.x +<\/span> a_width ><\/span> bPos.x &&<\/span> aPos.y <<\/span> bPos.y +<\/span> b_height &&<\/span> aPos.y +<\/span> a_height ><\/span> bPos.y;\r\n}\r\n<\/pre>\n<\/div>\n
it returns true or false…<\/p>\n
I also have a lot more things like this on my github, if that’s of interest: https:\/\/github.com\/alienmelon<\/a><\/p>\n
\"\"<\/p>\n
Overall, I love the idea of using a website as a breakable object (pun kinda intended).
\nIt’s not so much of a page, it leans in the direction of an environment. I feel like UI in general would be more interesting if people viewed it as an ENVIRONMENT rather than a plain two dimensional thing. When devs get into UI development a lot of complaints I hear about it lean in the direction of it being tedious and boring… I feel like this is a talk for another time, but really. Look at it as a living, breathing environment (like more world building) and UI work starts being very different.<\/p>\n
In recent work, this Electric Zine Maker website is the second site that I’m most proud of. The one that I really love is alienmelon.com<\/a>… That’s treating a website as if it was a game, using div’s more interactively and specifically. You navigate a little ghost from page to page.
\nThat one is fun and also works on mobile.
\n“Works on mobile” has become my favorite selling point when doing it. Getting anything unusual to function in that environment seems like an accomplishment.<\/p>\n
\"\"
\n\"\"
\n\"\"<\/p>\n
In other web dev related news…
\nI just posted all the CSS for my itch.io game pages<\/a>. I’m sharing the CSS for any page that looks fancy. You can get the theme for “Everything is going to be ok<\/a>“, A_DESKTOP_LOVE_STORY<\/a>, Electric File Monitor<\/a>, F2OGGY<\/a>…
\nJust copy and paste the CSS.
\nPeople occasionally ask about it, and it seems like the kind of thing you should share. CSS is one of the simplest things for me to do. It’s a bit like a relaxation exercise for me when I don’t want to do things that involve a lot of thinking, so it’s fun to share it around.
\nHere’s the LINK: https:\/\/alienmelon.itch.io\/allthemes<\/a><\/p>\n
…Ok this is a short post. I’m exhausted lol. Please check it out it’s so worth it<\/a>!!! :D<\/p>\n","protected":false},"excerpt":{"rendered":"
This last week or so I’ve been neck deep in building the website for the Electric Zine Maker. At this point in development it seemed like a good idea to make it because I need to write people about it, and sharing just the itch page seemed boring… so here it is. I think it worked out wonderfully. It’s very interesting! LINK: http:\/\/unicornycopia.com\/ezm\/ It’s part of the Unicornycopia webring :) Yes, I’m viewing it as that now. All my games have a website, and it’s kind of cute to think of it that way. With making these sites, especially this...<\/p>\n","protected":false},"author":1,"featured_media":4808,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"http:\/\/nathalielawhead.com\/noodles\/EZM_SITE_01.png","fifu_image_alt":"The Electric Zine Maker website is up!","footnotes":"","_links_to":"","_links_to_target":""},"categories":[30],"tags":[],"class_list":["post-4205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games"],"_links":{"self":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/4205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=4205"}],"version-history":[{"count":6,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/4205\/revisions"}],"predecessor-version":[{"id":4211,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/4205\/revisions\/4211"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4808"}],"wp:attachment":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=4205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=4205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=4205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}