{"id":6798,"date":"2025-04-11T11:10:55","date_gmt":"2025-04-11T15:10:55","guid":{"rendered":"https:\/\/dkc.umw.edu\/?p=6798"},"modified":"2025-04-11T11:10:55","modified_gmt":"2025-04-11T15:10:55","slug":"05-backtracking","status":"publish","type":"post","link":"https:\/\/dkc.umw.edu\/fellows\/2025\/04\/11\/05-backtracking\/","title":{"rendered":"05 Backtracking"},"content":{"rendered":"\n<p>In my previous blog post I explained how I was changing my code to show 3d visuals, that is no longer the case. My idea for how I wanted everything to look was posing problems for how to conceptualize 3d rendering, it will be something I return to in the future.<\/p>\n\n\n\n<p>Since I have returned to 2 dimensions I have made much more progress towards shaping my visuals towards my original idea. Below are 4 iterations of the visuals, demonstrating a bit of how procedural my decision making is.<\/p>\n\n\n\n<p>I began with the basic structure, all the planets I wanted orbiting the sun, then I begin emphasizing the orbits to make the planets more clear.<\/p>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull  root-eb-row-hp6d9\"><div class=\"eb-parent-wrapper eb-parent-eb-row-hp6d9 \"><div class=\"eb-row-root-container eb-row-hp6d9\" data-id=\"eb-row-hp6d9\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"wp-block-essential-blocks-column  root-eb-column-jlh19\"><div class=\"eb-parent-wrapper eb-parent-eb-column-jlh19 \"><div class=\"eb-column-wrapper eb-column-jlh19\"><div class=\"eb-column-inner\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Planets v00\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/kZpXgk1c8qY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-essential-blocks-column  root-eb-column-nytic\"><div class=\"eb-parent-wrapper eb-parent-eb-column-nytic \"><div class=\"eb-column-wrapper eb-column-nytic\"><div class=\"eb-column-inner\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Planets v01\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/msExiyOWWRM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>After that I simply tried seeing what would happen if I filled in the arcs tracing the orbits rather than just the lines, which I do like the look of, but the planets closer to the sun get lost in the bright stack of the orbits. Finally I added the traced arcs back in and I am happy with the look,, for now.<\/p>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull  root-eb-row-axork\"><div class=\"eb-parent-wrapper eb-parent-eb-row-axork \"><div class=\"eb-row-root-container eb-row-axork\" data-id=\"eb-row-axork\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"wp-block-essential-blocks-column  root-eb-column-y5dk0\"><div class=\"eb-parent-wrapper eb-parent-eb-column-y5dk0 \"><div class=\"eb-column-wrapper eb-column-y5dk0\"><div class=\"eb-column-inner\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Planets v02\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/lpqslJhNxAE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-essential-blocks-column  root-eb-column-53ukd\"><div class=\"eb-parent-wrapper eb-parent-eb-column-53ukd \"><div class=\"eb-column-wrapper eb-column-53ukd\"><div class=\"eb-column-inner\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Planets v03\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/lw1jZety9_I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Below I have a draft of the visuals along with the music, this specific recording is a result of experimenting with the timbres of each notes, trying different virtual instruments, both sampled and synthesized. I am broadly pleased with the effect the visuals have to emphasize the music, though I am not entirely happy with either yet. I specifically need to refine the math I am using to determine the speed of Mercury, the innermost planet, around the sun, it does not seem to be lining up the way I want but that should be a simple fix.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Planets Draft 01\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/3vEBeypu_Vo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>And finally, my code, there is currently a lot of extra material that is doing nothing, I would like to implement a small explosion or expansion effect whenever a body passes the vertical threshold and a note is triggered. I am also considering adding a starfield in the background, normally these fields of light illustrate fast travel through space but I think a spiral would be a very nice effect, I could have multiple layers of stars moving at different speeds and different sizes to illustrate distance, I think this would add some nice depth. I will of course also be working more on the sound of the music.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let objects = &#091;];\nlet stars = &#091;];\nconst bpm = 90;\n\/\/ 90beats_minute \/ 60seconds_minute = 1.5beats_second\n\/\/ 60frames_second \/ 1.5beats_second = 40 frames_beat\nconst framesPerBeat = 60 \/ (bpm \/ 60);\n\n\/\/ fullscreen, !CHANGE FOR SPECIFIC EXPORT!\nvar w = window.innerWidth;\nvar h = window.innerHeight; \n\nfunction setup() {\n    createCanvas(w, h);\n    frameRate(60);\n    angleMode(RADIANS);\n\n    const min_dist = min(width, height);\n    const dist_increment = (min_dist\/15);\n    const max_dist = min_dist - ((dist_increment) \/ 2);\n    console.log(max_dist);\n\n    \/\/ \"...,you must first create the universe.\"\n    \/\/ name size color distance orbit_speed\n    objects.push(new Body('Sol',  20,  color(255),  0,  0));\n    \/\/ Create objects - Inner System\n    objects.push(new Body('Mercury',  5,  color(145),  30,  1));\n    objects.push(new Body('Venus',  7,  color(145),  42,  2.5));\n    objects.push(new Body('Eearth',  8,  color(145),  55,  4));\n    objects.push(new Body('Mars',  6,  color(145),  67,  7.75));\n    \/\/ Create Planets - Asteroid Belt\n    objects.push(new Body('4 Vesta',  2,  color(145),  130,  15));\n    objects.push(new Body('Ceres',  3,  color(145),  150,  19));\n    \/\/ Create Planets - Outer System\n    objects.push(new Body('Jupiter',  12,   color(145),  210,  47));\n    objects.push(new Body('Saturn',  11,   color(145),  230,  123));\n    objects.push(new Body('Uranus',  10,   color(145),  270,  351));\n    objects.push(new Body('Neptune',  9,   color(145),  310,  684));\n    \/\/ Create Planets - Kuiper Belt\n    objects.push(new Body('Pluto',  4,   color(145),  390,  1032.75));\n}\n\nfunction draw() {\n    \/\/ background(135, 145, 155);\n    background(17,17,23);\n\n    push();\n    stroke(255, 50);\n    \/\/ line(width\/2, 0, width\/2, height\/2);\n    pop();\n\n    objects.forEach(planet =&gt; { \/\/ Render objects\n        planet.display_orbit();\n        planet.display();\n        planet.orbit();\n    });\n    \/\/ noLoop();\n}\n\n\/\/ Sphere class to represent sol and the other objects\nclass Body {\n    constructor(name, size, col, distance = 0, orbitSpeed = 0) {\n        this.name = name;\n        this.size = size; \/\/ diameter\n        this.col = col; \/\/ color\n        this.distance = distance; \/\/ Orbit diameter\n        this.orbitSpeed = TWO_PI\/(orbitSpeed * framesPerBeat); \/\/ degrees of rotation each frame\n        this.angle = TWO_PI - HALF_PI; \/\/ cumulative angle change\n        this.angle = random(TWO_PI); \/\/TODO TESTING\n        \/\/ this.explosion = new Explosion();\n    }\n\n    orbit() {\n        if (this.distance &gt; 0)\n            this.angle += this.orbitSpeed;\n    }\n\n    display_orbit() {\n        push();\n        translate(width\/2, height\/2); \/\/ center screen\n        \/\/ noFill();\n        fill(255, 15); \/\/TODO TESTING\n        stroke(255, 75);\n        \/\/ noStroke(); \/\/TODO TESTINGx\n        \/* draw arc from 0 to position in orbit *\/\n        arc(0, 0, this.distance * 2, this.distance * 2, TWO_PI - HALF_PI, this.angle);\n\n        pop();\n    }\n\n    display() {\n        push();\n        translate(width\/2, height\/2); \/\/ center screen\n        rotate(this.angle); \/\/ apply orbit\n        translate(this.distance, 0, 0); \/\/ distance from sol\n\n        noStroke();\n        fill(this.col);\n        circle(0, 0, this.size);\n        pop();\n    }\n}\n\nclass Star {\n    constructor(xpos, ypos, xvel, yvel, size, col) {\n        this.xpos = xpos;\n        this.ypos = ypos;\n        this.xvel = xvel;\n        this.yvel = yvel;\n        this.size = size;\n        this.col = col;\n    }\n\n    move() {\n        this.xpos = xpos + this.xvel;\n        this.ypos = ypos + this.yvel;\n    }\n\n    display() {\n        fill(this.col);\n        circle(this.xpos, this.ypos, this.size);\n    }\n\n}\n\nclass Explosion{\n    constructor(maxSize, size, col, distance, xpos, ypos, angle, speed) {\n        this.maxSize = maxSize;\n        this.size = size;\n        this.col = col;\n        this.distance = distance;\n        this.xpos = xpos;\n        this.ypos = ypos;\n        this.angle = angle; \/\/ TWO_PI - HALF_PI\n        this.speed = speed;\n    }\n\n    display() {\n        circle(this.xpos, this.ypos, this.size);\n    }\n\n    expand() {\n        this.size += this.maxSize\/this.speed;\n    }\n\n\n}\n\n\/* name    | Orbital Period n:Mercury | Diameter M | Distance M | Diameter Scale n:Mercury\n   Sun     | 0                        | 1          | 0          | 294.118\n   Mercury | 1                        | 0.0034     | 42         | 1\n   Venus   | 2.5                      | 0.0086     | 75         | 2.529\n   Earth   | 4                        | 0.0091     | 110        | 2.676\n   Mars    | 7.75                     | 0.0048     | 165        | 1.412\n   4 Vesta | 15                       | tiny       | 247.8      | 0.108\n   Ceres   | 19                       | tiny       | 290.85     | 0.471\n   Jupiter | 47                       | 0.1        | 560        | 29.412\n   Saturn  | 123                      | 0.084      | 1000       | 24.706\n   Uranus  | 351                      | 0.034      | 2000       | 10\n   Neptune | 684                      | 0.033      | 3000       | 9.1\n   Pluto   | 1032.75                  |            |            | 0.487 \n*\/<\/code><\/pre>\n\n\n\n<p>At the bottom of the code is a table I wrote with the data I am using and the data I hoped to use. Unfortunately the solar system is just too large to have it all in one screen, the sun ends up 1 pixel wide, Pluto isn&#8217;t even on the screen and none of the planets are visible being tens and hundreds of times smaller than the sun, making every planet, tens and hundreds of 1 pixel.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous blog post I explained how I was changing my code to show 3d visuals, that is no longer the case. My idea for how I wanted everything to look was posing problems for how to conceptualize 3d rendering, it will be something I return to in the future. Since I have returned [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6798","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/posts\/6798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/comments?post=6798"}],"version-history":[{"count":0,"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/posts\/6798\/revisions"}],"wp:attachment":[{"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/media?parent=6798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/categories?post=6798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dkc.umw.edu\/fellows\/wp-json\/wp\/v2\/tags?post=6798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}