WEBVTT 00:00:00.012 --> 00:00:03.792 Now we run into an interesting concept. Is that we'd like to have our robots 00:00:03.792 --> 00:00:07.459 move around the screen, which presents a problem. Currently our canvas 00:00:07.459 --> 00:00:11.304 coordinates are the same as our map coordinates. Such that tiles 00 on the map 00:00:11.304 --> 00:00:15.269 renders to location 00 on the canvas, but as our robot moves around We want them 00:00:15.269 --> 00:00:19.242 to stay at the center of the screen and background move around accordingly. In 00:00:19.242 --> 00:00:23.070 order to properly translate to canvas we have to separate those two coordinate 00:00:23.070 --> 00:00:26.504 systems. Such that we can map the translated world value to the canvas 00:00:26.504 --> 00:00:30.672 coordinates to accurately draw. Your goal, if you choose to accept it, is to 00:00:30.672 --> 00:00:35.316 write a function that will translate the map to center around a given x, y pair. 00:00:35.316 --> 00:00:39.848 For instance, if we call center at 00, then the top left corner of the map 00, 00:00:39.848 --> 00:00:44.549 should render at the center of the canvas. Center is 256 by 256. Should put the 00:00:44.549 --> 00:00:48.875 map coordinates of 256, 256. In the world space at the center of the canvas. 00:00:48.875 --> 00:00:52.977 Now, write a function that will translate the map to center around a given x, y 00:00:52.977 --> 00:00:57.219 pair. For instance, if we call center at 00 then the top left corner of the map 00:00:57.219 --> 00:01:01.336 00, should render at the center of the canvas. Center at 256 by 256 should do 00:01:01.336 --> 00:01:05.304 the corollary thing, placing coordinates of 256, 256 in world space at the 00:01:05.304 --> 00:01:09.531 center of the canvas. Now, notice you'll actually need to know the canvas width 00:01:09.531 --> 00:01:13.500 and canvas height when computing this data so you know where is the center of 00:01:13.500 --> 00:01:14.238 the canvas.