Broken Button Blues explainer

The aim of this puzzle: Connect the buttons to their functions.
Walkthrough of the solution: The functions are all ready to go, but they’re never being called in the program. You want to use .on('click',...) to connect the button variable to the function. A trick to remember what each part of the .on('click',...) call does is to read it backwards – if you want the drop function to run every time you click on the red button, then you use redButton.on('click', drop); It’s the same way for the blue button except that one should run the cleanUp function.
Sample code solution:
(Tap below to reveal)

function drop() {
  svg.append('circle')
      .attr('r', 15)
      .attr('fill', pickRandom(color))
      .attr('cx', pickRandom(slot))
      .attr('cy', 0)
    .transition()
      .duration(2000)
      .ease(d3.easeBounceOut)
      .attr('cy', 165);
}
function cleanUp() {
  d3.selectAll('circle')
    .transition()
      .duration(1000)
      .attr('cx', 500)
      .ease(d3.easeCubicIn)
      .remove();
}
redButton.on('click', drop);
blueButton.on('click', cleanUp);

JavaScript Concepts: Code Block (function, if statement), Call Nesting, Member Expression, Identifiers, Calling Functions, Identifiers
Grasshopper Concepts: pickRandom()
D3 Concepts: .append(), .attr(‘r’,), .attr(‘fill’,), .attr(‘cx’,), .attr(‘cy’,), .transition(), .duration(), .ease(), .selectAll(), .remove(), .on(‘click’,)
Additional Code (hidden code that runs before the puzzle’s code):

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

//Tube
svg.append('path').attr('d','M0 0 L0 32 C0 44 4 48 16 48 L30 50 L30 30 C12 32 16 36 16 0 Z').attr('fill','silver').attr('transform','scale(2) translate(4 40)').attr('stroke','darkgrey');

//redButton
// Backplate
svg.append('rect').attr('x',0).attr('y',0).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');
// Button depth
var redButton = svg.append('rect').attr('x',5).attr('y',6).attr('width',40).attr('height',40).attr('fill','darkred');
// Button
var redButton = svg.append('rect').attr('x',5).attr('y',3).attr('width',40).attr('height',40).attr('fill','red');

//blueButton
// Backplate
svg.append('rect').attr('x',0).attr('y',60).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');
// Button depth
var blueButton = svg.append('rect').attr('x',5).attr('y',66).attr('width',40).attr('height',40).attr('fill','blue');
// Button
var blueButton = svg.append('rect').attr('x',5).attr('y',63).attr('width',40).attr('height',40).attr('fill','dodgerblue');

//Slots
var numDiv = 7;
var slotWidth = 30;

for (var i=0; i<numDiv; i++) {
    svg.append('rect').attr('x',65+i*(slotWidth+5)).attr('width',5).attr('height',30).attr('fill','silver');
}

var slot = [];
for (var i=0; i<numDiv-1; i++) {
    slot[i] = 65+5+(i*(slotWidth+5))+15;
}

Hello, can someone explain me what’s the meaning of “pickrandom(slot)” in the code? Thanks a lot!

There is some hidden code in this puzzle used to create the objects like the buttons, tube, and dividers. The slots are supposed to be the various chutes that the balls can emerge from. If we simply used pickRandom(500), if the window was 500 pixels wide, then the balls could appear anywhere along the top of the screen – even in between two slots (on top of a divider).

slot is an array of 6 different numbers which are the x-coordinates of the center of each “slot” on the top of the screen. The calculation of the numbers is a little complicated in the actual code, but it comes out to be the same as:

var slot = [85, 120, 155, 190, 225, 260];

When you use pickRandom(slot), you get one of those numbers, and that will line the ball up with one of the 6 slots.

–Frankie

4 Likes

Please give me additional code. It was really cool stuff

The additional code uses a different svg shape called a ‘path’, in addition to ‘circle’ and ‘rect’. A path is a way to describe the outline of a general shape (like the curved tube). The idea is to give the coordinates of a each point, and then say whether the points should be connected with a straight or curved line. There are different ways for a line to curve from one point to another, so that’s why sometimes there are lots of numbers in a row.

The ‘transform’ attribute is also used again, but it is scaling and translating instead of rotating. Scaling is shrinking or expanding a shape, and translating is sliding it left, right, up, or down.

var color = ['red','orange','yellow','green','blue','indigo','violet','white','pink','lime','dodgerblue'];

//Tube
svg.append('path').attr('d','M0 0 L0 32 C0 44 4 48 16 48 L30 50 L30 30 C12 32 16 36 16 0 Z').attr('fill','silver').attr('transform','scale(2) translate(4 40)').attr('stroke','darkgrey');


//redButton
// Backplate
svg.append('rect').attr('x',0).attr('y',0).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');
// Button depth
var redButton = svg.append('rect').attr('x',5).attr('y',6).attr('width',40).attr('height',40).attr('fill','darkred');
// Button
var redButton = svg.append('rect').attr('x',5).attr('y',3).attr('width',40).attr('height',40).attr('fill','red');


//blueButton
// Backplate
svg.append('rect').attr('x',0).attr('y',60).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');
// Button depth
var blueButton = svg.append('rect').attr('x',5).attr('y',66).attr('width',40).attr('height',40).attr('fill','blue');
// Button
var blueButton = svg.append('rect').attr('x',5).attr('y',63).attr('width',40).attr('height',40).attr('fill','dodgerblue');


//Slots
var numDiv = 7;
var slotWidth = 30;

for (var i=0; i<numDiv; i++) {
    svg.append('rect').attr('x',65+i*(slotWidth+5)).attr('width',5).attr('height',30).attr('fill','silver');
}

var slot = [];
for (var i=0; i<numDiv-1; i++) {
    slot[i] = 65+5+(i*(slotWidth+5))+15;
}

–Frankie

4 Likes

@Grasshopper_Ben How does one draw a path? I’m guessing there is some sort of SVG drawing software to generate the code?

Paths are usually generated by software, but you can also create them manually.

Paths are simple in theory but difficult in practice. You’re basically telling the computer how to draw a shape.

For example, 'M 0 0 L 0 32' is saying "move to pixel 0,0 (these are x/y coordinates), then draw a line to pixel 0,32".

If you want to learn more, some dedicated googling can find you some decent resources online.

1 Like

Thanks, I am imagining google will bring up some ideas of underlying principles and also drawing software. I have to admit I had no idea that JavaScript would encompass this type of thing when I started out!

As well as mastering the technical aspects of SVG animation, there is also the fact that I don’t have any design background. How do you think that plays out, both in terms of solo personal projects and in context of web development teams with differentiated roles?

Design skills will grow naturally with experience and exposure, and I would be willing to bet that a large majority of web developers don’t start out with those skills.

A good way to learn is to start paying close attention to the design of websites that you visit regularly. Think about how they lay out their pages. Look for components that are reused throughout the site.

As for experience, try starting some projects. Start with something relatively simple like a blog or a personal page, and fill it with a bunch of placeholder text. Don’t be afraid to make something imperfect. Over time, you’ll pick up a few tricks.

Good luck!
Ben

3 Likes

Thanks, this feels like some postive, realistic advice. I will definitely keep my eyes peeled for good ways of doing websites when I am surfing.

I’ve done some ‘content inventory’ xls planning for a blog using WordPress. I quite like the idea of getting something up and running that way, whilst furthering my js/css skills in parallel.

Please can someone tell me what is the difference between
Ease cubic out
Ease quad in
Ease sin in
Ease bounce out
Etc.
I am having too much confusion
Also if there are other terms like this tell me and also the difference between them

1 Like

There are others. Check online.

Try searching, for example, “.ease command for JS” on Google.

I found a site sometimes ago with alot of those and each of them had an animation showing what it does.

1 Like