index.html 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417
  1. <!doctype html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <link rel="shortcut icon" href="../assets/images/favicon.png">
  7. <meta name="generator" content="mkdocs-1.1, mkdocs-material-5.4.0">
  8. <title>Shapes Reference - Jypyter Sketcher</title>
  9. <link rel="stylesheet" href="../assets/stylesheets/main.fe0cca5b.min.css">
  10. <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  11. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
  12. <style>body,input{font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace}</style>
  13. </head>
  14. <body dir="ltr">
  15. <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  16. <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  17. <label class="md-overlay" for="__drawer"></label>
  18. <div data-md-component="skip">
  19. <a href="#list-of-shapes" class="md-skip">
  20. Skip to content
  21. </a>
  22. </div>
  23. <div data-md-component="announce">
  24. </div>
  25. <header class="md-header" data-md-component="header">
  26. <nav class="md-header-nav md-grid" aria-label="Header">
  27. <a href=".." title="Jypyter Sketcher" class="md-header-nav__button md-logo" aria-label="Jypyter Sketcher">
  28. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 003-3 3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54z"/></svg>
  29. </a>
  30. <label class="md-header-nav__button md-icon" for="__drawer">
  31. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  32. </label>
  33. <div class="md-header-nav__title" data-md-component="header-title">
  34. <div class="md-header-nav__ellipsis">
  35. <span class="md-header-nav__topic md-ellipsis">
  36. Jypyter Sketcher
  37. </span>
  38. <span class="md-header-nav__topic md-ellipsis">
  39. Shapes Reference
  40. </span>
  41. </div>
  42. </div>
  43. <label class="md-header-nav__button md-icon" for="__search">
  44. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
  45. </label>
  46. <div class="md-search" data-md-component="search" role="dialog">
  47. <label class="md-search__overlay" for="__search"></label>
  48. <div class="md-search__inner" role="search">
  49. <form class="md-search__form" name="search">
  50. <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
  51. <label class="md-search__icon md-icon" for="__search">
  52. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
  53. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
  54. </label>
  55. <button type="reset" class="md-search__icon md-icon" aria-label="Clear" data-md-component="search-reset" tabindex="-1">
  56. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
  57. </button>
  58. </form>
  59. <div class="md-search__output">
  60. <div class="md-search__scrollwrap" data-md-scrollfix>
  61. <div class="md-search-result" data-md-component="search-result">
  62. <div class="md-search-result__meta">
  63. Initializing search
  64. </div>
  65. <ol class="md-search-result__list"></ol>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </nav>
  72. </header>
  73. <div class="md-container" data-md-component="container">
  74. <main class="md-main" data-md-component="main">
  75. <div class="md-main__inner md-grid">
  76. <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
  77. <div class="md-sidebar__scrollwrap">
  78. <div class="md-sidebar__inner">
  79. <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  80. <label class="md-nav__title" for="__drawer">
  81. <a href=".." title="Jypyter Sketcher" class="md-nav__button md-logo" aria-label="Jypyter Sketcher">
  82. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 003-3 3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54z"/></svg>
  83. </a>
  84. Jypyter Sketcher
  85. </label>
  86. <ul class="md-nav__list" data-md-scrollfix>
  87. <li class="md-nav__item">
  88. <a href=".." title="Home" class="md-nav__link">
  89. Home
  90. </a>
  91. </li>
  92. <li class="md-nav__item">
  93. <a href="../about/" title="About" class="md-nav__link">
  94. About
  95. </a>
  96. </li>
  97. <li class="md-nav__item">
  98. <a href="../presentation/" title="Presentation" class="md-nav__link">
  99. Presentation
  100. </a>
  101. </li>
  102. <li class="md-nav__item">
  103. <a href="../learningbyexample/" title="Learning by Example" class="md-nav__link">
  104. Learning by Example
  105. </a>
  106. </li>
  107. <li class="md-nav__item md-nav__item--active">
  108. <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
  109. <label class="md-nav__link md-nav__link--active" for="__toc">
  110. Shapes Reference
  111. <span class="md-nav__icon md-icon">
  112. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>
  113. </span>
  114. </label>
  115. <a href="./" title="Shapes Reference" class="md-nav__link md-nav__link--active">
  116. Shapes Reference
  117. </a>
  118. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  119. <label class="md-nav__title" for="__toc">
  120. <span class="md-nav__icon md-icon">
  121. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
  122. </span>
  123. Table of contents
  124. </label>
  125. <ul class="md-nav__list" data-md-scrollfix>
  126. <li class="md-nav__item">
  127. <a href="#list-of-shapes" class="md-nav__link">
  128. List of Shapes
  129. </a>
  130. </li>
  131. <li class="md-nav__item">
  132. <a href="#line" class="md-nav__link">
  133. Line
  134. </a>
  135. <nav class="md-nav" aria-label="Line">
  136. <ul class="md-nav__list">
  137. <li class="md-nav__item">
  138. <a href="#yaml" class="md-nav__link">
  139. Yaml
  140. </a>
  141. </li>
  142. <li class="md-nav__item">
  143. <a href="#python" class="md-nav__link">
  144. Python
  145. </a>
  146. </li>
  147. </ul>
  148. </nav>
  149. </li>
  150. <li class="md-nav__item">
  151. <a href="#rectangle" class="md-nav__link">
  152. Rectangle
  153. </a>
  154. <nav class="md-nav" aria-label="Rectangle">
  155. <ul class="md-nav__list">
  156. <li class="md-nav__item">
  157. <a href="#yaml_1" class="md-nav__link">
  158. Yaml
  159. </a>
  160. </li>
  161. <li class="md-nav__item">
  162. <a href="#python_1" class="md-nav__link">
  163. Python
  164. </a>
  165. </li>
  166. </ul>
  167. </nav>
  168. </li>
  169. <li class="md-nav__item">
  170. <a href="#circle" class="md-nav__link">
  171. Circle
  172. </a>
  173. <nav class="md-nav" aria-label="Circle">
  174. <ul class="md-nav__list">
  175. <li class="md-nav__item">
  176. <a href="#yaml_2" class="md-nav__link">
  177. Yaml
  178. </a>
  179. </li>
  180. <li class="md-nav__item">
  181. <a href="#python_2" class="md-nav__link">
  182. Python
  183. </a>
  184. </li>
  185. </ul>
  186. </nav>
  187. </li>
  188. <li class="md-nav__item">
  189. <a href="#triangle" class="md-nav__link">
  190. Triangle
  191. </a>
  192. <nav class="md-nav" aria-label="Triangle">
  193. <ul class="md-nav__list">
  194. <li class="md-nav__item">
  195. <a href="#yaml_3" class="md-nav__link">
  196. Yaml
  197. </a>
  198. </li>
  199. <li class="md-nav__item">
  200. <a href="#python_3" class="md-nav__link">
  201. Python
  202. </a>
  203. </li>
  204. </ul>
  205. </nav>
  206. </li>
  207. <li class="md-nav__item">
  208. <a href="#distance-with-text" class="md-nav__link">
  209. Distance with text
  210. </a>
  211. <nav class="md-nav" aria-label="Distance with text">
  212. <ul class="md-nav__list">
  213. <li class="md-nav__item">
  214. <a href="#yaml_4" class="md-nav__link">
  215. Yaml
  216. </a>
  217. </li>
  218. <li class="md-nav__item">
  219. <a href="#python_4" class="md-nav__link">
  220. Python
  221. </a>
  222. </li>
  223. </ul>
  224. </nav>
  225. </li>
  226. <li class="md-nav__item">
  227. <a href="#text" class="md-nav__link">
  228. Text
  229. </a>
  230. <nav class="md-nav" aria-label="Text">
  231. <ul class="md-nav__list">
  232. <li class="md-nav__item">
  233. <a href="#yaml_5" class="md-nav__link">
  234. Yaml
  235. </a>
  236. </li>
  237. <li class="md-nav__item">
  238. <a href="#python_5" class="md-nav__link">
  239. Python
  240. </a>
  241. </li>
  242. </ul>
  243. </nav>
  244. </li>
  245. <li class="md-nav__item">
  246. <a href="#cross" class="md-nav__link">
  247. Cross
  248. </a>
  249. <nav class="md-nav" aria-label="Cross">
  250. <ul class="md-nav__list">
  251. <li class="md-nav__item">
  252. <a href="#yaml_6" class="md-nav__link">
  253. Yaml
  254. </a>
  255. </li>
  256. <li class="md-nav__item">
  257. <a href="#python_6" class="md-nav__link">
  258. Python
  259. </a>
  260. </li>
  261. </ul>
  262. </nav>
  263. </li>
  264. <li class="md-nav__item">
  265. <a href="#axis" class="md-nav__link">
  266. Axis
  267. </a>
  268. <nav class="md-nav" aria-label="Axis">
  269. <ul class="md-nav__list">
  270. <li class="md-nav__item">
  271. <a href="#yaml_7" class="md-nav__link">
  272. Yaml
  273. </a>
  274. </li>
  275. <li class="md-nav__item">
  276. <a href="#python_7" class="md-nav__link">
  277. Python
  278. </a>
  279. </li>
  280. </ul>
  281. </nav>
  282. </li>
  283. <li class="md-nav__item">
  284. <a href="#arc" class="md-nav__link">
  285. Arc
  286. </a>
  287. <nav class="md-nav" aria-label="Arc">
  288. <ul class="md-nav__list">
  289. <li class="md-nav__item">
  290. <a href="#yaml_8" class="md-nav__link">
  291. Yaml
  292. </a>
  293. </li>
  294. <li class="md-nav__item">
  295. <a href="#python_8" class="md-nav__link">
  296. Python
  297. </a>
  298. </li>
  299. </ul>
  300. </nav>
  301. </li>
  302. <li class="md-nav__item">
  303. <a href="#arc_wtext" class="md-nav__link">
  304. Arc_wText
  305. </a>
  306. <nav class="md-nav" aria-label="Arc_wText">
  307. <ul class="md-nav__list">
  308. <li class="md-nav__item">
  309. <a href="#yaml_9" class="md-nav__link">
  310. Yaml
  311. </a>
  312. </li>
  313. <li class="md-nav__item">
  314. <a href="#python_9" class="md-nav__link">
  315. Python
  316. </a>
  317. </li>
  318. </ul>
  319. </nav>
  320. </li>
  321. <li class="md-nav__item">
  322. <a href="#arrow1" class="md-nav__link">
  323. Arrow1
  324. </a>
  325. <nav class="md-nav" aria-label="Arrow1">
  326. <ul class="md-nav__list">
  327. <li class="md-nav__item">
  328. <a href="#yaml_10" class="md-nav__link">
  329. Yaml
  330. </a>
  331. </li>
  332. <li class="md-nav__item">
  333. <a href="#python_10" class="md-nav__link">
  334. Python
  335. </a>
  336. </li>
  337. </ul>
  338. </nav>
  339. </li>
  340. <li class="md-nav__item">
  341. <a href="#force" class="md-nav__link">
  342. Force
  343. </a>
  344. <nav class="md-nav" aria-label="Force">
  345. <ul class="md-nav__list">
  346. <li class="md-nav__item">
  347. <a href="#yaml_11" class="md-nav__link">
  348. Yaml
  349. </a>
  350. </li>
  351. <li class="md-nav__item">
  352. <a href="#python_11" class="md-nav__link">
  353. Python
  354. </a>
  355. </li>
  356. </ul>
  357. </nav>
  358. </li>
  359. <li class="md-nav__item">
  360. <a href="#wall" class="md-nav__link">
  361. Wall
  362. </a>
  363. <nav class="md-nav" aria-label="Wall">
  364. <ul class="md-nav__list">
  365. <li class="md-nav__item">
  366. <a href="#yaml_12" class="md-nav__link">
  367. Yaml
  368. </a>
  369. </li>
  370. <li class="md-nav__item">
  371. <a href="#python_12" class="md-nav__link">
  372. Python
  373. </a>
  374. </li>
  375. </ul>
  376. </nav>
  377. </li>
  378. <li class="md-nav__item">
  379. <a href="#code-to-display-the-above-defined-shapes" class="md-nav__link">
  380. Code to display the above defined shapes
  381. </a>
  382. <nav class="md-nav" aria-label="Code to display the above defined shapes">
  383. <ul class="md-nav__list">
  384. <li class="md-nav__item">
  385. <a href="#yaml_13" class="md-nav__link">
  386. Yaml
  387. </a>
  388. </li>
  389. <li class="md-nav__item">
  390. <a href="#python_13" class="md-nav__link">
  391. Python
  392. </a>
  393. </li>
  394. </ul>
  395. </nav>
  396. </li>
  397. </ul>
  398. </nav>
  399. </li>
  400. </ul>
  401. </nav>
  402. </div>
  403. </div>
  404. </div>
  405. <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
  406. <div class="md-sidebar__scrollwrap">
  407. <div class="md-sidebar__inner">
  408. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  409. <label class="md-nav__title" for="__toc">
  410. <span class="md-nav__icon md-icon">
  411. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
  412. </span>
  413. Table of contents
  414. </label>
  415. <ul class="md-nav__list" data-md-scrollfix>
  416. <li class="md-nav__item">
  417. <a href="#list-of-shapes" class="md-nav__link">
  418. List of Shapes
  419. </a>
  420. </li>
  421. <li class="md-nav__item">
  422. <a href="#line" class="md-nav__link">
  423. Line
  424. </a>
  425. <nav class="md-nav" aria-label="Line">
  426. <ul class="md-nav__list">
  427. <li class="md-nav__item">
  428. <a href="#yaml" class="md-nav__link">
  429. Yaml
  430. </a>
  431. </li>
  432. <li class="md-nav__item">
  433. <a href="#python" class="md-nav__link">
  434. Python
  435. </a>
  436. </li>
  437. </ul>
  438. </nav>
  439. </li>
  440. <li class="md-nav__item">
  441. <a href="#rectangle" class="md-nav__link">
  442. Rectangle
  443. </a>
  444. <nav class="md-nav" aria-label="Rectangle">
  445. <ul class="md-nav__list">
  446. <li class="md-nav__item">
  447. <a href="#yaml_1" class="md-nav__link">
  448. Yaml
  449. </a>
  450. </li>
  451. <li class="md-nav__item">
  452. <a href="#python_1" class="md-nav__link">
  453. Python
  454. </a>
  455. </li>
  456. </ul>
  457. </nav>
  458. </li>
  459. <li class="md-nav__item">
  460. <a href="#circle" class="md-nav__link">
  461. Circle
  462. </a>
  463. <nav class="md-nav" aria-label="Circle">
  464. <ul class="md-nav__list">
  465. <li class="md-nav__item">
  466. <a href="#yaml_2" class="md-nav__link">
  467. Yaml
  468. </a>
  469. </li>
  470. <li class="md-nav__item">
  471. <a href="#python_2" class="md-nav__link">
  472. Python
  473. </a>
  474. </li>
  475. </ul>
  476. </nav>
  477. </li>
  478. <li class="md-nav__item">
  479. <a href="#triangle" class="md-nav__link">
  480. Triangle
  481. </a>
  482. <nav class="md-nav" aria-label="Triangle">
  483. <ul class="md-nav__list">
  484. <li class="md-nav__item">
  485. <a href="#yaml_3" class="md-nav__link">
  486. Yaml
  487. </a>
  488. </li>
  489. <li class="md-nav__item">
  490. <a href="#python_3" class="md-nav__link">
  491. Python
  492. </a>
  493. </li>
  494. </ul>
  495. </nav>
  496. </li>
  497. <li class="md-nav__item">
  498. <a href="#distance-with-text" class="md-nav__link">
  499. Distance with text
  500. </a>
  501. <nav class="md-nav" aria-label="Distance with text">
  502. <ul class="md-nav__list">
  503. <li class="md-nav__item">
  504. <a href="#yaml_4" class="md-nav__link">
  505. Yaml
  506. </a>
  507. </li>
  508. <li class="md-nav__item">
  509. <a href="#python_4" class="md-nav__link">
  510. Python
  511. </a>
  512. </li>
  513. </ul>
  514. </nav>
  515. </li>
  516. <li class="md-nav__item">
  517. <a href="#text" class="md-nav__link">
  518. Text
  519. </a>
  520. <nav class="md-nav" aria-label="Text">
  521. <ul class="md-nav__list">
  522. <li class="md-nav__item">
  523. <a href="#yaml_5" class="md-nav__link">
  524. Yaml
  525. </a>
  526. </li>
  527. <li class="md-nav__item">
  528. <a href="#python_5" class="md-nav__link">
  529. Python
  530. </a>
  531. </li>
  532. </ul>
  533. </nav>
  534. </li>
  535. <li class="md-nav__item">
  536. <a href="#cross" class="md-nav__link">
  537. Cross
  538. </a>
  539. <nav class="md-nav" aria-label="Cross">
  540. <ul class="md-nav__list">
  541. <li class="md-nav__item">
  542. <a href="#yaml_6" class="md-nav__link">
  543. Yaml
  544. </a>
  545. </li>
  546. <li class="md-nav__item">
  547. <a href="#python_6" class="md-nav__link">
  548. Python
  549. </a>
  550. </li>
  551. </ul>
  552. </nav>
  553. </li>
  554. <li class="md-nav__item">
  555. <a href="#axis" class="md-nav__link">
  556. Axis
  557. </a>
  558. <nav class="md-nav" aria-label="Axis">
  559. <ul class="md-nav__list">
  560. <li class="md-nav__item">
  561. <a href="#yaml_7" class="md-nav__link">
  562. Yaml
  563. </a>
  564. </li>
  565. <li class="md-nav__item">
  566. <a href="#python_7" class="md-nav__link">
  567. Python
  568. </a>
  569. </li>
  570. </ul>
  571. </nav>
  572. </li>
  573. <li class="md-nav__item">
  574. <a href="#arc" class="md-nav__link">
  575. Arc
  576. </a>
  577. <nav class="md-nav" aria-label="Arc">
  578. <ul class="md-nav__list">
  579. <li class="md-nav__item">
  580. <a href="#yaml_8" class="md-nav__link">
  581. Yaml
  582. </a>
  583. </li>
  584. <li class="md-nav__item">
  585. <a href="#python_8" class="md-nav__link">
  586. Python
  587. </a>
  588. </li>
  589. </ul>
  590. </nav>
  591. </li>
  592. <li class="md-nav__item">
  593. <a href="#arc_wtext" class="md-nav__link">
  594. Arc_wText
  595. </a>
  596. <nav class="md-nav" aria-label="Arc_wText">
  597. <ul class="md-nav__list">
  598. <li class="md-nav__item">
  599. <a href="#yaml_9" class="md-nav__link">
  600. Yaml
  601. </a>
  602. </li>
  603. <li class="md-nav__item">
  604. <a href="#python_9" class="md-nav__link">
  605. Python
  606. </a>
  607. </li>
  608. </ul>
  609. </nav>
  610. </li>
  611. <li class="md-nav__item">
  612. <a href="#arrow1" class="md-nav__link">
  613. Arrow1
  614. </a>
  615. <nav class="md-nav" aria-label="Arrow1">
  616. <ul class="md-nav__list">
  617. <li class="md-nav__item">
  618. <a href="#yaml_10" class="md-nav__link">
  619. Yaml
  620. </a>
  621. </li>
  622. <li class="md-nav__item">
  623. <a href="#python_10" class="md-nav__link">
  624. Python
  625. </a>
  626. </li>
  627. </ul>
  628. </nav>
  629. </li>
  630. <li class="md-nav__item">
  631. <a href="#force" class="md-nav__link">
  632. Force
  633. </a>
  634. <nav class="md-nav" aria-label="Force">
  635. <ul class="md-nav__list">
  636. <li class="md-nav__item">
  637. <a href="#yaml_11" class="md-nav__link">
  638. Yaml
  639. </a>
  640. </li>
  641. <li class="md-nav__item">
  642. <a href="#python_11" class="md-nav__link">
  643. Python
  644. </a>
  645. </li>
  646. </ul>
  647. </nav>
  648. </li>
  649. <li class="md-nav__item">
  650. <a href="#wall" class="md-nav__link">
  651. Wall
  652. </a>
  653. <nav class="md-nav" aria-label="Wall">
  654. <ul class="md-nav__list">
  655. <li class="md-nav__item">
  656. <a href="#yaml_12" class="md-nav__link">
  657. Yaml
  658. </a>
  659. </li>
  660. <li class="md-nav__item">
  661. <a href="#python_12" class="md-nav__link">
  662. Python
  663. </a>
  664. </li>
  665. </ul>
  666. </nav>
  667. </li>
  668. <li class="md-nav__item">
  669. <a href="#code-to-display-the-above-defined-shapes" class="md-nav__link">
  670. Code to display the above defined shapes
  671. </a>
  672. <nav class="md-nav" aria-label="Code to display the above defined shapes">
  673. <ul class="md-nav__list">
  674. <li class="md-nav__item">
  675. <a href="#yaml_13" class="md-nav__link">
  676. Yaml
  677. </a>
  678. </li>
  679. <li class="md-nav__item">
  680. <a href="#python_13" class="md-nav__link">
  681. Python
  682. </a>
  683. </li>
  684. </ul>
  685. </nav>
  686. </li>
  687. </ul>
  688. </nav>
  689. </div>
  690. </div>
  691. </div>
  692. <div class="md-content">
  693. <article class="md-content__inner md-typeset">
  694. <h1>Shapes Reference</h1>
  695. <h2 id="list-of-shapes">List of Shapes</h2>
  696. <p><a href="#code-to-display-the-above-defined-shapes">Code to display shapes</a></p>
  697. <ul>
  698. <li><a href="#line">Line</a>: defines a line providing start and end point</li>
  699. <li><a href="#rectangle">Rectangle</a>: defines a rectangle providing bottom left corner, x dimension, y dimension</li>
  700. <li><a href="#triangle">Triangle</a>: defines a triangle providing three corner</li>
  701. <li><a href="#circle">Circle</a>: defines a circle proving center and radius</li>
  702. <li><a href="#distance-with-text">Distance with text</a>: defines a sizing mark with a label </li>
  703. <li><a href="#text">Text</a>: defines a given text positionned at the provided point</li>
  704. <li><a href="#cross">Cross</a>: defines a cross positionned at the provided point</li>
  705. <li><a href="#axis">Axis</a>: defines an axis at the given point with a given label</li>
  706. <li><a href="#arc">Arc</a>: defines an Arc providing a center point, a radius, a starting angle and an angle (rotates clock-wise)</li>
  707. <li><a href="#arc_wtext">Arc_wText</a>: defines an arc with text positionned left (moving clock-wise) of arc half-way</li>
  708. <li><a href="#arrow1">Arrow1</a>: defines a line with arrow(s) given starting and ending point and arrow termination(s) -&gt;, \&lt;-&gt;, \&lt;-</li>
  709. <li><a href="#force">Force</a>: defines an Indication of a force by an arrow and a text (symbol)</li>
  710. <li><a href="#wall">Wall</a>: defines an hached box given starting, ending point and thickness, filled with a pattern</li>
  711. <li><a href="#"></a></li>
  712. </ul>
  713. <h2 id="line">Line</h2>
  714. <p><a href="#list-of-shapes">home</a> Defines a line providing start and end point</p>
  715. <h3 id="yaml">Yaml</h3>
  716. <pre><code class="yaml">name: line
  717. shapes:
  718. A: point(-5,-5)
  719. B: point(5,5)
  720. line: Line(A,B)
  721. </code></pre>
  722. <h3 id="python">Python</h3>
  723. <pre><code class="python">A = point(-5,-5)
  724. B = point(5,5)
  725. line = Line(A,B)
  726. line.set_name(&quot;line&quot;)
  727. </code></pre>
  728. <p><img alt="line" src="../reference/line.svg" /></p>
  729. <h2 id="rectangle">Rectangle</h2>
  730. <p><a href="#list-of-shapes">home</a> Defines a rectangle providing bottom left corner, x dimension, y dimension</p>
  731. <h3 id="yaml_1">Yaml</h3>
  732. <pre><code class="yaml">name: rectangle
  733. shapes:
  734. L: 8
  735. h: 5
  736. p: point(-(L/2),-(h/2))
  737. rectangle: Rectangle(p,L,h)
  738. </code></pre>
  739. <h3 id="python_1">Python</h3>
  740. <pre><code class="python">L = 8
  741. h = 5
  742. p = point(-(L/2),-(h/2))
  743. rectangle = Rectangle(p,L,h)
  744. rectangle.set_name(&quot;rectangle&quot;)
  745. </code></pre>
  746. <p><img alt="rectangle" src="../reference/rectangle.svg" /></p>
  747. <h2 id="circle">Circle</h2>
  748. <p><a href="#list-of-shapes">home</a> Defines a circle proving center and radius</p>
  749. <h3 id="yaml_2">Yaml</h3>
  750. <pre><code class="yaml">name: circle
  751. shapes:
  752. circle: Circle(point(0,0),5)
  753. </code></pre>
  754. <h3 id="python_2">Python</h3>
  755. <pre><code class="python">circle = Circle(point(0,0),5)
  756. circle.set_name(&quot;circle&quot;)
  757. </code></pre>
  758. <p><img alt="circle" src="../reference/circle.svg" /></p>
  759. <h2 id="triangle">Triangle</h2>
  760. <p><a href="#list-of-shapes">home</a> Defines a triangle providing three corner</p>
  761. <h3 id="yaml_3">Yaml</h3>
  762. <pre><code class="yaml">name: triangle
  763. shapes:
  764. L: 3.0
  765. W: 4.0
  766. triangle: Triangle(p1=(W/2,0), p2=(3*W/2,W/2), p3=(4*W/5.,L))
  767. </code></pre>
  768. <h3 id="python_3">Python</h3>
  769. <pre><code class="python">L = 3.0
  770. W = 4.0
  771. triangle = Triangle(p1=(W/2,0), p2=(3*W/2,W/2), p3=(4*W/5.,L))
  772. triangle.set_name(&quot;triangle&quot;)
  773. </code></pre>
  774. <p><img alt="triangle" src="../reference/triangle.svg" /></p>
  775. <h2 id="distance-with-text">Distance with text</h2>
  776. <p><a href="#list-of-shapes">home</a> Defines a sizing mark with a label </p>
  777. <h3 id="yaml_4">Yaml</h3>
  778. <pre><code class="yaml">name: dwt
  779. shapes:
  780. fontsize: 14
  781. t: r'$ 2\pi R^2 $' # sample text
  782. dwt: Distance_wText((-4,0), (8, 5), t, fontsize)
  783. </code></pre>
  784. <h3 id="python_4">Python</h3>
  785. <pre><code class="python">fontsize=14
  786. t = r'$ 2\pi R^2 $' # sample text
  787. dwt = Distance_wText((-4,0), (8, 5), t, fontsize)
  788. dwt.set_name(&quot;dwt&quot;)
  789. </code></pre>
  790. <p><img alt="Distance with text" src="../reference/distancewithtext.svg" /></p>
  791. <h2 id="text">Text</h2>
  792. <p><a href="#list-of-shapes">home</a> Defines a given text positionned at the provided point</p>
  793. <h3 id="yaml_5">Yaml</h3>
  794. <pre><code class="yaml">name: text
  795. shapes:
  796. text: Text(r'$c$', point(0,0))
  797. </code></pre>
  798. <h3 id="python_5">Python</h3>
  799. <pre><code class="python">text = Text(r'$c$', point(0,0))
  800. text.set_name(&quot;text&quot;)
  801. </code></pre>
  802. <p><img alt="Text" src="../reference/text.svg" /></p>
  803. <h2 id="cross">Cross</h2>
  804. <p><a href="#list-of-shapes">home</a> Defines a cross positionned at the provided point</p>
  805. <h3 id="yaml_6">Yaml</h3>
  806. <pre><code class="yaml">name: cross
  807. shapes:
  808. cross: Cross(point(0,0))
  809. </code></pre>
  810. <h3 id="python_6">Python</h3>
  811. <pre><code class="python">cross = Cross(point(1,0))
  812. cross.set_name(&quot;cross&quot;)
  813. </code></pre>
  814. <p><img alt="Cross" src="../reference/cross.svg" /></p>
  815. <h2 id="axis">Axis</h2>
  816. <p><a href="#list-of-shapes">home</a> Defines an axis at the given point with a given label</p>
  817. <h3 id="yaml_7">Yaml</h3>
  818. <pre><code class="yaml">name: axis
  819. shapes:
  820. axis: Axis((0,0), 5, 'x', rotation_angle=0)
  821. </code></pre>
  822. <h3 id="python_7">Python</h3>
  823. <pre><code class="python">axis = Axis((0,0), 5, 'x', rotation_angle=0)
  824. axis.set_name(&quot;axis&quot;)
  825. </code></pre>
  826. <p><img alt="Axis" src="../reference/axis.svg" /></p>
  827. <h2 id="arc">Arc</h2>
  828. <p><a href="#list-of-shapes">home</a> Defines an Arc providing a center point, a radius, a starting angle and an angle (rotates clock-wise)</p>
  829. <h3 id="yaml_8">Yaml</h3>
  830. <pre><code class="yaml">name: arc
  831. shapes:
  832. center: point(0,0)
  833. radius: 1
  834. angle: 120
  835. start_angle: 180-angle
  836. arc_angle: angle
  837. arc: Arc(center, radius, start_angle, arc_angle)
  838. </code></pre>
  839. <h3 id="python_8">Python</h3>
  840. <pre><code class="python">center = point(0,0)
  841. radius = 1
  842. angle = 120
  843. start_angle = 180-angle
  844. arc_angle = angle
  845. arc = Arc(center, radius, start_angle, arc_angle)
  846. arc.set_name(&quot;arc&quot;)
  847. </code></pre>
  848. <p><img alt="Arc" src="../reference/arc.svg" /></p>
  849. <h2 id="arc_wtext">Arc_wText</h2>
  850. <p><a href="#list-of-shapes">home</a> Defines an arc with text positionned left (moving clock-wise) of arc half-way</p>
  851. <h3 id="yaml_9">Yaml</h3>
  852. <pre><code class="yaml">name: arc_wtxt
  853. shapes:
  854. center: point(0,0)
  855. radius: 1
  856. angle: 120
  857. start_angle: 180-angle
  858. arc_angle: angle
  859. arc_wtxt: &quot;Arc_wText(r'$&lt;bslash&gt;theta$', center, radius, start_angle, arc_angle)&quot;
  860. </code></pre>
  861. <h3 id="python_9">Python</h3>
  862. <pre><code class="python">center = point(0,0)
  863. radius = 1
  864. angle = 120
  865. start_angle = 180-angle
  866. arc_angle = angle
  867. arc_wtxt = Arc_wText(r'$\theta$', center, radius, start_angle, arc_angle)
  868. arc_wtxt.set_name(&quot;arcwtxt&quot;)
  869. </code></pre>
  870. <p><img alt="Arc with Text" src="../reference/arcwtext.svg" /></p>
  871. <h2 id="arrow1">Arrow1</h2>
  872. <p><a href="#list-of-shapes">home</a> defines a line with arrow(s) given starting and ending point and arrow termination(s) -&gt;, \&lt;-&gt;, \&lt;-</p>
  873. <h3 id="yaml_10">Yaml</h3>
  874. <pre><code class="yaml">name: arrow1
  875. shapes:
  876. start: point(0,0)
  877. end: point(5,5)
  878. arrow1: Arrow1(start, end, style='&lt;-&gt;')
  879. </code></pre>
  880. <h3 id="python_10">Python</h3>
  881. <pre><code class="python">start = point(0,0)
  882. end = point(5,5)
  883. arrow1 = Arrow1(start, end, style='&lt;-&gt;')
  884. arrow1.set_name(&quot;arrow1&quot;)
  885. </code></pre>
  886. <p><img alt="Arrow1" src="../reference/arrow1.svg" /></p>
  887. <h2 id="force">Force</h2>
  888. <p><a href="#list-of-shapes">home</a> defines an Indication of a force by an arrow and a text (symbol)</p>
  889. <h3 id="yaml_11">Yaml</h3>
  890. <pre><code class="yaml">name: force
  891. shapes:
  892. x: 0
  893. y: 0
  894. contact: point(x, y)
  895. vector: point(-3,-5)
  896. force: Force(contact - vector, contact, r'$Force$', text_pos='start')
  897. </code></pre>
  898. <h3 id="python_11">Python</h3>
  899. <pre><code class="python">x = 0
  900. y = 0
  901. contact = point(x, y)
  902. vector = point(-3,-5)
  903. force = Force(contact - vector, contact, r'$Force$', text_pos='start')
  904. force.set_name(&quot;force&quot;)
  905. </code></pre>
  906. <p><img alt="Force" src="../reference/force.svg" /></p>
  907. <h2 id="wall">Wall</h2>
  908. <p><a href="#list-of-shapes">home</a> defines an hached box given starting, ending point and thickness, filled with a pattern</p>
  909. <h3 id="yaml_12">Yaml</h3>
  910. <pre><code class="yaml">name: wall
  911. shapes:
  912. theta: 30
  913. L: 8
  914. B: point(L-4,-2) # wall right end
  915. A: point(-4,tan(radians(theta))*L-2) # wall left end
  916. wall:
  917. formula: Wall(x=[A[0], B[0]], y=[A[1], B[1]], thickness=-0.5,transparent=False)
  918. style:
  919. linecolor: black
  920. </code></pre>
  921. <h3 id="python_12">Python</h3>
  922. <pre><code class="python">theta = 30
  923. L = 8
  924. B = point(L-4,-2) # wall right end
  925. A = point(-4,tan(radians(theta))*L-2) # wall left end
  926. wall= Wall(x=[A[0], B[0]], y=[A[1], B[1]], thickness=-0.5,transparent=False)
  927. wall.set_linecolor('black')
  928. wall.set_name(&quot;wall&quot;)
  929. </code></pre>
  930. <p><img alt="Wall" src="../reference/wall.svg" /></p>
  931. <h2 id="code-to-display-the-above-defined-shapes">Code to display the above defined shapes</h2>
  932. <p><a href="#list-of-shapes">home</a> In order to display the various shapes, use the following code in a jupyter notebook</p>
  933. <pre><code class="python">[1]: %matplotlib widget
  934. [2]: from pysketcher import *
  935. [3]: from math import tan, radians, sin, cos # needed for python code
  936. [4]: drawing_tool.set_coordinate_system(xmin=-10, xmax=10,ymin=-10, ymax=10,axis=True)
  937. [5]: drawing_tool.mpl.gcf().canvas
  938. </code></pre>
  939. <p>for Yaml, you need to add those extra steps</p>
  940. <pre><code class="python">head = &quot;&quot;&quot;\
  941. libraries: [&quot;from math import tan, radians, sin, cos&quot;,&quot;from pysketcher import *&quot;]
  942. myfig={}
  943. sketchParse(head,myfig)
  944. </code></pre>
  945. <p>The above code initialize myfig sketch space loading into it libraries references so samples can use tan, radians, si, cos and all the objects defined in pysketcher (the module name of jupytersketcher): this is used by the yaml definition of shapes</p>
  946. <h3 id="yaml_13">Yaml</h3>
  947. <pre><code class="python">myfig={}
  948. sketch=&quot;&quot;&quot;
  949. # put here the yaml 'object' definition
  950. &quot;&quot;&quot;
  951. drawing_tool.erase()
  952. sketchParse(sketch,myfig)
  953. # replace 'object' by the actual one
  954. d = myfig['object'].draw()
  955. drawing_tool.display()
  956. </code></pre>
  957. <h3 id="python_13">Python</h3>
  958. <pre><code class="python">drawing_tool.erase()
  959. # put the code of the object case here
  960. # replace object by the actual name line, rectangle, circle...
  961. object.draw()
  962. drawing_tool.display()
  963. </code></pre>
  964. </article>
  965. </div>
  966. </div>
  967. </main>
  968. <footer class="md-footer">
  969. <div class="md-footer-nav">
  970. <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
  971. <a href="../learningbyexample/" title="Learning by Example" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
  972. <div class="md-footer-nav__button md-icon">
  973. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
  974. </div>
  975. <div class="md-footer-nav__title">
  976. <div class="md-ellipsis">
  977. <span class="md-footer-nav__direction">
  978. Previous
  979. </span>
  980. Learning by Example
  981. </div>
  982. </div>
  983. </a>
  984. </nav>
  985. </div>
  986. <div class="md-footer-meta md-typeset">
  987. <div class="md-footer-meta__inner md-grid">
  988. <div class="md-footer-copyright">
  989. Made with
  990. <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
  991. Material for MkDocs
  992. </a>
  993. </div>
  994. </div>
  995. </div>
  996. </footer>
  997. </div>
  998. <script src="../assets/javascripts/vendor.d710d30a.min.js"></script>
  999. <script src="../assets/javascripts/bundle.b39636ac.min.js"></script><script id="__lang" type="application/json">{"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents"}</script>
  1000. <script>
  1001. app = initialize({
  1002. base: "..",
  1003. features: [],
  1004. search: Object.assign({
  1005. worker: "../assets/javascripts/worker/search.a68abb33.min.js"
  1006. }, typeof search !== "undefined" && search)
  1007. })
  1008. </script>
  1009. <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  1010. </body>
  1011. </html>