Making a Turntable

You can observe a lot just by watching

Yogi Berra

Records Spin ‘Cause Platters Do!

In our previous post, we made a record, with the intention of having it spin. We could just declare that our virtual record has spinning powers all its own, seeing that this isn’t real life. But, we are committed to simulating the full record playing experience. Yes, we can take liberties, but we believe that by staying true to the real-life facts, we will benefit our users, and also inform how our system will operate. That is, the digital follows life. We thus observe a turntable. We play a record, and watch. And one thing that comes through is that the Platter spins. The record is placed atop of a thing that spins.

We are reminded of Steve Job’s obsession with the appearance of things even if they are not visible. The platter is beneath the record. We could simply ignore it; imply its existence. But if we take the approach that each unique item needs to be given attention and made to be true and beautiful, then we will not only have peace of mind, we will have something that can serve us in more ways than expected. We can not only give the platter the rotation, we can reveal it and have the disc placed atop it, in a rewarding simulation of human hands dropping a record.

We can give the platter a slipmat!

But here we take a liberty by not creating a separate DOM element. Instead we give our platter element a background image derived from a slipmat photo. This was the best thing to do, coding-wise. Plus, functionally, we do not want to ever have the platter be without its slipmat. We are in effect ‘grouping layers.’

In real life, the platter has a spindle. Anything above the platter (the slipmat, the record) has a little hole to fit over it. To simulate that, the record would have a small opening (circle) that has a background of transparent. But, the way our record is created does not allow for that. Instead, we just give the spindle element a high-enough z-index (stacking order) so that it is visible ‘over’ the record.

Because our disc is a separate, sibling element to the platter, it does not inherit its spinning property. Thus, we create a class “spinIt.” We apply the class to any element that the JavaScript will rotate. The platter, spindle, and disc are each given the spinIt class. Yes, the record’s spinning is caused by the platter, but spin it does and must!

The Turntable

We decide for usability and simplicity, that the control buttons will not appear within the turntable. Rather, we will provide buttons above the turntable. Thus, the turntable need only be a square that contains the platter, record, and stylus. We style it with a box shadow and metallic background.

The Very Important Stylus

The position and shape of the stylus is key to performing its function of moving along the plane of the disc. I made separate images to serve as the motor and the arm which are children of the <stylus>. I wasn’t sure which element would rotate. Studying the real player, I learned that both the motor and the arm rotate together. This informed where to put the origin point of rotation. By default, the point is the middle of the element. That ended up being the proper point..

The only way to do this trial and error is to have the record visible. Then, you manipulate in Inspector Tool the property that will be eventually be done via Javascript.

For the stylus, we identify 3 positions:

1. its resting / default position
2. the starting to play position
3. the ending of play position

We use the browser’s Dev Tools: Inspector to manually edit the transform rotate property. Not only to inform whether the position and size is okay. We also record the values that match up with a proper resting, start and end position. We will use those values when we code the animating functions.

We thus know that when a song is playing, within X seconds, the stylus rotation will increase from 3deg to 2deg.

So long as we are using Dev Tools: Inspection, we can look at that other way we are planning to mark progress of a record–the white border of the playing span. At default, it is 1px.

We increase the value until the white edges up to the solid inset, which happens at 74px. We make a note of this for the animation function: while a song plays, the border will increase from 1px to 74px.

Let’s Spin

In this post we are describing the elements of the turntable and the record that we made. We have proven that the elements work well together. Before we discuss, in a different post, the functions involved in playing a mp3, let us discuss a function that is irrespective of a song, and that is: spinning.

The CSS property in play will also be transform:rotate. We will not use a CSS animation to accomplish the spinning however. For one, we want to track the variable $degrees, so that if we wish we might start and stop the rotation. Javascript gives us control over the tempo and continuity. So the way to proceed is, making a function that increases the degrees X amount every Y millisecond. What should those values be?

We are shooting for a speed of 33 revolutions per minute.

One revolution = 360 degrees.

So, 33 revolutions per minute means 33 X 360deg = 11,880

A minute is 60 seconds, or 60,000 milliseconds.

Every 60,000 ms, the degrees must increase 11,880 deg.

Now we can divvy up the movement by adjusting how often the movement function is called. We seek a steady movement. How about ..

Every 60ms, increase deg by 11.8 ? Yes.. or every 6ms, move it 1.18deg

var $spin = $(".spinIt"), degree = 0, timer; 

    function rotateDisc() {
        $spin.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            degree+=1.18; 
            rotateDisc();
        },6);
    }