# A3 Goal: 1. **demonstrates** your **skills** as a **designer** and **programmer**. 2. creating something **original** and **impressive** that you can show on your **personal website**. （like blog?） plus: ~~1. write your **design rationale** in the provided comment box, **explaining the choices** you've made, what you were **inspired** by, and the **aesthetic you were aiming for**. This description can contain links to other media, but shouldn't be longer than** two paragraphs**.~~ ***equal*** 1. Clearly and concisely explain (in the Canvas text box accompanying your submission) the **choices you've made**, what you were **inspired** by, and the **aesthetic** you were aiming for. 2. Show us that you have considered the context of your sketch within a web page. Include any relevant descriptions of web design elements that may appear on your webpage but aren't in your sketch. E.g. **colour theme**, **layout**, **UI**, **text**, etc. 3. Make it original! 4. Explain how you have integrated one or more of the theories and concepts discussed in the lecture videos. Engage with the discourse of topics such as 'generative art', 'cybernetics and human/machine creative behaviours', 'emergence', etc. **question:** 1. two paragraphs meaning? how many word? (double check all write in Canvas comment box?) Could I? **first paragraph** will contain **design rationale** (explaining the choices + inspired+ aesthetic) also , **theories** which I use. **second paragraph** will say something about **colour theme**, **layout**, **UI**, **text**, etc. 2. can I just leave the website page? deploy online or? becasue I saw `**IMPORTANT: You are only required to create the landing page/hero image as a p5.js sketch. Website interface elements are not necessary unless directly relevant to your design. No HTML/CSS coding is required for this assignment.` but here the assignment ask me to say `any relevant descriptions of web design elements that may appear on your webpage but aren't in your sketch` 3. landing page and hero image looks same. both can have CTA, value,and form .So what is the deiiferent? just One is whole page? one is just a image? 4. how can I make CTA button ? just a fake button? 5. I am confused for the https://dribbble.com/tags/generative_art so We should do the landing page or hero image like this? what about https://dribbble.com/tags/generative_art should we add CTA OR CTA button? ## 1. landing page xample: https://www.wsiworld.com/ good landing page shou has **Question: ** * 1. landing page more like using **html,css**. why landing page relate to **P5js**? just for interactive? * 2. It seems like **landing page = hero page + CTA + CTA button** * 3. landing page is the page **before** home page? I think it is a home page. Not maybe, you don't knwo where the ppl come to which page. ## 2. hero page ![](https://www.optimizely.com/contentassets/d40102e25ce745e19315e89748354bf2/hero-image-example.png) meaning: hero image (Links to an external site.) that sits at the top of your personal web page providing the user with an interesting interaction, before they scroll down the page. **Question** 1. I think hero image don't need to consider more details about web design elements? Am I? 2. ---- Emergence, the idea that in some sense more comes out of a system than was put in, is the holy grail of generative art 第一个段落choices you’ve made, what you were inspired by, and the aesthetic you were aiming for + theme colour theme, layout, UI, text, etc. Explain how you have integrated one or more of the theories and concepts discussed in the lecture videos. Engage with the discourse of topics such as ‘generative art’, ‘cybernetics and human/machine creative behaviours’, ‘**emergence**’, etc. --- Your sketch should have a target aesthetic, some kind of mood, style, feel or vibe that you want it to evoke in your users. Clearly and concisely explain (in the Canvas text box accompanying your submission) the choices you've made, what you were inspired by, and the aesthetic you were aiming for. Show us that you have considered the context of your sketch within a web page. Include any relevant descriptions of web design elements that may appear on your webpage but aren't in your sketch. E.g. colour theme, layout, UI, text, etc. Explain how you have integrated one or more of the theories and concepts discussed in the lecture videos. Engage with the discourse of topics such as 'generative art', 'cybernetics and human/machine creative behaviours', 'emergence', etc. --- Hi, teacher. This is Chao. For this assignment, I create an interactive and responsive hero image. My design is to generate a variety of snowflakes through many random variables. Since I've been living in Canada for almost ten years now, my inspiration comes from the Canadian winter. In other words, my inspiration comes from nature. The colorful natural phenomena are an inexhaustible source of artistic creation. When I was very young, my mother told me that no two snowflakes in the world are exactly the same. Unfortunately, it never snowed in the city where I was born. When I came to Canada ten years ago, I found snowflakes to be particularly interesting. First of all, I have never seen the same snowflake, because the exact shape of a snow crystal depends on the exact path it takes to land (I tried to implement it in my design). Secondly, snowflakes always fall and melt silently, and I wanted to leave this beautiful scene. Therefore, when each snowflake falls, I added the sound of a musical note of piano. This adds beautiful notes to the presence of snowflakes, like a poem. Although each snowflake looks very light and small, its accumulation is very powerful. This also explains why each snowflake falls with a strong and powerful piano sound. In short, the aesthetics I'm pursuing is such that I want the user to feel the difference of each snowflake and the beauty of the snowflake's shape through my code. I desire my code to recreate the process of snowflakes falling and being created in nature. In this assignment, I used 'generative art' as the design theory of my code. In order to show that I have considered the context of my sketch within a web page. I deployed a website. （ https://chaoli.netlify.app/ ） I chose black for the background of the site and white for the text of the site. Only my name is in a different color, because it is more attractive. I tried to keep the site as simple as possible, so when the user first enters the site, they will see the navbar, p5 sketch and my introduction. The user can generate a pink snowflake by clicking on it, and the user can also use hover to influence the path of the snowflake. When the user scrolls down, the user can see the projects and articles I have written. ( *Reference: Code sources that I have incorporated or been inspired by： https://canvas.sydney.edu.au/courses/40098/pages/week-9-recommended-challenge-custom-constructors?module_item_id=1454205 https://canvas.sydney.edu.au/courses/40098/pages/week-10-required-challenge-intro-to-vectors?module_item_id=1454210 https://canvas.sydney.edu.au/courses/40098/pages/week-3-simple-algorithmic-designs-challenges-overview?module_item_id=1454166 Editor: https://editor.p5js.org/lidachao111222/sketches/BiAkTu_dC Personal website: https://chaoli.netlify.app/ )