1.3: Working with Cartesian Coordinates
- Page ID
- 20116
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
- Overview of Cartesian Coordinates
- Finding Coordinates in Adobe Software and Chrome
Overview of Coordinates
When coding for Web animations, it's important to know how a browser will calculate where objects are in its window. All browsers use a Cartesian coordinate system to do this.
"Cartesian coordinates allow one to specify the location of a point in the plane, or in three-dimensional space. The Cartesian coordinates (also called rectangular coordinates) of a point are a pair of numbers (in two-dimensions) or a triplet of numbers (in three-dimensions) that specified signed distances from the coordinate axis."1
The Cartesian coordinate system consists of X, Y, and Z axes. As shown in figure 1 below, the X axis runs parallel to the bottom of your screen, the Y axis runs perpendicular to the X axis, and the Z axis provides a depth of field in moving away from the viewer and toward the viewer. You can see this in Figure 1 below.
Figure 1: X, Y, and Z Axes in a Cartesian Coordinate System
Coordinates in a Web browser work much in the same way that coordinates in your Math classes do. The first number will be the X value and the second number will be the Y value. So, if you want a spot at 30 on the X axis and 20 on the Y axis you would notate that as "30, 20." So far, so good!
Web browsers use the lower right-hand quadrant of the X and Y axis AND they use positive numbers on the Y axis.
However, there is one big difference. Web browsers use the lower right-hand quadrant of the X and Y axis AND they use positive numbers on the Y axis. You can see this in Figure 2 below. If you remember your Math class, you will remember that that particular Y axis is typically denoted in negative numbers. Make sure that you remember this difference when we start using coordinates later in the course.
Figure 2: How Coordinates Work in Web Browsers
How to Find Coordinates in Adobe Software and Chrome
As you're animating, from time to time you will need to know the exact coordinates of an object so that you can calculate a path for it to follow. How do you do this? Luckily, there are some pretty great options to help you do this.
First, in Adobe programs like Illustrator and Photoshop, there is an information panel of some kind that will show you the location of where your mouse is on the artboard. To see this window in either Photoshop or Illustrator, go to Window > Info. Then, just look for the "X:" and "Y:"coordinates that are listed in the panel.
coo
Figure 3: How Coordinates Work in Web Browsers
Another nice tool to keep in mind is the Coordinates Extension. This extension allows you to see coordinates as you mouse over an HTML page when you have it open in Chrome. Sometimes, it's just nice to see things in a live environment!
Footnotes
- “Cartesian Coordinates.” Math Insight, Math Insight, https://mathinsight.org/cartesian_coordinates.