AddACircleToTheCanvas.rtf

{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;\f1\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red46\green45\blue42;\red255\green255\blue255;\red162\green70\blue22;
\red13\green100\blue126;\red245\green246\blue249;}
{\*\expandedcolortbl;;\cssrgb\c23529\c23137\c21569;\cssrgb\c100000\c100000\c100000;\cssrgb\c70196\c35294\c10588;
\cssrgb\c0\c46667\c56863;\cssrgb\c96863\c97255\c98039;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{none\}}{\leveltext\leveltemplateid1\'00;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}}
{\info
{\author Elisabeth Robson}}\margl1440\margr1440\vieww19520\viewh25200\viewkind0
\deftab720
\pard\pardeftab720\sl920\partightenfactor0

\f0\fs72 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 Add a circle to the canvas\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 As you just saw in the video in the previous lesson, drawing a circle in the canvas isn't exactly straightforward, but now we have written a function to do this, we can use that function to draw all the circles we need for the Generative Music Box project.\cb1 \
\cb3 We're going to add the\'a0
\f1 \cf4 \strokec4 drawCircle
\f0 \cf2 \strokec2 \'a0function to the View in our project. Just like we did with the function\'a0
\f1 \cf4 \strokec4 updateDisplay
\f0 \cf2 \strokec2 , we'll add\'a0
\f1 \cf4 \strokec4 drawCircle
\f0 \cf2 \strokec2 \'a0to the prototype of the View constructor function, so it's available to the view object we created to manage the view.\cb1 \
\cb3 Once we've got the function added to the View prototype, we can use it to draw a circle. To test\'a0
\f1 \cf4 \strokec4 drawCircle
\f0 \cf2 \strokec2 , we'll call it with an x, y position of 150, 150, a radius of 100, and an alpha of 1, so the circle is completely opaque. Right now, we'll just draw one circle from the\'a0
\f1 \cf4 \strokec4 updateDisplay
\f0 \cf2 \strokec2 \'a0function, to test it. Later, we'll update the code so we're calling\'a0
\f1 \cf4 \strokec4 drawCircle
\f0 \cf2 \strokec2 \'a0every time you click on the canvas to add a new circle, and at that point, we'll pass in the x, y position you click on the canvas to determine the circle's location, which will also determine the circle's color.\cb1 \
\pard\pardeftab720\sa400\partightenfactor0
{\field{\*\fldinst{HYPERLINK "https://gist.github.com/bethrobson/84d978020942e17d66b1"}}{\fldrslt \cf5 \cb3 \strokec5 Get the full code for this step on GitHub}}\cb3 .\cb1 \
\pard\pardeftab720\sa400\partightenfactor0
\cf2 \cb3 When you've got the code added to your "View.js" file, move on to the next lesson where we test the code.\cb1 \
\pard\pardeftab720\partightenfactor0

\fs48 \cf2 \cb3 Resources for this lecture\cb1 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\partightenfactor0
\ls1\ilvl0
\fs40 \cf5 \cb6 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 		{\field{\*\fldinst{HYPERLINK "javascript:void(0)"}}{\fldrslt \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 Get the code for this step on GitHub}}\cf2 \cb1 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
}