{"id":8543,"date":"2023-06-08T07:08:39","date_gmt":"2023-06-07T23:08:39","guid":{"rendered":"https:\/\/hllo.studio\/?post_type=portfolio&#038;p=8543"},"modified":"2023-08-25T03:11:20","modified_gmt":"2023-08-24T19:11:20","slug":"coding","status":"publish","type":"portfolio","link":"https:\/\/hllo.studio\/index.php\/portfolio\/coding\/","title":{"rendered":"Coding"},"content":{"rendered":"<div class=\"grid kcm\">\n<div class=\"grid__item three-twelfths portable--auto lap--auto palm--auto top-large-padding bottom-no-padding \"><\/div>\n<div class=\"grid__item three-twelfths portable--auto lap--auto palm--auto top-large-padding bottom-no-padding \">\n<p><span style=\"font-size: 18pt;\">I.I&nbsp; &nbsp;This project uses an API from Solar Protocol to build a simple data visualization website.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 18pt;\">&mdash;<\/span><\/p>\n<\/div>\n<div class=\"grid__item three-twelfths portable--auto lap--auto palm--auto top-large-padding bottom-no-padding   \">\n<p><span style=\"font-size: 14pt; color: #ff9d54;\">I.II&nbsp; &nbsp;Inspired by the UX energy-centered design, the images on the website will change according to the current energy of the server, thus implying the status of solar energy.<\/span><\/p>\n<p><span style=\"color: #fdd1b0; font-size: 14pt;\">I.III&nbsp; &nbsp;The instructions on the left side of the website inform the user of the current server status and how to interpret changes in the visualization.<\/span><\/p>\n<\/div>\n<div class=\"grid__item three-twelfths portable--auto lap--auto palm--auto top-no-padding bottom-no-padding \"><\/div>\n<div class=\"grid__item nine-twelfths portable--auto lap--auto palm--auto top-no-padding bottom-no-padding center \">\n<figure id=\"attachment_8563\" aria-describedby=\"caption-attachment-8563\" style=\"width: 2148px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/editor.p5js.org\/Hanli\/full\/Vh4wjFaNA\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8563 size-full\" src=\"http:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1.png\" alt=\"\" width=\"2148\" height=\"1208\" srcset=\"https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1.png 2148w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1-300x169.png 300w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1-1024x576.png 1024w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1-768x432.png 768w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1-1536x864.png 1536w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup1-2048x1152.png 2048w\" sizes=\"(max-width: 2148px) 100vw, 2148px\"><\/a><figcaption id=\"caption-attachment-8563\" class=\"wp-caption-text\">Click to go to this page<\/figcaption><\/figure>\n<\/div>\n<div class=\"grid__item four-twelfths portable--auto lap--auto palm--auto top-large-padding bottom-no-padding center  \">\n<p><span style=\"font-size: 14pt;\">II.I&nbsp; &nbsp; &nbsp;This project is a data visualization attempt at the future possibilities of social media.<\/span><\/p>\n<p><span style=\"font-size: 14pt; color: #ff9d54;\">II.II&nbsp; &nbsp; Red, yellow, blue, and purple respectively represent the corresponding information content on social media: Bot, business, official, and user.<\/span><\/p>\n<p><span style=\"font-size: 14pt; color: #fed2b1;\">II.III&nbsp; &nbsp;Using the up and down keys to change the intervention, you can explore 3 different bad futures.<\/span><\/p>\n<\/div>\n<div class=\"grid__item nine-twelfths portable--auto lap--auto palm--auto top-no-padding bottom-no-padding center  \">\n<figure id=\"attachment_8562\" aria-describedby=\"caption-attachment-8562\" style=\"width: 2148px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/editor.p5js.org\/Hanli\/full\/T-LJToy_m\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8562 size-full\" src=\"http:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2.png\" alt=\"\" width=\"2148\" height=\"1208\" srcset=\"https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2.png 2148w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2-300x169.png 300w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2-1024x576.png 1024w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2-768x432.png 768w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2-1536x864.png 1536w, https:\/\/hllo.studio\/wp-content\/uploads\/2023\/06\/Mockup2-2048x1152.png 2048w\" sizes=\"(max-width: 2148px) 100vw, 2148px\"><\/a><figcaption id=\"caption-attachment-8562\" class=\"wp-caption-text\">Click to go to this page<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>A programming collection containing two P5.js projects.<\/p>\n","protected":false},"author":1,"featured_media":8541,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/portfolio\/8543"}],"collection":[{"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/comments?post=8543"}],"version-history":[{"count":16,"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/portfolio\/8543\/revisions"}],"predecessor-version":[{"id":8565,"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/portfolio\/8543\/revisions\/8565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/media\/8541"}],"wp:attachment":[{"href":"https:\/\/hllo.studio\/index.php\/wp-json\/wp\/v2\/media?parent=8543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}