{"id":18353,"date":"2024-12-15T22:00:46","date_gmt":"2024-12-15T22:00:46","guid":{"rendered":"https:\/\/astoryisnotatree.net\/?p=18353"},"modified":"2024-12-15T22:00:46","modified_gmt":"2024-12-15T22:00:46","slug":"art-from-code-pixel-sharks","status":"publish","type":"post","link":"https:\/\/astoryisnotatree.net\/?p=18353","title":{"rendered":"Art From Code: Pixel Sharks!"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixelshark-2.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">About Pixel Sharks!<\/h2>\n\n\n\n<p>Pixel Sharks originally started as a game where they player controlled a shark who needed to eat fish to survive.<\/p>\n\n\n\n<p>I started on this idea while learning collision. One of our examples was making a circle grow once it collided with another circle. Seeing this I immediately thought of fish. (I almost went to school for marine biology.) Having never coded before I was struggling to figure out what exactly I wanted this to be. After showing people some earlier versions of this project, along with some other things I had been working on, I realized that there was something calming about watching the shark hunt on its own.<\/p>\n\n\n\n<p>Once I decided that the program would be able to run on its own, I wanted to make it pleasing to watch. I decided I wanted give this a unifying look. Though not very good, I do play a lot of video games so I decided on an 8-bit style which presented a new problem. I am not a pixel artist. After many, <em>many<\/em> versions, I finally settled on a design for our shark and a color palette that I think allowed the shark to stand out for clarity while not feeling out of place.<\/p>\n\n\n\n<p>The fish come in a variety of colors. They move randomly in and out of frame, suggesting that there is more ocean out of frame. I also added a starfish that bounces around for fun. It was in the original game as a &#8220;power up&#8221; for the player, but remained in this version because I wanted there to be something that acknowledged the screen in a way that the fish and sharks don&#8217;t.<\/p>\n\n\n\n<p>The last touches were mostly tying together the world. Two baby sharks follow their mother as she hunts for food. Bubbles and ripples help give the sense of being underwater, as well as helping to show motion. Seaweed on the ocean floor gives the fish somewhere to &#8220;hide&#8221; from the sharks. Finally, a friend suggested making the lower half of the screen be darker to give it a sense of depth.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" \/>\n\n\n\n<p>By default the program runs on it&#8217;s own, but the program still has a &#8220;game mode&#8221; built in, allowing the player to take control of the shark.<\/p>\n\n\n\n<p>I plan on continuing to work on this project. I still think there are things that can be added to improve it and make it run smoother, as well as it being a good way for me to learn. Eventually, I want to make it available to play for everyone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How It Works<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"736\" src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-1024x736.png\" alt=\"\" class=\"wp-image-18359\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-1024x736.png 1024w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-300x216.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-768x552.png 768w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-1536x1104.png 1536w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-1246x896.png 1246w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-946x680.png 946w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-675x485.png 675w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3-480x345.png 480w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sr228936a915aaws3.png 1664w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Shark, baby shark, and fish assets.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-1024x580.png\" alt=\"\" class=\"wp-image-18370\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-1024x580.png 1024w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-300x170.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-768x435.png 768w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-946x535.png 946w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-675x382.png 675w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2-480x272.png 480w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/pixil-frame-0-2.png 1060w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Seaweed leaf and bubble assets. There are nine different bubble sizes. Seaweed leaves are chained together.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Environment<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/bubbles.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Background bubbles consistently float upwards.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/forest.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Seaweed in the foreground helps &#8220;hide&#8221; fish.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/environ-1.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">A gradient is overlayed over the entire thing to give it depth.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Movement<\/h2>\n\n\n\n<p class=\"has-medium-font-size\">There are three different types of creatures: adult shark, baby shark, and fish.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/fishmovement.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Fish behavior. Paths in red.<br>Each fish has a &#8220;target&#8221; location that it moves towards. After an amount of time it is given a new target, regardless of whether it has made it to its previous target. This randomness allows some of the individuals to linger in one spot, while others move more recklessly.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sharkmovement.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Adult and baby shark movements. Adult shark path in red, baby shark paths in blue. One of the baby shark is the &#8220;leader&#8221; and follows the adult shark. The other shark follows the one before it.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/babyshark.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">The way that the baby sharks move allow larger chains of sharks to be made, if desired.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Shark Seeking<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sharkfish2.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Shark seeking fish behavior. Shark path in blue, fish path in red. While the fish is moving as explained earlier, the shark&#8217;s &#8220;target position&#8221; is the fish&#8217;s current position.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/sharktarget3.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">When the shark and fish collide (marked by circles), the fish gets &#8220;eaten&#8221; and the shark choses a new fish to target.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Manual<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/manual2.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">While off by default, &#8220;manual mode&#8221; can be turned on allowing the user to control the adult shark. The shark instead targets the position of the mouse (shown here with the red circle).<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Earlier Versions<\/h2>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:60% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"384\" src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/Untitled-presentation-27.png\" alt=\"\" class=\"wp-image-18372 size-full\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/Untitled-presentation-27.png 384w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/Untitled-presentation-27-300x300.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/Untitled-presentation-27-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/Untitled-presentation-27-100x100.png 100w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>An earlier shark drawing prior to taking on an 8-bit style.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-1024x640.png\" alt=\"\" class=\"wp-image-18384\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-1024x640.png 1024w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-300x188.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-768x480.png 768w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-1246x779.png 1246w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-946x591.png 946w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-675x422.png 675w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001-480x300.png 480w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2024\/12\/shark_old_0001.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Earlier concept where the targeted fish turned red. While red, its speed was doubled. The shark would grow when eating a fish and shrink over time.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>About Pixel Sharks! Pixel Sharks originally started as a game where they player controlled a shark who needed to eat fish to survive. I started on this idea while learning collision. One of our examples was making a circle grow&#8230;<\/p>\n","protected":false},"author":399,"featured_media":18466,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[],"class_list":["post-18353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-from-code","wpcat-225-id"],"_links":{"self":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/18353","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\/399"}],"replies":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18353"}],"version-history":[{"count":13,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/18353\/revisions"}],"predecessor-version":[{"id":18472,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/18353\/revisions\/18472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/18466"}],"wp:attachment":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}