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

  1. What is a predefined variable?
  2. Can we name a custom variable with the same name as system variable? Should we?
  3. 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

  1. Video: 11 Predefined Variables