week05 02 advanced topic - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda

1. image, tint
2. mouse click event
3. activity: balance
4. review: assignment04
5. Q&A, troubleshooting

---

css styling

I will review the createA() and demonstrate css styling.

image

We will test how to load the image and show the image at the place we want.

https://p5js.org/reference/#/p5/loadImage

Then, test how to implement mouse hover and change the color by using IF and tint()

https://p5js.org/reference/#/p5/tint

mouse click

In addition to createA() - to create in the html <a href="URL" target="_blank">hypertext</a>, another JS function can be used to launch the url: window.open("URL");

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

We will link the url by using mouse click and IF.

showing mouse movement by pmouseX

https://p5js.org/reference/#/p5/pmouseX

https://p5js.org/reference/#/p5/pwinMouseX

---

activity

I want you to draft your presentation cover -- and by team, you will make a team-cover page to access team member's work. Divide the canvas by the number of team members to make the layout balanced - Let's play with the team-members' image + tint + IF.