- Gallery: Cat’s Drawing Board
- https://github.com/mingxuan0322/ShellyXuan_coding/tree/main/Cat’s_drawing_board
- https://mingxuan0322.github.io/ShellyXuan_coding/Cat’s_drawing_board/
-
- Brief Description and Concept:
- It is a sketch gallery of one of my p5 projects called Cat’s Drawing Board, presented by html/css/p5.
- Here is a Cat’s grawing board (I’d like to call it, Mr.Luo). the background can keep changing colors while moving your mouse. Here are functions you can interact with the board: 1. press your mouse and draw threads freely; 2. double click your mouse, then left a white snow spot on it; 3. press any key from a to z, then you can see the cat change a movement; 4. simply move your mouse(imitate using a rubber) to clean the board, or you can just click the CLEAN on the left bottom; 4. press the key 1-9 to change the weight of thread and size of snow spots. When drawing on the board, you can notice two eyes following you and find the thread’s color changed with mouse moving as well. Make a try and enjoy it!
- Demo/Visual Documentation:
- update
- Brief Description and Concept:
- Coding/Learning
- One challenge was how to make elements align center. I found some solutions and applied two of them:
- One is typing the code below into the corresponding class in CSS. The parameter change can adjust the exact position I want.
-
left: 50%;top:100%;transform: translate(-50%,-70%);
- The other one is: (Also in a class in CSS)
-
margin: 0 auto;
- Another step worth mentioning was putting dacorative pictures backward. My solution was to find a index instruct the order of all element–z-index(in CSS). The bigger a z-index value is, the higher the corresponding element is over others. And there is an interesting fact about z-index. Only when the position of class set can z-index make sense!
- One challenge was how to make elements align center. I found some solutions and applied two of them:
- Reflection/Lessons Learned
- How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
- Right now, css is only named as style.css and htmls are like about.html, index.html.
- According to my observation, file name should include no space and be best connected by “-“. Also, the words in names are expected to be concise and well-ordered.
- When would you want to use classes, when IDs?
- As for me, classes are used to set styles of normal element, like div element, text(p, h1…). And they are more frequently used than IDs are. For IDs, I only use it in unique once before following professor’s coding process.
- How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
- From my perspective, editing and styling a text in Microsoft Word is much more simple and convenient, compared to writing HTML. But Microsoft Word is tailored for office work which need conciseness and user-friendly tools rather than freely designing environment like HTML. So, there are great limitations in Micro Word.
- Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
- Compared to p5.js, which is more like a canvas-like element in the entire HTML/CSS programme. Writing HTML/CSS means I need to consider more about the combinations and interactions between files(htmls, css, assets folder…), website, and so on. When writing HTML, I can not only edit programme in p5.js, but also add more elements and various styles into the HTML.
- Which limitations did you run into in the styling of your page?
- The biggest limitation was that it was too free to wtriting HTML/CSS and there are too many various code phrases that I don’t know much about how to use, choose, or get the one I really want.