11 Predefined Variables
How can we have our sketch grow proportionally to different canvas sizes?
Vocabulary
width, height, Predefined/ System Variables, mouseX, mouseY
Study Questions
- What is a predefined variable?
- Can we name a custom variable with the same name as system variable? Should we?
- How do I know what predefined or system variables are available for use?
Activity
Watch Video #1 (below)- Start by duplicating/importing your Activity 10 into Activity 11 file.
- Create xPos and yPos variables to adjust the horizontal or vertical position of the sketch. ⚠️ Stop any auto movement. Instead, make your animal, character, vehicle move with the mouse.
- Use width and height variables to create four identical items (ie. food item for character, road sign etc. Keep this simple.) that remain 25% of width and 25% of height away from each corner. These items should keep their relative position if the canvas is resized.
- Spend time to further refine your website style that you imported from Activity 10.
- Make sure the menu works.
- Make the site mobile friendly or responsive.
- Optionally, you may use the map() function to adjust the movement range of your characher to be within the canvas as the mouse leaves this predefined space.
- Introduce any extra cool effects, new character/ character movements you like.
Resources
- Video:
11 Predefined Variables