Ricky's Documentation Blog

Reading and Listening 1

by Leave a Comment

Industrial Design turns technology into something that actually benefits people’s lives. “Early computing pioneer David Liddle talks about the three stages of technology adoption: by enthusiasts, professionals, and consumers.” Industrial design is actually how technology is adopted by consumers. The product of industrial designed are to be manufactured and achieve business success. Being able to be manufactured means that the technology is already matured and well-established, and being able to achieve business success indicates the technology is adopted by consumers, and can truly benefit them.

One of the major difference between industrial design and other kinds of  design is that business is involved and emphasized. When considering whether a product is successful, being well-designed or not is never the only standard. Take the competition between Apple and Windows in 1990s as an example. It’s hard to say Mac is not a well-designed product, but with it’s the different business model and limited accessibility, they failed to possess more market share than their opponent.

I went on for some more research, mainly about Dieter Ram’s 10 principles of good design. One of the is quite interesting: A good design is unobtrusive, it leaves room for costumers self-expression. The principle reveals something I’ve never thought of. The designer will not do everything for the consumer, they just need to make the product function and attractive(so that the consumer will buy it), then they will leave the rest to the costumer. This also cords with another principle: “Good design is as less design as possible”, less is more, we should make the product as effective as possible.

Industrial design is one of the best way to apply technology to our daily life, to make those from laboratories actually function in everyone’s home.  I believe that’s how industrial design impact the world. With the help of industrial design, companies and institutions can convert technology into wealth and resource, and costumers can enjoy better products.

Unnecessary Inventions and Whimsical Devices-Problem Definition and Research

by Leave a Comment

Researches

My favorite unnecessary invention(s) from Matty Benedetto are the selfie sticks that serves as solutions to specific scenarios. Like the “Mirror Selfie System” that “allows you to get the ideal mirror selfie aesthetic anywhere” as illustrated

And the “The Chris Coffee Carrrier” that helps to shoot the videos and selfies of carrying a cup of coffee everywhere.

Matty Benedetto detected the problem of people’s needs for taking specific types of selfies, and designed those interesting devices–mainly use a frame to carry the phone on one side and some other things on the other– to solve these problems.

Problem Definition

Three non problems I detect in daily life.

1.The cables of earphones always get tangled, like the meme illustrated.

This one might be more necessary than the other two I detected. The tangled earphone cable did caused some troubles, although not severe. If there can be an interesting way to solve the problem, it will be great.

2.People may not be able to find something to hold on the subway during the morning rush.

During the morning rush, the subway is crowded with people, for someone who just get into the cabin, they may find nowhere for them to hold, then it’s hard to stand still when the train starts to move or stops. Then maybe carrying a device that can stick to the ceiling of the cabin or something that can act as the extension of the arm to hold the poles, then people can freely focus on their phones or even take a nap.

3.In Chinese middle schools, students are willing to take a nap during the ten-minute break between classes, but can’t find a rather comfortable place.

In a lot of Chinese middle schools, students can’t get enough sleep, so they have to or unconsciously fell into sleep during breaks or even classes. However, they can only remain seated and just their arms or the desk as the pillow. When they wake up, their face can be horrible and their hands will get numb, not to mention the saliva, if there can be something that act as a pillow that can be easily carried anywhere, then things might be better.

 

 

From the Fool to the World — Explore the Tarot

by Leave a Comment

Ricky Zhuang: From the Fool to the World — Explore the Tarot

For Outside Readers:

Elevator Pitch:

The project aims to help the user explore the Tarot in a gamification way.The users can click on cards and symbols to see their meanings and interact with some puzzles.

Abstract:

The project aims to help the users to explore the Tarot in a gamification way. There will be a lot of pictures that act as buttons within the four pages of the project, by hovering and clicking them, the users can get various of meaningful feedback, including introduction to the cards, appear and disappear of texts, solving certain puzzles and so on. The user will first enter the index page, where they can interact with the button, which is a symbol of  “the Fool”, the starting of the Tarot cards, by clicking it, they will go to the second page, which is introduction, users can click on each card to see their serial number and the symbols. After knowing the basic knowledge, users will solve a puzzle, which they need the knowledge they learnt in the second page, if they reach the right answer, the symbol of “the world”, which is the final symbol of Tarot will appear. Finally, users will be transported to the final page, there will be three cards there, they can interact with the cards, read them or make their own stories with the cards drawn. The project provides a much more interactive way for people to explore the mysterious Tarot card.

 

For myself and the instructor

1. Design and Composition

First seeing the requirement of exploring something of our interest, Tarot was what first appeared in my mind, I’ve read a novel about this, and was obsessed with the mysterious feeling and endless possibility of the 22 cards. Starting from the Fool, which means start a journey of all possibilities without any worries and concern, while ending with “the world”, which means end of one journey and start of another and the achievements, the 22 cards each represents certain stage or incident that may appear in a journey, which is really worth exploring. At first, I wanted to make a website for divination, however, it’s hard to do so as it’s impossible to cover all the possibilities as the readings are complicated. Then professor Moon reminded me that the project about a certain topic doesn’t mean the rules of the topic need to be followed, that is to say, I can only borrow definitions from the tarot and create my own rules.

With this insight, I found puzzle maybe a really good way: both Tarot and puzzle have the feeling of mysterious and it can be good to link them together. When designing the puzzles, I found serial number of each Tarot card is something I can play with, I refer to a classical math problem and make it an interesting puzzle, however, when designing more puzzles, I encountered some difficulties, they are either to hard to do with p5 or not that meaningful and interesting. With only one puzzle that is really suitable, I tried another way, make the project more comprehensive: there will be both games and knowledge, which will require more work, but it will also the best way for myself to explore pursue my interest in Tarot.

I also referred to the Tarot websites on the Internet, for those applying knowledge, they are lack of interaction and are not engaging, for those apply readings, they actually limited the possibility, which is against to some of the basic thoughts of Tarot, which also reminded me of the famous quote:”Less is more”, maybe I can leave more space for users to explore and create themselves.

Here’s the picture of the puzzle:

2.Technical.

The project both plays with css and p5, I managed in creating a lot of interaction only with css, and interacted with more than images with p5

p5

For the p5 code, they are not difficult but complicated, it’s not challenging to shape the structure of the code and think of the function I should use, however, it’s really time consuming as I need to interact with the 22 images one by one. Professor Moon suggested to use class for image button, they are easy to use, however, image array seems not that friendly, I encounter some difficulty to input the image stored in an array into the class, however, with the help from professor and the “Reference” of p5, I managed to do so. The true difficulty happened when I was trying to change the size of the image. Since the original size of the image were too big and it’s impossible to display them in the Introduction page together, so I tried to resize them, it worked well. The thing is, as I tried to resize them twice to display bigger image upon hovering and clicking, the image will become really blur, that is to say, the resolution is too low for users to recognize them. I tried a lot of ways but they all didn’t work. To avoid this, I preloaded each picture twice, and gave them different names then I managed the pictures to be displayed in different size, with the cost of even more complicated code.

I tried to add some particles to the first page to make it more dynamic, I tried particles like rain, meteor and bubbles, but none of them work well as I need to emphasize the symbol of the Fool in the middle.

I also encountered some surprise during coding, when I was programming the last page, which is about drawing a random card when the mouse is clicked, I forgot to include the code of only draw once when mouseIsPressed, however, suddenly I found let it draw multiple times when mouseIsPressed has a better effect, it imitates the process of drawing card better. 

css

Coding with css is something more challenging, as it is not familiar to me. This time, with css, I managed to do something other than changing the font, size and position of texts

I explored text boxes more. I not only used new fonts, changed colors, but also add background image to them. In the second and third page of my project, I need paper under texts to provide a sense of mysterious, with professor moon’s help, I managed to do that with the code background-image, moreover, adjusting the size of the background is also tricky, but I managed to do them

I also explore how to change a picture to another upon clicking, although a more gentle way with the js code was recommended by professor Moon, I still used the easiest way, which is overlapping two images together and let one disappear upon clicking, reason for this is that there are texts on the image at the bottom, so with my knowledge with coding, it’s hard to switch using javascript.

With professor Moon’s advice, I also played with flex-box, as I need to try my best to make the web page accessible  with different size of window, for my second and third page, as embedding a huge p5 canvas is a must, so it’s hard to do so, however, I managed to make the texts in a rather suitable for the first page–no matter the size of the page or whether it was zoomed. 

3.Reflection

The whole process of designing and coding the project went well. For Interaction Lab last semester and CCLab this semester, most of projects I have chosen are with specific focuses, and this time, I challenged myself with a much more comprehensive one, with multiple pages with different aims, and huge amounts of work with pictures and texts. However, I made it, mostly, I achieved most of the effects I wanted to achieve, which I am satisfied with.

Considering feedbacks, I applied most of the feedbacks professor Moon posed on my project, which I have addressed in the previous part of this article. During Interaction day, several peers gave feedback, mainly focussing on creating a better sense of mysterious, and change the way of interaction– half of my interaction was achieved with pressing key during interaction, and they were not friendly and comfortable according my peers, so I changed most of them into interaction with mouse.

What I am least satisfied with the readability and accessibility of my project. Although I formed the structure of this comprehensive project well, there still exists a lot of problems with details. One of them, according to guest critics, is readability of texts, I was trying to achieve the sense of mystery with dark yellow paper and the font “Dancing script”, while ignoring that the combining of these two make the texts hard to read, moreover, I want to make the puzzle more like a puzzle, so I provided some really blur instructions at first, however, it seems that nobody like them. So maybe next time I was doing web designing, I need to have more people experience it and give me feedback, also, I can’t be too arrogant and think the visual I like is the best way to design it.

Some further development of the project can be more games or puzzles for users to explore Tarot, and more professional and complete introduction to the Major Arcana

Overall, I think this project is a success, I stepped out of the comfort zone and made a lot of achievements. It also reminded me of the importance of details and accessibility. 

Final Project proposal

by Leave a Comment

For my project 2, I want to make something based on Tarot cards and their principles, mostly about the main cards, which are also referred to as major Arcana. There are 22 of them, numbered from 0 to 21. The deck starts with the card “The Fool” which indicates the start of a journey and endless possibilities, and ends with the card “The World”, which indicates end of the cycle of life and achievements. The whole deck indicates a journey of life, I want to use this to inspire my audience to explore the endless possibilities of life.

What I am going to do is to create three puzzles which are not that difficult to solve, the first one with the theme of starting with The Fool, the second one with the theme of ending with The World, and the third one to propose the thought of “endless possibilities”. 

The aim of the project is to create some interesting interactive experience, while proposing some thoughts about try different possibilities of life.

The project was originated from a Chinese novel I was reading, the name of which was “诡秘之主”， it was a story about Tarot and mysteries, which leads to my exploration of this and also this project I want to make.

Recitation 8

by Leave a Comment

Recitation 8

For this recitation, I created a web page to introduce my p5 project, Optimus prime. What I mainly have done is include a heading and a description for the project. For the heading, I viewed Google font, trying to find something cool and provide a sense of science fiction, and I found “Rubik Pixels” it looks like a combination of pixels providing a perfect feeling. I used the <span> code to change the color of Optimus Prime to make it more characteristic and beautiful.

For description part, I used black background and white words to emphasize them, I also included a link to change the color of Optimus Prime, which is actually a link to the page itself and it’s purpose is to refresh the page, I changed the color of the link to make it more natural in the text

I also changed the background color.

During the whole process, I didn’t encounter some really big problems, when forming the font and the color of the link, I do need to refer to previous slides and demo codes to better understand how to do those.

Here’s the screenshot.

 

Reading Reflection 3

by Leave a Comment

Reading Reflection 3: New Media Art – Introduction

This article mainly introduces new media art, a new form of art to us, the author thought that new media arts are those arts created with the help of or using the web technology, including game art, hacker, videos, remote control and other interesting forms of art. Although the definition of the art is not really different nowadays, the things included in web art has increased a lot. In my opinion, all of the things people regard as art and was created with the help of web and media technology can be recognized as new media art. Emojis can be one of them. People used punctuation marks as emojis at first, such as “:)”, which later developed into all kinds of faces in different modes and other elements, which can be recognized as a kind of new media art. Also, memes can be included, they are created with certain purpose, mostly sardonic, the creators used web technologies to develop them, so they are also new media art. Games can also be one, especially those created with aesthetic purpose, such as Monument Valley.

Ken Goldberg’s Demonstrate is a great new media art. The artist, Kenneth Yigael Goldberg is an American artist, writer, inventor, and researcher in the field of robotics and automation.  It was in 2004, he showed the public on the Internet the archive of 1200 photos and textual comments, which offers a portrait of public space as viewed from the public in cyberspace. The pubic space is in University of California Berkley, and the art project is originally designed to coincide with the 40th Anniversary of the Free Speech Movement. It attracted nearly 4000 participants around the world, which was proved to be a success.

Another masterpiece, which was developed before 2000 was Rara Avis from Eduardo Kac. Rara Avis is an interactive telepresence work in which local and remote participants experienced a large aviary with 30 birds from the point of view of a telerobotic macaw, the user can first sees an aviary in which is a large robotic macaw that has a camera installed in his head and the head will move from one side to the other with other 30 birds, then, by putting on a helmet, the users can experience all these from the macaw’s point of view. By enabling the local participant to be both vicariously inside and physically outside the cage, this installation created a metaphor that revealed how new communications technology enables the eliminate boundaries at the same time that it reconstruct them. The project is so interesting and interactive that we can hardly believe its created in 1996.

New media art is a new form of art, they are more accessible then previous means and much more interactive.

Reading Reflection 2

by Leave a Comment

Reading Reflection

After Reading the article Long live the Web by Tims Berners-Lee, who invents the world wide web, I do learnt a lot about the web and also a lot to talk about.

First, after learning the beneficial and ill effects of the web, I did reflect on my own life, and found some example that is helpful for showing these effects.The web is a marvelous tool for academic research. With the web, we can easily get access to most of the journals, newspapers, and other materials from our home. We don’t need to go to the library and view through hundreds of books to find the article or the knowledge we want. As universality being the foundation of the web, all kinds of information can be found on the web, thus making it much more easy to get the knowledge of the area I am searching. For ill effects, snooping is the most annoying one. I remembered one time a typo occurred and  I searched “High heel” when I was actually trying to search for the artist Gauguin(their pronunciation in Chinese is the same), then I keep on seeing recommendation and advertisements of different kinds of heels when I enter different apps on my phone, especially those online shopping apps. It’s obvious that what I searched was snooped and shared with third party for personalized advertisement, which make me really unhappy and worried.

Universality means the web should be accessible for everyone everywhere, any kind of information in any form  can be shared on the web with the help of technologies like URI. Isolation means the opposite: some information of a certain website is impossible or hard to access from other website, and the information posed on some websites are restricted.

Open Standard means Every committed expert have the chance to design how the web should be like and be reviewed by others the whole process should be free, also, everyone should be able to create their own website permission from a certain organization, closed world does the opposite, the information there are only accessible on these websites, and they are only known and innovated by the company creating them. Apple is one typical example of closed world: we may find apple operation system is easy to use, but it’s hard to add certain apps we really want but is not available in the “App Store”, bringing a lot of inconvenience. 

For me, web is a system that enables information transmits within it. And the Internet is a platform, where we can connect different web to it and let them connect with each other. Webs can function without the Internet, but they can be much more powerful with the help of the Internet.

We’ve achieved great improvement in three aspects of the column “Future in Action” of the article. We can know combine different information together to help our life, which is now applied nearly everywhere in our life. Social Machine is prosperous nowadays, we have WeChat, Twitter, Tik Tok, Youtube and all kinds of platforms, everyone can easily pose their thoughts and masterpiece on the web so that everyone can see them and comment on them. For Web science, Big data analyzing is the best example, it collect massive amount of information and process it, as it covers nearly all of the date, so it do succeed in shaping the world. Free bandwidth is developing greatly, but it’s still not universal. There are also new problems including deep fake, information leak and loss of privacy, which are all side effects of the great development of web. Because of the universality, all kinds of information can be spread, helping deep fake spread. Also, due to open standard and universality, leaking and loss of privacy are happening  from time to time. 

All in all, the web do changed our life greatly, and we sincerely hope it to be better. Long Live the Web.

Light of Civilization

by Leave a Comment

Part 1

Ruiqi Zhuang: Light of Civilization–Create Your City and Light it up!

Elevator Pitch:

Light of civilization enables you to simply customize a city by drawing the main roads of it and light it up with a click on the key “L”. It aims at mimicking the light effect of a city at night and inform people how great and beautiful human civilization is. 

Abstract:

The project is inspired by a trip on the plane at night, when I was sitting next to the window an look out of it, I was really impressed by the beautiful scenery of the big cities lighten up. At that time, I was totally amazed as how great human civilization is: we totally changed the planet, making night no longer dark, and I wanted to convey this kind of feeling of amazed and surprised to my audience, that’s why I created the project. The users can draw some lines on the canvas, which will act as the main roads of the city, which can also be interpreted as city planning and designing. After they finish designing and press the key, the city gradually light up, and finally create a great picture with the combination of lines and dots, just like a myriad twinkling lights of a city.Upon looking at these, the audience may feel surprised and “wow” at first, and then be amazed at the final picture they “created”. I hope people will know how much great it is to make simple villages into metropolitans, now it’s only some simple manipulation, but it’s actually the work of hundreds of generations of people, we should really appreciate and cherish the beauty nowadays.

 

Part 2

Design and Composition:

When I read the prompt for the first time, I had the idea of drawing the city at night, because that’s what can be presented with particles and lines while considered as beautiful and meaningful. My original idea is to randomly generate lines and dots, but that seems to be lack of interaction, so one way of improvement is to let users decide several dots, and I generate those lines around the dots, but the same, the interaction is not enough: the decision users made didn’t really pose a strong effect on the final work. With these concerns, I finally made the decision of using lines to demonstrate the main road of the city, and generate the rest of the road and the light. Under that circumstance, the users will feel like they are actually drawing, and what they have drawn will bring them a surprise by being converted into some beautiful light effects.

While making the project, at first, I generated horizontal and vertical straight lines like this, which does worked, but not satisfying.

I added some lines that are oblique and make them connect with the vertical or horizontal lines, so that there could be more changes to the lines while not being chaotic. Like this:

Now that the roads resembles the roads in a city, the only problem is the color and the density of light. I did a lot of research of color, including asking Chat GPT, and found the most appropriate value. For the density of light, I tried a lot of values and the range it will generate before make my decision. I tried to let the light somehow blink, but since they are all randomly generated, so its control single ones, meanwhile, letting every light blink will ruin the feeling of looking at a city, so I abandoned this.

Also, I was thinking adding a prototype function, by pressing “p”, one can see the extra generated road in black on the white canvas, but during user testing, Sam said it will ruin the feeling of surprise, which I agree, so I didn’t put this into effect in the final version, but the code was still there, I use “/*”  and “*/” to ignore that.

Then the final version is clear, the users draw lines on the canvas, after drawing, they press the key “L” to generate the city, they can also use the key “A” to add more lights to the city.

Besides, when making this, I developed a follow up project with similar visual effects.They look beautiful and can be further developed. The code of this is: https://editor.p5js.org/zzrrqqq/sketches/B3iBGp891

 

Technical:

The whole coding process went smooth. I first wrote the code of drawing on the canvas and convert it into a different color gradually upon pressing a key, which is the most difficult and important part of my project. I encountered a lot of problems with this including being unable to store the line drawn, failed to change the color of each one. After studying, I found that I can store the value of mouseX, mouseY, pmouseX, pmouseY into one class of an array, so that it can show the line drawn by the user under one case, while changing the color and implementing other changes when it was in another case. For gradually lit up, I used the original function of Draw(){}, which can work repeatedly. I Created a universal variable, let it equals to itself plus one every time, and function the corresponding element in the array. Fortunately, these approaches all worked. After addressing this main problem, the rest of the work is more about polishing and decorate it, together with making it more interactive.

As was addressed before, I changed the mode of the additional lines were generated from generating horizontal and vertical ones to a more complex mode. For this part, I added a random value “this.r” in the class, different values of “this.r” indicates different ways of the generating lines. Working with the “if”code, I managed to let every point of the main road randomly choose a way of generating additional lines.

What I didn’t manage to achieve is to let some of the light to blink so that the whole picture look more like a city’s light. The reason for this is that the lights are totally generated in the class, so I can’t control individual ones, besides, the code of generating lights only function once at a time, so it’s impossible to change the color or the blend value from time to time.

Since now every move is actually in a single class in my code, If I have the chance to do the whole thing over again, I will try to create more objects, and put different modes of changing into different classes, so that I can get better control to every move. With that move, I can have the chance to change the colors of the roads and of course let the lights blink.Also, I can reduce the number of the lights, for now I am only able to generate more lights at random places.

 

Reflection and Future Developement

The whole process went quite well, it mostly presented what I wanted to present, what went well is the coding process and the interaction, I didn’t encounter any problem that is too hard to solve, which means I can stick to my idea and improve it. I solved most of the coding problems myself, and with professor Moon’s help, I managed to find a way of translating the color of the line the users have drawn. Also, the interaction did provided the feeling I want: a surprise change and the gradually lighten up city. 

What still needs to be improved is how the final picture actually resembles the image of a city, although it can be considered as an abstract version of the city at night, it maybe still not that clear. When doing the peer review, Benson said he was quite confused, I think that’s maybe because the light are not blinking and they should be in different shape and color, also the road are more complex, there maybe overpass or other more complex structures. All in all, there should be more specific details to imply that it is a city.

Other suggestions I received during peer review includes change the color of the roads, add more red to it to make it more like the color of road light; add an instruction so that users know what they can do; let the light blink; add the function of editing again. I addressed the first two, failed to let the lights blink, and for the function of editing, my opinion is that its really hard to totally change the overview of the city, so it’s not suitable to enlarge the city after one had already generated one, that is against my initial purpose how great it is to create a big city like this. 

For suggestion from professor Leon(hope I put down the right name), I really appreciate them, especially that instead of pressing the key “L”, the picture should generate automatically, for example, after there is no manipulation for five seconds, this will enhance the feeling of miracle and surprise. I’m with most of Sonny’s suggestions, for that of adding the instruction of “Press ‘A’ to add more light” on the completed canvas, I think that’s not the best way, because that will ruin the beauty of the picture. One way to do this is to follow Anya’s way of showing instruction: when pressing a key the instruction appears and with another press it will disappear.

Besides skills of coding with objects, I also learnt some other things during designing. One of the important one is always think in the user’s shoes, as I said before, I planned to add a prototype function to it, but actually that’s just a good way of adding interaction for me, who is more than familiar with the project, actually that will ruin user’s feeling of surprise. Another thing I learnt is always turn to others for feedback, since I made the project I will always think it’s a good one and may ignore those that are not perfect with it. So I actually ask my parents and my friends who don’t know anything about p5 and my project to judge it, which helped me find a lot of problems. 

Overall, I think my project the civilization is a success, I did learnt a lot during designing and coding

 

 

 

 

Recitation 7

by Leave a Comment

Recitation 7: Particles

I used this recitation as a practice for my Project A, so I tried to use practices to make the effects that mimic the city at night. the problem is that sometimes it maybe too bright

The way of Interaction is like this: users can draw lines freely on the canvas, after that press any key to close the light(make the canvas black) then, they can press on the key “l” to gradually light up the lines they drew.

the code is here:https://editor.p5js.org/zzrrqqq/sketches/4z8sTaEMz

I didn’t record a video because I think it’s more fun to interact.

The difficulty I encountered is basically how to light up the road gradually according to what the user had drawn. With the instruction from Professor Moon, I used “class” to achieve this. Store the spots as classes with four variables on the line into an array, and display elements in the array one by one will help, finally I succeeded, I also apply other changes and particles to it.

Reflection:

1. OOP is programming the movement and display separately, one can do any one of them at anytime without processing other codes. A Class is an object that can be shown and moved on the canvas, it can be freely displayed any number anywhere and user can decide whether to let it move. An example is a ball on the canvas that can either choose to move or not to move.

2. OOP is effective because the movement and display are coded separately, one can easily make changes without influencing other codes and freely decide whether to move. When we need to display same things at different status on the canvas, OOP is extremely useful as people can display them and decide whether to let them move or how to move.

3. I created an object that can be shown only as a line according to mouse and “pmouse” at first but can change color and show other particles when certain key is pressed. I used mouseX, mouseY, pmouseX, pmouseY together with other local values to make that.

4. How to reverse the class, for example, if the “move” asks the ball to go left for 100, how to let it go back to the initial point without creating new periods.

Project A proposal

by Leave a Comment

The Light of Civilization

For the mid-term project my inspiration comes from one of the artwork “Big city” I saw at the field trip.

It made me thought of the beautiful scenery I witnessed on a plane at night. The light of the city are like belts and patches, creating a feeling of prosperous, like the following:

The two pictures above are where my references and where my inspiration come from

I want to use generative art to reproduce that kind of feeling, and the name of the project will be “The Light of Civilization” The procedure of the drawing is as follows: users are asked to draw several lines using the mouse on the white canvas, which will serve as main roads of the city, then the canvas will turn into black and the lines will appear in golden color with halos around, there will be dots and patches generating around the canvas, and more around where the lines intersect with each other, the dots will be randomly generated so every time the picture will be really different. 

Here’s the prototype

 

Here’s the link to the presentation: https://docs.google.com/presentation/d/1eIOBJYFY9pPwrC0bqOnuAtRMCkfcq4jc6QJV-SDrHCA/edit?usp=sharing