Basketball Court

I am wondering if somebody can start me in the right direction on a project I have been tasked to complete. I work for a company that sells indoor and outdoor basketball court and we are in the process of redoing our website. We would like to add a feature where people can design their own basketball courts. Basically they would put in dimensions of the court size they want and you can choose colors of the flooring, lines, add features like lights and things like that. How would I go about this? Do I need to create a graphic of it first and use hype to animate it and give it function? I am not the most skilled at hype but need help getting started. I attached a link of one for reference from another company. Thanks!

Design - SnapSports

I think this might help you out…

I created a hype project to quickly calculate the hypotenuse of a right triangle. Basically, sliders can change the size. That's very basic, but that simple building block might be expandable to what you're trying to do.

Basically, you need an input, JavaScript is used to listen for changes to that input, and then JavaScript is used to update the elements in the Hype project. There's even a video on Photics.TV.

In your case, I'd probably focus on using the inputs to manipulate Hype timelines. Here's another example…

That template shows how to change the colors by pressing a button. Perhaps that's another building block that might help you to build your project.


You can use a blend mode or if you rather want to use images you can use them them with Hype Data Magic to create an endless slider with them. Look at the template slider example. Don’t be discouraged as it is pretty easy once you grasp the concept.

You would use a fade instead of a slide animation.