Here is a code of a circle. How to get it spinning round and round

GoJS
1

Here is a code of a circle. How to get it spinning round and round.

Circulo Degrader
2

First, we do not see any code.

Second, it seems to me that a circle that is rotated will look the same, regardless of the angle.

3

I received your code by mail. Here it is:

<!DOCTYPE html>
<html lang='pt-BR'>
<head>
    <meta charset='UTF-8' />
    <title>Circulo Degrader</title>
</head>
<body>
    <canvas id="myCan" width="600" height="600"></canvas>
    <script>

function set_radial(x1,y1,r1,x2,y2,r2, c0,c1,c2,i1){ //--radiaal gradient
    fillColor = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); //
    fillColor.addColorStop(0,c0); //inner cirle
    fillColor.addColorStop(i1,c1); //transitional color
    fillColor.addColorStop(1,c2); // outer circle
    ctx.fillStyle=fillColor; //
}

canv = document.getElementById('myCan');
ctx = canv.getContext('2d');

set_radial(50,50,0,50,50,45, 'red', 'yellow', 'blue', 0.50); 
ctx.arc(50,50,45,0,2*Math.PI, false); ctx.fill();

ctx.beginPath();
set_radial(120,50,0, 160,50,45, 'red', 'yellow', 'blue', 0.30);
ctx.arc(160,50,45,0,2*Math.PI.false);ctx.fill();

ctx_beginPath();
set_radial(120,50,0, 270,50,45, 'red', 'yellow', 'blue', 0.50);
//smaller enner circle
ctx.arc(270,50,45,0,2*Math.PI,false); ctx.fill(); 

    </script>
</body>
</html>
4

You can draw a circular radial gradient by creating a Brush of type Brush.Radial. For example, if you use this:

$(go.Node,
    $(go.Shape, "Circle",
        {
          width: 100, height: 100,
          strokeWidth: 0,
          fill: $(go.Brush, go.Brush.Radial, { 0.0: "red", 0.5: "yellow", 1.0: "blue" })
        })
)

you get:

But I still have no idea of what you mean by spinning a circle. If you want to “spin” anything in GoJS, you’ll need to frequently increment the GraphObject.angle using setTimeout or requestAnimationFrame. You can see examples of this by searching the sources of the samples. If you have the UndoManager enabled, remember to temporarily turn it off by setting Diagram.skipsUndoManager to true, as the samples do.

5

Ah, so you don’t want to rotate the circle but have it revolve around a point. OK, here you go: Eternal Revolution.

The Node.locationSpot is Spot.Center so that the Node.location point actually is at the center of the node. All nodes using that template initially are located at the origin, but the animation code modifies the location of the “Beta” node.

Note that the UndoManager is enabled, but because the animation changes are performed while Diagram.skipsUndoManager is temporarily true, the animation changes are not recorded. So you can move the “Alpha” node around in the normal fashion, including undoing and redoing those moves. Of course you don’t need to enable the UndoManager at all, if your app doesn’t need it.

The code:

<!DOCTYPE html>
<html>
<head>
<title>Eternal Revolution</title>
<!-- Copyright 1998-2015 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagram",
        {
          initialContentAlignment: go.Spot.Center,
          "animationManager.isEnabled": false,
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplate =
      $(go.Node,
        { locationSpot: go.Spot.Center, location: new go.Point(0, 0) },
        $(go.Shape, "Circle",
          {
            width: 100, height: 100,
            strokeWidth: 0,
            fill: $(go.Brush, go.Brush.Radial, { 0.0: "red", 0.5: "yellow", 1.0: "blue" })
          })
      );

    myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
      var alpha = myDiagram.findNodeForKey("Alpha");
      var beta = myDiagram.findNodeForKey("Beta");
      var loc = alpha.location.copy().offset(250, 0);  // the starting location for Beta
      beta.location = loc;
      function loop() {
        myDiagram.skipsUndoManager = true;   // don't record anything in UndoManager, if it isEnabled
        beta.location = loc.rotate(3);       // modifies LOC, 3 degrees at a time, about the origin
        myDiagram.skipsUndoManager = false;
        window.requestAnimationFrame(loop);  // keep going
      }
      window.requestAnimationFrame(loop);
    });

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha" },
      { key: "Beta" }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagram" style="border: solid 1px black; width:100%; height:700px"></div>
</body>
</html>