{"id":37,"date":"2022-09-02T22:02:17","date_gmt":"2022-09-02T22:02:17","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/picopicopi\/?p=37"},"modified":"2022-09-30T16:56:23","modified_gmt":"2022-09-30T16:56:23","slug":"week-1","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/picopicopi\/week-1\/","title":{"rendered":"Week 1 \u2013 Getting To Know Each Other"},"content":{"rendered":"\n<div style=\"height:42px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Summary<\/h2>\n\n\n\n<p>This week, we met with our teammates, instructor, and client for the first time. We decided on our project name and each of our roles, set up regular meetings with our instructor and client, learned about project backgrounds and goals from the client, and started researching and exploring ideas.<\/p>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:392px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-palette-color-6-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container\">\n<h2 class=\"has-palette-color-4-color has-text-color\">Roles<\/h2>\n\n\n\n<ul class=\"has-palette-color-3-color has-text-color\"><li>Jeffrey (Chia-Wei) Liu &#8211; Game Designer, Assistant Producer<\/li><li>Shicai He &#8211; Programmer, Artist<\/li><li>Tiange Zhou &#8211; Game Designer, 2D Artist<\/li><li>Yiming Xiao &#8211; Programmer, Game Designer, Tech Artist<\/li><li>Zibo Ye &#8211; Producer, Programmer<\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:699px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-palette-color-7-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container\">\n<div class=\"wp-container-3 wp-block-columns alignwide\">\n<div class=\"wp-container-1 wp-block-column is-vertically-aligned-center\" style=\"flex-basis:66.66%\">\n<h2 class=\"has-palette-color-4-color has-text-color\">Client &amp; Project Needs<\/h2>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">We are building a web game for <a href=\"https:\/\/picoctf.org\/\" data-type=\"URL\" data-id=\"https:\/\/picoctf.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">picoCTF<\/a> to increase people&#8217;s engagement in the contest. PicoCTF is an annual cyber security contest hosted by Cylab at CMU, and they have a tradition of collaborating with ETC for a companion game every year, so there were many previous similar projects.<\/p>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">One important goal this year is to make the game stand-alone and less coherent to the annual two-week main contest itself, as picoCTF is expanding to a year-round platform for people to solve challenges anytime and they also want to have the game accessible regardless of the main contest going on or not.<\/p>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">According to the main topics of this year&#8217;s contest, our game should emphasize two categories of cyber security &#8211; Binary Exploitation &amp; Reverse Engineering. Our client will provide a problem list for this year. They need the game to serve as an intro and hope it inspires the players to explore the picoCTF platform further and gives them confidence in challenging the problems, as the two topics are often the most intimidating to beginners. The game should ideally demonstrate the concept of what learners can achieve after acquiring hacking techniques and encourage players to apply break-the-rules thinking.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-container-2 wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/picoctf-logo.b48dd31601be6b1cd24a45e02067704f.png\" alt=\"\" class=\"wp-image-105\" width=\"262\" height=\"227\"\/><\/figure><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:1371px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-palette-color-6-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container\">\n<h5 class=\"has-palette-color-1-color has-text-color\">Research &amp; Exploration<\/h5>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color\">Previous Projects<\/h2>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">We reviewed several previous ETC x picoCTF projects.<\/p>\n\n\n\n<div class=\"wp-container-7 wp-block-columns alignwide are-vertically-aligned-top has-palette-color-3-color has-palette-color-6-background-color has-text-color has-background\">\n<div class=\"wp-container-4 wp-block-column is-vertically-aligned-top\">\n<h3 style=\"font-size:24px;line-height:1.3\"><a rel=\"noreferrer noopener\" href=\"https:\/\/www.etc.cmu.edu\/projects\/brute4s\/\" target=\"_blank\">brute4s<\/a><\/h3>\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<iframe loading=\"lazy\" title=\"Mind Game Trailer\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/qUFjATtHc_s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Strong storyline &amp; pixel art<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-container-5 wp-block-column is-vertically-aligned-top\">\n<h3 style=\"font-size:24px;line-height:1.3\"><a rel=\"noreferrer noopener\" href=\"https:\/\/project-archives.etc.cmu.edu\/2021\/fall\/404-productions\/\" target=\"_blank\">404 Productions<\/a><\/h3>\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<iframe loading=\"lazy\" title=\"picoCTF 2022 Final Trailer (12.4)\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/U3g0EbQKM-o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>A combination of several mini programming games, fitting the client&#8217;s needs the most<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-container-6 wp-block-column is-vertically-aligned-top\">\n<h3 style=\"font-size:24px;line-height:1.3\"><a href=\"http:\/\/www.etc.cmu.edu\/projects\/cryptoknight\/\" target=\"_blank\" rel=\"noreferrer noopener\">CryptoKnight<\/a><\/h3>\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<iframe loading=\"lazy\" title=\"CryptoKnight Trailer\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/o1GFjVJHl68?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>An escape game with puzzles connected to cyber security<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color\">picoGym<\/h2>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">We also tried out some challenges on picoCTF&#8217;s year-round platform <a rel=\"noreferrer noopener\" href=\"https:\/\/picoctf.org\/index.html#picogym\" data-type=\"URL\" data-id=\"https:\/\/picoctf.org\/index.html#picogym\" target=\"_blank\">picoGym<\/a> to familiarize ourselves with the subject matters and technical knowledge.<\/p>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"539\" src=\"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-14-165514-1024x539.png\" alt=\"\" class=\"wp-image-122\" srcset=\"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-14-165514-1024x539.png 1024w, https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-14-165514-300x158.png 300w, https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-14-165514-768x404.png 768w, https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-14-165514-1536x808.png 1536w, https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-14-165514-2048x1078.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:877px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-palette-color-7-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container\">\n<div class=\"wp-container-10 wp-block-columns alignwide\">\n<div class=\"wp-container-8 wp-block-column\">\n<h5 class=\"has-palette-color-1-color has-text-color\">Brainstorm<\/h5>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-large-font-size\">Ideas<\/h2>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">We had our first brainstorming meetings, and everyone brought up some interesting ideas covering different aspects of the game, which seemed able to be integrated into one ultimate proposal.<\/p>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">For the players&#8217; goal, an idea was to hack a leaderboard to climb up to the 1st ranking. For gameplay mechanics, we thought about transforming the characters or items into different forms to solve puzzles, which express the idea of compiling and reverse engineering; we also looked into other programming-like games such as <a rel=\"noreferrer noopener\" href=\"https:\/\/tomorrowcorporation.com\/humanresourcemachine\" target=\"_blank\">Human Resource Machine<\/a>. For visual expression, we thought about using Minion-like cute avatars to represent bits for easier understanding for young kids. For the story and genre, we were inspired by Sci-Fi stories such as <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hbo.com\/westworld\" target=\"_blank\">Westworld<\/a> and <a href=\"https:\/\/www.quanticdream.com\/en\/detroit-become-human\" target=\"_blank\" rel=\"noreferrer noopener\">Detroit: Become Human<\/a>. Inspired by <a rel=\"noreferrer noopener\" href=\"https:\/\/www.imdb.com\/title\/tt0120382\/\" target=\"_blank\">The Truman Show<\/a>, We also thought about having the protagonist trapped in an artificial world and trying to break out. Finally, for art style and the sake of scope, we are preferring a 2D pixel art style and the story happening in a limited game space, as we got inspired by <a rel=\"noreferrer noopener\" href=\"https:\/\/www.igdb.com\/games\/party-hard\" target=\"_blank\">Party Hard<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-container-9 wp-block-column is-vertically-aligned-bottom has-palette-color-3-color has-text-color\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/images.igdb.com\/igdb\/image\/upload\/t_original\/z2ukwsdycewzbeeogxjx.jpg\" alt=\"\" width=\"270\" height=\"150\"\/><figcaption>Human Resource Machine<\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"http:\/\/publish.illinois.edu\/macsebertblog\/files\/2015\/04\/Truman-show-stairs.jpg\" alt=\"\" width=\"270\" height=\"150\"\/><figcaption>The Truman Show<\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/images.igdb.com\/igdb\/image\/upload\/t_original\/uixzahj8iwdwcf6quiaw.jpg\" alt=\"\" width=\"270\" height=\"150\"\/><figcaption>Party Hard<\/figcaption><\/figure><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:308px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-palette-color-6-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container\">\n<h2 class=\"has-palette-color-4-color has-text-color\">Next Steps<\/h2>\n\n\n\n<p class=\"has-palette-color-3-color has-text-color\">We are meeting with the whole picoCTF dev team next week! We&#8217;ll keep brainstorming and see what feedback they and our instructor have for us. <\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>week 1 post excerpt<\/p>\n","protected":false},"author":3,"featured_media":309,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":32,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":191,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/posts\/37\/revisions\/191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/media\/309"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/picopicopi\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}