graphx: jelly green

jelly_thing.dart

/// roipeker2020
///
/// As other samples, use the `SceneBuilderWidget`.
/// 
/// web demo:
/// https://roi-graphx-jelly-green.surge.sh
///
/// source:
/// https://gist.github.com/roipeker/dbf792b862ad8dfb526c227c2e1d4ad9
///

import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

class DemoJellyDots extends Sprite {

  var points = <Dot>[];
  int totalPoints = 120;
  double size = 18;
  double mouseRadius = 80.0, mouseStrength = .06, stiffness = .05;
  bool outlineJelly = false;

  double get sw => stage.stageWidth;
  double get sh => stage.stageHeight;
  
  @override
  void addedToStage() {
    stage.keyboard.onDown.add((event) {
      if (event.isKey(LogicalKeyboardKey.keyD)) {
        points.forEach((d) => d.visible = !d.visible);
      } else if (event.isKey(LogicalKeyboardKey.keyO)) {
        outlineJelly = !outlineJelly;
      }
    });

    points = List.generate(totalPoints, (i) {
      var angle = MathUtils.pi2 / totalPoints * i;
      var dot = Dot(
        px: sw / 2 + cos(angle) * 150 + GameUtils.rndRange(-5, 5),
        py: sh / 2 + sin(angle) * 150 + GameUtils.rndRange(-5, 5),
      );
      dot.visible = false;
      addChild(dot);
      return dot;
    });
  }

  @override
  void update(t) {
    if (stage.pointer.isDown) {
      size = 20;
      stiffness = .15;
    } else {
      size = 15;
      stiffness = .05;
    }
    for (var i = 0; i < totalPoints - 1; ++i) {
      var p0 = points[i];
      for (var j = i + 1; j < totalPoints; ++j) {
        var p1 = points[j];
        compare(p0, p1, j == i + 1);
      }
    }
    compare(points[totalPoints - 1], points[0], true);
    updatePoints();
    draw(graphics);
  }

  void updatePoints() {
    /// save touch coordinates, to avoid the matrix transformation.
    double mx = mouseX;
    double my = mouseY;
    points.forEach((dot) {
      var dx = dot.x - mx;
      var dy = dot.y - my;
      var dist = sqrt(dx * dx + dy * dy);
      if (dist < mouseRadius) {
        var tx = mx + dx / dist * mouseRadius;
        var ty = my + dy / dist * mouseRadius;

        /// the good old Euclidean :) ... distance based easing
        dot.vx += (tx - dot.x) * mouseStrength;
        dot.vy += (ty - dot.y) * mouseStrength;
      }
      dot.x += dot.vx;
      dot.y += dot.vy;
      dot.vx *= dot.friction;
      dot.vy *= dot.friction;
    });
  }

  void compare(_Dot p0, _Dot p1, [bool isSibling = false]) {
    var dx = p1.x - p0.x;
    var dy = p1.y - p0.y;
    var dist = sqrt(dx * dx + dy * dy);
    if (isSibling) {
      var tx = p0.x + dx / dist * size;
      var ty = p0.y + dy / dist * size;
      var ax = (tx - p1.x) * stiffness;
      var ay = (ty - p1.y) * stiffness;
      p1.vx += ax;
      p1.vy += ay;
      p0.vx -= ax;
      p0.vy -= ay;
    } else if (dist < size * 2) {
      var tx = p0.x + dx / dist * size * 2;
      var ty = p0.y + dy / dist * size * 2;
      var ax = (tx - p1.x) * stiffness;
      var ay = (ty - p1.y) * stiffness;
      p1.vx += ax;
      p1.vy += ay;
      p0.vx -= ax;
      p0.vy -= ay;
    }
  }

  void draw(Graphics g) {
    g.clear();
    g.beginFill(Colors.lightGreen.value);
    if (outlineJelly) {
      g.lineStyle(3, Colors.lightGreen.shade700.value, 1);
    }

    /// get the middle points to get a smooth cubic bezier...
    var pa = points[0];
    var pz = points.last;
    var mid1x = (pz.x + pa.x) / 2;
    var mid1y = (pz.y + pa.y) / 2;

    g.moveTo(mid1x, mid1y);
    for (var i = 0; i < points.length - 1; ++i) {
      var p0 = points[i];
      var p1 = points[i + 1];
      g.curveTo(
        p0.x,
        p0.y,
        (p0.x + p1.x) / 2,
        (p0.y + p1.y) / 2,
      );
    }

    /// close the thing!
    g.curveTo(pz.x, pz.y, mid1x, mid1y);
    g.endFill();
  }
}

/// dot (point) reference.
class Dot extends Shape {
  double px, py, vx = 0, vy = 0, friction = .9;
  Dot({this.px, this.py}) {
    graphics
        .beginFill(Colors.yellowAccent.value, 1)
        .lineStyle(2, Colors.green.value, .5)
        .drawCircle(0, 0, 4)
        .endFill();
    setPosition(px, py);
  }
}