[icm wk3] a space oddity

In collaboration with: Hyun & Yihan

When given the assignment of making “a rollover, a button, or a slider” to control an algorithmic design, my first instinct was a control booth in theatre, a space I miss dearly during this pandemic. After discussing with one of my group members, Hyun (fortunately, the two of us were able to meet on the ITP floor), we decided that we liked the literal design of a control panel, but wasn’t sure how we’d like to approach making stage lights respond to the sliders in a creative way. After sharing our past works and brainstorming, we found a theme we both love: the deep space. Hyun introduced me to futurist architect Richard Fuller and his design of a “spaceship earth”. Read more about it on his blog!

When the other group member Yihan called in, he was onboard with creating a galaxy-traveling spaceship. We divided the work: Hyun would code most of the interior elements, and make responsive animation for the screens, and Yihan and I would each tackle a slider that controls the “galaxy” in different ways.

I drew a sketch in photoshop for reference:

my initial photoshop sketch (particle image from github)

After some research in p5.js’s examples and references, excessive amount of coding train videos, and a very helpful session with one of the residents, August Luhrs, I grew strong attachment to the starfield coding challenge by Coding Train / Daniel Shiffman (p5 code here) as a reference for animation. This code has a separate .js file for the star objects, and in the main file he calls for an array of ellipses, controlling their speed with MouseX movements. August was patient to walk me through most of this code, but some parts are still difficult for me to comprehend. I decided I’ll leave it alone. I, in turn, focused my energy on:

  • Coding a slider
  • Making the slider respond to mouse drag
  • Connecting slider and animation

I called some variables, and made a thin rectangle (base) and a chubby one (button). First, I wanted to make sure it knows when I’m clicking and dragging the button. A pseudo-code would be:

when I'm dragging my mouse

check if the position of the mouse is within the bounds of the button

if so, print "drag"

It worked! So I’m onto making it responsive to mouse drag.

Initially, I thought about tracking mouseY position of the last frame, and use its current position minus the last frame to get an offset value. I wrote this in the mouseDragged function:

let offset = mouseY - previousMouseY;
      previousMouseY = mouseY;
      button1top += offset;

It was pretty wrong. My friend David Currie passed by and offered some help. I was reminded that I should define offset = 0 first before setup, and that I should also, in the draw function, constrain the maximum and minimum position the slider can go, as well as establishing the button and previousMouseY positions when mouse goes out of bound.

In the draw functions it should look something like this:

    if (slider1y > slider1min) {
      slider1y = slider1min;
      previousMouseY = slider1min;
    if (slider1y < slider1max) {
      slider1y = slider1max;
      previousMouseY = slider1max;

We also realized that when the mouse drags faster than the button, the mouse will go over bound, and slider will stop responding. David proposed adding a sliderIsBeingDragged variable, and include it in the drag logic:

if the position of the mouse is within the bounds of the button, OR if mouse is pressed, drag the slider button.

I thought this could probably impact the second slider (or make this slider react to clicking on the other slider), so I just increased the button boundaries by a little bit. Kind of sketchy, but effective.

After testing, I suddenly realized: why use offset and previous mouse position at all? Can’t mouseY’s position directly translate to button position? Then the function will look like:

function mouseDragged() {
  // mouse position within button
  // added more width than the actual button
  if (mouseY > button1y - 20 &&
    mouseY < button1y + 20 &&
    mouseX > button1left &&
    mouseX < button1right
      // or it's clicked on.. easier this way
  ) {
    if (mouseY > slidermin) {
    button1y = slidermin;
      else if (mouseY < slidermax) {
      button1y = slidermax;
    } else {
    button1y = mouseY;

So much cleaner!

The speed up and down animation is just a simple map function. So, after unifying and renaming some variables, a new and efficiently improved conclusion of my part was drawn.

link to my code

Last step, combine. It took us quite some time, but I finally figured out the power of good markdown, the layering of objects, and the secret to not let weird code interfere with each other: push(); pop(); . I enjoyed figuring out other group members’ processes as well – zoom meetings and Discord collaborative working sessions have been rough, but I’m proud we pulled through. Interaction highlight in their code include: Hyun’s mouse-click reactive texts on one screen, and a radar on another, and Yihan’s spinning spiral that changes direction.

If you still remember the title of this blog post… we put lyrics of David Bowie’s Space Oddity, covered in 2013 by a Canadian astronaut abroad the International Space Station, on one of our tiny screens. I take any opportunity to pay homage to Cold War Sci-Fi, or David Bowie, or both.

Here’s one last look (play) of our final code, all combined together:

link to combined code

Leave a Reply

Your email address will not be published. Required fields are marked *