{"id":3024,"date":"2020-08-31T22:56:54","date_gmt":"2020-08-31T22:56:54","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=3024"},"modified":"2026-04-23T21:20:48","modified_gmt":"2026-04-23T21:20:48","slug":"miracle-man","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/miracle-man\/","title":{"rendered":"Miracle Man"},"content":{"rendered":"\n<p>In this exercise, you&#8217;ll use SwiftUI shapes \u2014 <code>Circle<\/code>, <code>Ellipse<\/code>, and <code>Rectangle<\/code> \u2014 along with <code>ZStack<\/code>, <code>HStack<\/code>, <code>VStack<\/code>, offsets, colors, and other modifiers to build a figure like the one below. The goal is to go beyond the example and create something that&#8217;s distinctly yours.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"1762\" src=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/08\/img_5f4d8014eb427.png\" alt=\"Blue stick figure with yellow eyes displayed on a smartphone screen\" class=\"wp-image-3025\" srcset=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/08\/img_5f4d8014eb427.png 906w, https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/08\/img_5f4d8014eb427-154x300.png 154w, https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/08\/img_5f4d8014eb427-527x1024.png 527w, https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/08\/img_5f4d8014eb427-768x1494.png 768w, https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/08\/img_5f4d8014eb427-790x1536.png 790w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Your Task<\/h2>\n\n\n\n<p>Top the Miracle Man. Build your own SwiftUI figure (or scene) using only shapes and layout containers \u2014 no images. Spend at least 20\u201330 minutes on it. You&#8217;re encouraged to compare ideas and share code with classmates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tips to Get Started<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sketch it out first.<\/strong> Draw a rough stick figure or shape on paper before coding. This makes it much easier to translate into stacks and offsets.<\/li>\n\n\n\n<li><strong>Start with the body structure.<\/strong> Build a vertical column of shapes first (<code>VStack<\/code> with circles and rectangles), then add arms and details using <code>HStack<\/code> and offsets.<\/li>\n\n\n\n<li><strong>Use <code>.offset(x:y:)<\/code> to nudge things.<\/strong> Elements don&#8217;t always need to be in a straight stack \u2014 you can shift them to one side to create arms, tilted features, or asymmetric designs.<\/li>\n\n\n\n<li><strong>Layer with <code>ZStack<\/code> for depth.<\/strong> Use <code>ZStack<\/code> whenever you need shapes to overlap \u2014 for eyes on a face, buttons on a shirt, etc.<\/li>\n\n\n\n<li><strong>Try <code>.rotationEffect()<\/code> for diagonals.<\/strong> You can tilt a rectangle to make diagonal arms or legs.<\/li>\n\n\n\n<li><strong>Use <code>.frame(width:height:)<\/code> to control size.<\/strong> Precise control of each shape&#8217;s dimensions is key to making proportions look right.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Minimum Requirements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uses at least <strong>two different shape types<\/strong> (e.g., Circle and Rectangle).<\/li>\n\n\n\n<li>Uses at least <strong>one ZStack<\/strong> to layer shapes.<\/li>\n\n\n\n<li>Uses <strong>multiple colors<\/strong>.<\/li>\n\n\n\n<li>Is clearly <strong>more elaborate<\/strong> than the Miracle Man example above.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this exercise, you&#8217;ll use SwiftUI shapes \u2014 Circle, Ellipse, and Rectangle \u2014 along with ZStack, HStack, VStack, offsets, colors, and other modifiers to build a figure like the one below. The goal is to go beyond the example and create something that&#8217;s distinctly yours. Your Task Top the Miracle Man. Build your own SwiftUI &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/miracle-man\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Miracle Man<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3024","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=3024"}],"version-history":[{"count":4,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3024\/revisions"}],"predecessor-version":[{"id":4268,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3024\/revisions\/4268"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=3024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}