Ahead of Your Time explainer

The aim of this puzzle: Rotate the hour hand to the 3 o’clock position.
Walkthrough of the solution: To rotate a shape, you modify the 'transform' attribute. The value it gets set to is different from the other attributes – it takes a string as an argument, but the string is formatted in a way that looks like a function call. The string has three numbers in it: the number of degrees to rotate in the clockwise direction, and then the x and y coordinate of a pivot point. The hour hand starts out rotated 60 degrees from the noon position. You can see this from 'rotate(60 100 100)'. The center of the clock is at the location (100,100) so that is the correct point to pivot around. Each hour position on the clockface is 30 degrees apart, so to get from noon to 3 o’clock is 90 degrees. That means you want the hourHand to rotate 90 degrees clockwise around the center point of (100,100). You put all of this into a string with the same formatting as the minute hand.
Sample code solution:
(Tap below to reveal)

clockFace.attr('cx', 100)
  .attr('cy', 100);
minuteHand.attr('transform', 'rotate(5 100 100)')
  .attr('fill', 'black');
hourHand.attr('transform', 'rotate(90 100 100)')
  .attr('fill', 'darkslategrey');

JavaScript Concepts: Identifiers, Member Expression
D3 Concepts: .attr(‘transform’,), .attr(‘fill’,)
Additional Code (hidden code that runs before the puzzle’s code):

var clockFace = svg.append('circle').attr('r',90).attr('fill','beige').attr('stroke','black').attr('stroke-width',1.5);
var minuteHand = svg.append('rect').attr('x',97).attr('y',20).attr('width',6).attr('height',80).attr('fill','black');
var hourHand = svg.append('rect').attr('x',96).attr('y',40).attr('width',8).attr('height',60).attr('fill','darkslategrey');

Am I missing where the hour hand is initially defined as a variable or was that left out for simplicity?

Hey @jjclemens8,

You’re right, it’s been left our for simplicity — it’s part of the additional code.

Here is all the code that tuns before the puzzle’s code runs:

var clockFace = svg.append('circle').attr('r',90).attr('fill','beige').attr('stroke','black').attr('stroke-width',1.5);
var minuteHand = svg.append('rect').attr('x',97).attr('y',20).attr('width',6).attr('height',80).attr('fill','black');
var hourHand = svg.append('rect').attr('x',96).attr('y',40).attr('width',8).attr('height',60).attr('fill','darkslategrey');

I can’t UNDERSTAND The
Rotate 5 100 100
What is this

The 'transform' attribute of a shape is a special kind of property because it uses a string that’s formatted like a function call. In this puzzle, the transform attribute is used to rotate the shape using 'rotate(d x y)'. There are 3 values needed in a rotation:

  • d - The number of degrees to rotate going counterclockwise
  • x - The x coordinate of a point to rotate around
  • y - The y coordinate of a point to rotate around

rotate(5 100 100) means rotate the shape 5 degrees clockwise (or tightening a lid or screw) and rotate around the point (x=100, y=100). The pivot point matters because your shape will usually end up in a different location depending on where the pivot is. You can test this out with a piece of paper on a table. Put your finger on the center of the paper and then rotate it so that the paper twists in place. The center doesn’t move, but the paper rotates. Now, reset the paper and put your finger on one of the corners. Now when you twist your finger, the corner stays in place, but the center is moving along with the rest of the paper. Even if you twist your finger the same amount in both places, the paper will end up in a slightly different location on the table.

The 1st number is how much you turn your finger (360 is one full rotation and gets you to where you started). And the other 2 numbers define where you place your finger.

–Frankie

1 Like

What does the “stroke” do ?

The 'stroke' is the outline color of a shape. The 'stroke-width' is the thickness of the outline.

–Frankie

Hello,

I think your code in this exercise at the Example is missing the ending quotation mark. (Screenshot attached)

I’m sorry I couldn’t find the right way to report it as a bug! :grinning:

Thanks,
Stavros

1 Like

Nice catch! I’ll make sure that gets fixed.

–Frankie

I keep getting the message ‘starter code has been edited’ though I only changed ‘rotate (60 100 100)’ to ‘rotate (90 100 100)’ as instructed. I am not able to proceed.

Hmm, try posting a screenshot of the code that isn’t working and I can take a look.

It worked as promised after I rebooted my phone. Perhaps a random bug. Sorry I didn’t save the screen shot. Thanks for the response.

BTW I’ve finished the course and am now looking at next steps. I thought I’d go back and work out all the practice problems before I ‘graduate’ from Grasshopper. Had a good time so far. Thanks a lot to the Grasshopper community!!

Hello! What exactly does ‘a pivot point with x at 60 and y at 40’ means? Is it like for an x,y graph as in math?

Hi. What do the arguments a, x, y represents in the code below?

circle.attr('transform', 'rotate(a x y)');

Please answer.