{"id":9621,"date":"2016-01-19T06:19:43","date_gmt":"2016-01-19T14:19:43","guid":{"rendered":"http:\/\/www.seedcode.com\/?p=9621"},"modified":"2016-01-19T06:19:43","modified_gmt":"2016-01-19T14:19:43","slug":"spirograph-in-javascript","status":"publish","type":"post","link":"https:\/\/seedcode.com\/spirograph-in-javascript\/","title":{"rendered":"A Childhood Toy With JavaScript"},"content":{"rendered":"

My First Video Game<\/h2>\n

I spent some time over the holidays working on a video game\/app and am very pleased with how it came out. It’s a version of the classic Spirograph, but you can add multiple moving gears\u00a0(rotors)\u00a0to the set-up. You can also make the line weight (on most browsers) very thin, so you can create some unexpected and complex shapes. Because of the ability to add multiple rotors, it’s named\u00a0Spirograph\u207f. We’ve got it set up at SeedCode\u00a0here<\/a>, and the code is at\u00a0GitHub<\/a>.<\/p>\n

Please check it out<\/a> and let us know what you think!<\/p>\n

Spirograph\u207f In Action<\/h3>\n

\"drawing\"<\/p>\n

 <\/p>\n

Drawing By Spirograph\u207f “lily pad”<\/h3>\n

\"lilypad\"<\/p>\n

Math and Animation<\/h2>\n

The math here is actually not that tricky. There are parametric equations for\u00a0Hypotrochoids<\/a>\u00a0and\u00a0Epitrochoids<\/a>, but as I started to think of this in terms of how I would do this in JavaScript, I realized most\u00a0of this can be done by calculating a point on a circle given its center, radius and angle of the point from the center. This function basically does almost all the math and is recursively passed from circle to circle, and then finally determines the location of the pen on the last circle.<\/p>\n

function circlePoint(a, b, r, ng) {\n  \u00a0var rad = ng * (Math.PI \/ 180);\n  \u00a0var y = r * Math.sin(rad);\n  \u00a0var x = r * Math.cos(rad);\n  \u00a0x = a + x;\n  \u00a0y = b - y;\n  \u00a0return {\n  \u00a0  \u00a0\"x\": x,\n  \u00a0  \u00a0\"y\": y\n  \u00a0}\n}<\/pre>\n
The drawing and animation is done using canvas. Canvas is an HTML5 element that can be accessed with JavaScript methods for drawing shapes, lines etc.<\/p>\n
\/\/sample canvas code\nfunction drawOneCircle(canvas, a, b, r) {\n  \u00a0var ctx = canvas.getContext(\"2d\");\n  \u00a0ctx.beginPath();\n  \u00a0ctx.arc(a, b, r, 0, 2 * Math.PI);\n  \u00a0ctx.stroke();\n  \u00a0ctx.closePath()\n }<\/pre>\n
This works great on all browsers, except for Safari where the line weights can only get so thin. The animation itself is actually done by clearing the current drawing and then recreating it in the new position. This is done recursively using the requestAnimationFrame() document method, which “snaps” the current frame before proceeding. The clearing method is not very precise, and you basically need to clear the entire canvas for each frame. Since I wanted the drawing itself to survive, I ended up creating\u00a0two overlaid canvas elements with the circles being drawn on the “bottom,” and the curves being drawn on “top.” This way I could clear the canvas for the circles with each frame and leave the drawing intact.<\/p>\n
Why A Game?<\/h2>\n
It’s a great question as I certainly have a lot to do! As with many programmers, games were my first introduction to computers. I vividly remember waiting in line at the Radio Shack to take my turn at the TRS80 for a turn at \u00a0Dancing Demon<\/a>, and could not get enough.<\/p>\n
However, I think there’s a more practical reason here as well. These days, and this may be me getting older, it seems like there’s more and more I don’t know. New languages and frameworks seem to pop up daily, and by the way that they’re introduced, you can easily get fooled into the sense that everybody is learning, and benefiting from, these new technologies but you, and that you’ll soon be left behind.<\/p>\n
It is true that there is an enormous abundance\u00a0of technologies\u00a0out there, but the idea that somebody\u00a0is learning them all, and is easily bouncing from Angular to React as the wind blows, is illusion. With this in mind,\u00a0the question we should be asking ourselves\u00a0as programmers is not “Should I learn all of these new languages?” but rather “Could<\/strong><\/em>\u00a0I learn these languages?” That’s the more realistic question and why I think I finally took up this project. As long as I can keep my confidence high that I can learn new things, that sense of being left behind really\u00a0goes away.<\/p>\n","protected":false},"excerpt":{"rendered":"
My First Video Game I spent some time over the holidays working on a video game\/app and am very pleased with how it came out. It’s a version of the classic Spirograph, but you can add multiple moving gears\u00a0(rotors)\u00a0to the set-up. You can also make the line weight (on most browsers) very thin, so you can create some unexpected and complex shapes. Because of the ability to add multiple rotors, it’s named\u00a0Spirograph\u207f. We’ve got it set up at SeedCode\u00a0here, and the code is at\u00a0GitHub. Please check it out and let us know what you think! Spirograph\u207f In Action   Drawing By Spirograph\u207f “lily pad” Math and Animation The math here is actually not that tricky. There are parametric equations for\u00a0Hypotrochoids\u00a0and\u00a0Epitrochoids, but as I started to think of this in terms of how I would do this in JavaScript, I realized most\u00a0of this can be done by calculating a point on a circle given its center, radius and angle of the point from the center. This function basically does almost all the math and is recursively passed from circle to circle, and then finally determines the location of the pen on the last circle. function circlePoint(a, b, r, ng) { \u00a0var rad = ng * (Math.PI \/ 180); \u00a0var y = r * Math.sin(rad); \u00a0var x = r * Math.cos(rad); \u00a0x = a + x; \u00a0y = b – y; \u00a0return { \u00a0 \u00a0“x”: x, \u00a0 \u00a0“y”: y \u00a0} } The drawing and animation is done using canvas. Canvas is an HTML5 element that can be accessed with JavaScript methods for drawing shapes, lines etc. \/\/sample canvas code function drawOneCircle(canvas, a, b, r) { \u00a0var ctx = canvas.getContext(“2d”); \u00a0ctx.beginPath(); \u00a0ctx.arc(a, b, r, 0, 2 * Math.PI); \u00a0ctx.stroke(); \u00a0ctx.closePath() } This works great on all browsers, except for Safari where the line weights can only get so thin. The animation itself is actually done by clearing the current drawing and then recreating it in the new position. This is done recursively using the requestAnimationFrame() document method, which “snaps” the current frame before proceeding. The clearing method is not very precise, and you basically need to clear the entire canvas for each frame. Since I wanted the drawing itself to survive, I ended up creating\u00a0two overlaid canvas elements with the circles being drawn on the “bottom,” and the curves being drawn on “top.” This way I could clear the canvas for the circles with each frame and leave the drawing intact. Why A Game? It’s a great question as I certainly have a lot to do! As with many programmers, games were my first introduction to computers. I vividly remember waiting in line at the Radio Shack to take my turn at the TRS80 for a turn at \u00a0Dancing Demon, and could not get enough. However, I think there’s a more practical reason here as well. These days, and this may be me getting older, it seems like there’s more and more I don’t know. New languages and frameworks seem to pop up daily, and by the way that they’re introduced, you can easily get fooled into the sense that everybody is learning, and benefiting from, these new technologies but you, and that you’ll soon be left behind. It is true that there is an enormous abundance\u00a0of technologies\u00a0out there, but the idea that somebody\u00a0is learning them all, and is easily bouncing from Angular to React as the wind blows, is illusion. With this in mind,\u00a0the question we should be asking ourselves\u00a0as programmers is not “Should I learn all of these new languages?” but rather “Could\u00a0I learn these languages?” That’s the more realistic question and why I think I finally took up this project. As long as I can keep my confidence high that I can learn new things, that sense of being left behind really\u00a0goes away.<\/p>\n","protected":false},"author":3,"featured_media":9627,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[27,23],"class_list":["post-9621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-games","tag-javascript"],"yoast_head":"\nA Childhood Toy With JavaScript - SeedCode<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seedcode.com\/spirograph-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Childhood Toy With JavaScript - SeedCode\" \/>\n<meta property=\"og:description\" content=\"My First Video Game I spent some time over the holidays working on a video game\/app and am very pleased with how it came out. It’s a version of the classic Spirograph, but you can add multiple moving gears\u00a0(rotors)\u00a0to the set-up. You can also make the line weight (on most browsers) very thin, so you can create some unexpected and complex shapes. Because of the ability to add multiple rotors, it’s named\u00a0Spirograph\u207f. We’ve got it set up at SeedCode\u00a0here, and the code is at\u00a0GitHub. Please check it out and let us know what you think! Spirograph\u207f In Action   Drawing By Spirograph\u207f “lily pad” Math and Animation The math here is actually not that tricky. There are parametric equations for\u00a0Hypotrochoids\u00a0and\u00a0Epitrochoids, but as I started to think of this in terms of how I would do this in JavaScript, I realized most\u00a0of this can be done by calculating a point on a circle given its center, radius and angle of the point from the center. This function basically does almost all the math and is recursively passed from circle to circle, and then finally determines the location of the pen on the last circle. function circlePoint(a, b, r, ng) { \u00a0var rad = ng * (Math.PI \/ 180); \u00a0var y = r * Math.sin(rad); \u00a0var x = r * Math.cos(rad); \u00a0x = a + x; \u00a0y = b - y; \u00a0return { \u00a0 \u00a0"x": x, \u00a0 \u00a0"y": y \u00a0} } The drawing and animation is done using canvas. Canvas is an HTML5 element that can be accessed with JavaScript methods for drawing shapes, lines etc. \/\/sample canvas code function drawOneCircle(canvas, a, b, r) { \u00a0var ctx = canvas.getContext("2d"); \u00a0ctx.beginPath(); \u00a0ctx.arc(a, b, r, 0, 2 * Math.PI); \u00a0ctx.stroke(); \u00a0ctx.closePath() } This works great on all browsers, except for Safari where the line weights can only get so thin. The animation itself is actually done by clearing the current drawing and then recreating it in the new position. This is done recursively using the requestAnimationFrame() document method, which “snaps” the current frame before proceeding. The clearing method is not very precise, and you basically need to clear the entire canvas for each frame. Since I wanted the drawing itself to survive, I ended up creating\u00a0two overlaid canvas elements with the circles being drawn on the “bottom,” and the curves being drawn on “top.” This way I could clear the canvas for the circles with each frame and leave the drawing intact. Why A Game? It’s a great question as I certainly have a lot to do! As with many programmers, games were my first introduction to computers. I vividly remember waiting in line at the Radio Shack to take my turn at the TRS80 for a turn at \u00a0Dancing Demon, and could not get enough. However, I think there’s a more practical reason here as well. These days, and this may be me getting older, it seems like there’s more and more I don’t know. New languages and frameworks seem to pop up daily, and by the way that they’re introduced, you can easily get fooled into the sense that everybody is learning, and benefiting from, these new technologies but you, and that you’ll soon be left behind. It is true that there is an enormous abundance\u00a0of technologies\u00a0out there, but the idea that somebody\u00a0is learning them all, and is easily bouncing from Angular to React as the wind blows, is illusion. With this in mind,\u00a0the question we should be asking ourselves\u00a0as programmers is not “Should I learn all of these new languages?” but rather “Could\u00a0I learn these languages?” That’s the more realistic question and why I think I finally took up this project. As long as I can keep my confidence high that I can learn new things, that sense of being left behind really\u00a0goes away.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seedcode.com\/spirograph-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"SeedCode\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seedcoder\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-19T14:19:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png\" \/>\n\t<meta property=\"og:image:width\" content=\"109\" \/>\n\t<meta property=\"og:image:height\" content=\"110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jasonchryoung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dayback\" \/>\n<meta name=\"twitter:site\" content=\"@dayback\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jasonchryoung\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/\"},\"author\":{\"name\":\"jasonchryoung\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd\"},\"headline\":\"A Childhood Toy With JavaScript\",\"datePublished\":\"2016-01-19T14:19:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/\"},\"wordCount\":596,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png\",\"keywords\":[\"Games\",\"javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/seedcode.com\/spirograph-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/\",\"url\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/\",\"name\":\"A Childhood Toy With JavaScript - SeedCode\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png\",\"datePublished\":\"2016-01-19T14:19:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/seedcode.com\/spirograph-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png\",\"width\":109,\"height\":110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/seedcode.com\/spirograph-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/seedcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Childhood Toy With JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/seedcode.com\/#website\",\"url\":\"https:\/\/seedcode.com\/\",\"name\":\"SeedCode\",\"description\":\"Build the Software You've Always Wanted\",\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/seedcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/seedcode.com\/#organization\",\"name\":\"SeedCode\",\"url\":\"https:\/\/seedcode.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"width\":595,\"height\":189,\"caption\":\"SeedCode\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/seedcoder\",\"https:\/\/x.com\/dayback\",\"https:\/\/www.linkedin.com\/company\/seedcode\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd\",\"name\":\"jasonchryoung\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"jasonchryoung\"},\"url\":\"https:\/\/seedcode.com\/author\/jasonchryoung\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Childhood Toy With JavaScript - SeedCode","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/seedcode.com\/spirograph-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"A Childhood Toy With JavaScript - SeedCode","og_description":"My First Video Game I spent some time over the holidays working on a video game\/app and am very pleased with how it came out. It’s a version of the classic Spirograph, but you can add multiple moving gears\u00a0(rotors)\u00a0to the set-up. You can also make the line weight (on most browsers) very thin, so you can create some unexpected and complex shapes. Because of the ability to add multiple rotors, it’s named\u00a0Spirograph\u207f. We’ve got it set up at SeedCode\u00a0here, and the code is at\u00a0GitHub. Please check it out and let us know what you think! Spirograph\u207f In Action   Drawing By Spirograph\u207f “lily pad” Math and Animation The math here is actually not that tricky. There are parametric equations for\u00a0Hypotrochoids\u00a0and\u00a0Epitrochoids, but as I started to think of this in terms of how I would do this in JavaScript, I realized most\u00a0of this can be done by calculating a point on a circle given its center, radius and angle of the point from the center. This function basically does almost all the math and is recursively passed from circle to circle, and then finally determines the location of the pen on the last circle. function circlePoint(a, b, r, ng) { \u00a0var rad = ng * (Math.PI \/ 180); \u00a0var y = r * Math.sin(rad); \u00a0var x = r * Math.cos(rad); \u00a0x = a + x; \u00a0y = b - y; \u00a0return { \u00a0 \u00a0\"x\": x, \u00a0 \u00a0\"y\": y \u00a0} } The drawing and animation is done using canvas. Canvas is an HTML5 element that can be accessed with JavaScript methods for drawing shapes, lines etc. \/\/sample canvas code function drawOneCircle(canvas, a, b, r) { \u00a0var ctx = canvas.getContext(\"2d\"); \u00a0ctx.beginPath(); \u00a0ctx.arc(a, b, r, 0, 2 * Math.PI); \u00a0ctx.stroke(); \u00a0ctx.closePath() } This works great on all browsers, except for Safari where the line weights can only get so thin. The animation itself is actually done by clearing the current drawing and then recreating it in the new position. This is done recursively using the requestAnimationFrame() document method, which “snaps” the current frame before proceeding. The clearing method is not very precise, and you basically need to clear the entire canvas for each frame. Since I wanted the drawing itself to survive, I ended up creating\u00a0two overlaid canvas elements with the circles being drawn on the “bottom,” and the curves being drawn on “top.” This way I could clear the canvas for the circles with each frame and leave the drawing intact. Why A Game? It’s a great question as I certainly have a lot to do! As with many programmers, games were my first introduction to computers. I vividly remember waiting in line at the Radio Shack to take my turn at the TRS80 for a turn at \u00a0Dancing Demon, and could not get enough. However, I think there’s a more practical reason here as well. These days, and this may be me getting older, it seems like there’s more and more I don’t know. New languages and frameworks seem to pop up daily, and by the way that they’re introduced, you can easily get fooled into the sense that everybody is learning, and benefiting from, these new technologies but you, and that you’ll soon be left behind. It is true that there is an enormous abundance\u00a0of technologies\u00a0out there, but the idea that somebody\u00a0is learning them all, and is easily bouncing from Angular to React as the wind blows, is illusion. With this in mind,\u00a0the question we should be asking ourselves\u00a0as programmers is not “Should I learn all of these new languages?” but rather “Could\u00a0I learn these languages?” That’s the more realistic question and why I think I finally took up this project. As long as I can keep my confidence high that I can learn new things, that sense of being left behind really\u00a0goes away.","og_url":"https:\/\/seedcode.com\/spirograph-in-javascript\/","og_site_name":"SeedCode","article_publisher":"https:\/\/www.facebook.com\/seedcoder","article_published_time":"2016-01-19T14:19:43+00:00","og_image":[{"width":109,"height":110,"url":"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png","type":"image\/png"}],"author":"jasonchryoung","twitter_card":"summary_large_image","twitter_creator":"@dayback","twitter_site":"@dayback","twitter_misc":{"Written by":"jasonchryoung","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#article","isPartOf":{"@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/"},"author":{"name":"jasonchryoung","@id":"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd"},"headline":"A Childhood Toy With JavaScript","datePublished":"2016-01-19T14:19:43+00:00","mainEntityOfPage":{"@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/"},"wordCount":596,"commentCount":4,"publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"image":{"@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png","keywords":["Games","javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seedcode.com\/spirograph-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/","url":"https:\/\/seedcode.com\/spirograph-in-javascript\/","name":"A Childhood Toy With JavaScript - SeedCode","isPartOf":{"@id":"https:\/\/seedcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png","datePublished":"2016-01-19T14:19:43+00:00","breadcrumb":{"@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seedcode.com\/spirograph-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#primaryimage","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2016\/01\/spirograph.png","width":109,"height":110},{"@type":"BreadcrumbList","@id":"https:\/\/seedcode.com\/spirograph-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seedcode.com\/"},{"@type":"ListItem","position":2,"name":"A Childhood Toy With JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/seedcode.com\/#website","url":"https:\/\/seedcode.com\/","name":"SeedCode","description":"Build the Software You've Always Wanted","publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seedcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/seedcode.com\/#organization","name":"SeedCode","url":"https:\/\/seedcode.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","width":595,"height":189,"caption":"SeedCode"},"image":{"@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/seedcoder","https:\/\/x.com\/dayback","https:\/\/www.linkedin.com\/company\/seedcode\/"]},{"@type":"Person","@id":"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd","name":"jasonchryoung","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"jasonchryoung"},"url":"https:\/\/seedcode.com\/author\/jasonchryoung\/"}]}},"_links":{"self":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/9621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/comments?post=9621"}],"version-history":[{"count":0,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/9621\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media\/9627"}],"wp:attachment":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media?parent=9621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/categories?post=9621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/tags?post=9621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}