Skip to content

Tag: sphere

JavaFX, creating a sphere with shadow

This is a short tutorial about some JavaFX elements like ellipses, circles, effects and gradients.

In the first code we are creating a frame with a ellipse with center in (120,140), 60 pixels of horizontal radius, 20 pixels of vertical radius and color black. We have also a circle with center in (100,100), 50 pixels of radius and color red. The idea is make this circle appears like a sphere and make the ellipse look like a shadow.

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;

Frame {
    title: "JavaFX Sphere", width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                 centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
                 fill: Color.BLACK
            },
            Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }
        ]
    }
}

Now we will just add two thing, a effect and a radial gradient.

First we’ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with

effect: GaussianBlur{ radius: 20 }

This creates a gaussian blur of radius 20. The first ellipse was like

and now with the effect becomes

Now we create a radial gradient for the circle appears like a sphere. We do that using the RadialGradient class at

RadialGradient {
   centerX: 75, centerY: 75, radius: 50, proportional: false
   stops: [
      Stop {offset: 0.0 color: Color.WHITE},
      Stop {offset: 0.3 color: Color.RED},
      Stop {offset: 1.0 color: Color.DARKRED},
   ]
}

First lets look at the gradient. It starts with a white color, going to red during the first 30% of the way. The remaining of the way is the color red going to a dark red. It creates a gradient like this one:

But it is a radial gradient, with center in (75,75) and radius 50. So this radial gradient looks like this:

As we place this radial gradient in our circle, it was like this:

And now is like this:

Now the complete code. I guess it’s simple and also concise.

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.geometry.*;

Frame {
    title: "JavaFX Sphere", width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
                fill: Color.BLACK
                effect: GaussianBlur{ radius: 20 }
            },
            Circle {
                centerX: 100, centerY: 100, radius: 50
                fill: RadialGradient {
                    centerX: 75, centerY: 75, radius: 50, proportional: false
                    stops: [
                        Stop {offset: 0.0 color: Color.WHITE},
                        Stop {offset: 0.3 color: Color.RED},
                        Stop {offset: 1.0 color: Color.DARKRED},
                    ]
                }
            }
        ]
    }
}

Here is the final screenshot:

Walker Sphere

For a while I’m thinking about this hardware project idea and now I’m opening here to get some opinions. After that maybe I’ll submit it for the Sun SPOT Open Grant Program.

What is Walker Sphere? Walker Sphere is a project to made an robot capable with a diferent aproach, without heels, mats, propellers or wings. The main idea is to move only changing its center of gravity.

How change its center of gravity?

It’s a sphere

Sphere Walker Anatomy

with some compartments

Sphere Walker Anatomy

and a Sun Spot.

Sphere Walker Anatomy

One compartment is filled with a liquid. The liquid is pumped to another compartment and so the compartment got heavier and the sphere moves towards its direction.

How the sphere walks

Why a sphere? We can distribute the mass uniformly in a sphere and it’s shapes make it easier to roll. A sphere can encapsulates all components and protect them from the outside world and at the same time all sensors can work, especially using some transparent material for the bark.

Why Sun Spot? The Sun Spot have some advantages that fits perfectly in this project:

  • A broad set of sensors including accelerometers that made possible to know the current state of the sphere.
  • Radio communication that can make possible two or more spheres collaborate to achieve a common task.

Spheres robots talking

  • Programmable using Java.
  • Open and Free Source JVM, Squawk.

It will be free? Yes. I’d like to know more about open and free licenses for hardware projects.

How to pump the liquid into the compartments? I don’t know. Have you some good idea?

Some random ideas:

  • A pressure device.
  • Something like an injection.
  • An Archimedes’ screw.
  • Not using a liquid, use something else.

I’m open for ideas, critics and suggestions. 😉