How to use the proton-engine.RectZone function in proton-engine

To help you get started, we’ve selected a few proton-engine examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github lindelof / particles-bg / dist / index.es.js View on Github external
value: function createProton(canvas, width, height) {
      this.proton = new Proton();
      var emitter = new Proton.Emitter();
      emitter.rate = new Proton.Rate(this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(5, 8), new Proton.Span(0.1, 0.25));

      emitter.addInitialize(new Proton.Mass(1));
      emitter.addInitialize(new Proton.Radius(20, 200));
      emitter.addInitialize(new Proton.Life(2, 4));
      emitter.addInitialize(new Proton.Position(new Proton.RectZone(0, 0, width, height)));

      emitter.addBehaviour(new Proton.Alpha(0, 1, Infinity, Proton.easeOutCubic));
      emitter.addBehaviour(new Proton.Scale(1, 0, Infinity, Proton.easeOutCubic));
      emitter.addBehaviour(new Proton.Color(this.colors, "random"));

      emitter.emit();
      this.proton.addEmitter(emitter);

      var renderer = new Proton.CanvasRenderer(canvas);
      this.proton.addRenderer(renderer);
    }
  }, {
github lindelof / particles-bg / src / particles / Ball.jsx View on Github external
new Proton.Span(30, 70),
        "polar"
      )
    );

    emitter.addBehaviour(new Proton.Alpha(1, 0));
    emitter.addBehaviour(
      new Proton.Color(["#36aaf3", "#fd769c", "#94ff22", "#ffa545", "#ffffff"])
    );
    emitter.addBehaviour(new Proton.Scale(0.7, 1));
    emitter.addBehaviour(new Proton.Gravity(3));
    emitter.addBehaviour(new Proton.Collision(emitter));
    emitter.addBehaviour(this.customDeadBehaviour(canvas));
    emitter.addBehaviour(
      new Proton.CrossZone(
        new Proton.RectZone(0, 0, canvas.width, canvas.height),
        "bound"
      )
    );

    emitter.p.x = Math.min(500, Math.max(canvas.width / 2 - 400, 50));
    emitter.p.y = canvas.height / 2 + 50;
    emitter.emit();
    this.proton.addEmitter(emitter);

    const renderer = new Proton.CanvasRenderer(canvas);
    renderer.onProtonUpdate =  ()=> {
      context.fillStyle = getColor(this.props.color, 0.2) || "rgba(255, 255, 255, 0.2)";
      context.fillRect(0, 0, canvas.width, canvas.height);
    };
    this.proton.addRenderer(renderer);
  }
github drawcall / Proton / source / src / components / particles / Circle.jsx View on Github external
const emitter = new Proton.Emitter();
    emitter.rate = new Proton.Rate(20);
    emitter.damping = 0.008;

    emitter.addInitialize(new Proton.Mass(1));
    emitter.addInitialize(new Proton.Radius(30, 600));
    emitter.addInitialize(
      new Proton.Velocity(
        new Proton.Span(0.5),
        new Proton.Span(0, 360),
        "polar"
      )
    );
    emitter.addInitialize(
      new Proton.Position(
        new Proton.RectZone(0, 0, canvas.width, canvas.height)
      )
    );

    const crossZoneBehaviour = new Proton.CrossZone(
      new Proton.RectZone(0, 0, canvas.width, canvas.height),
      "cross"
    );
    emitter.addBehaviour(crossZoneBehaviour);
    emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.35, 0.55)));
    emitter.addBehaviour(new Proton.Color(this.colors, "random"));
    emitter.addBehaviour(new Proton.RandomDrift(50, 50, 0.5));

    emitter.emit("once");
    this.proton.addEmitter(emitter);

    const renderer = new Proton.CanvasRenderer(canvas);
github lindelof / particles-bg / src / particles / Square.jsx View on Github external
emitter.damping = 0;

    emitter.addInitialize(new Proton.Mass(1));
    emitter.addInitialize(new Proton.Radius(4, 70));
    emitter.addInitialize(
      new Proton.Velocity(new Proton.Span(2, 10), new Proton.Span(0), "polar")
    );
    emitter.addInitialize(
      new Proton.Position(
        new Proton.LineZone(0, canvas.height, canvas.width, canvas.height)
      )
    );

    const dis = 150;
    const crossZoneBehaviour = new Proton.CrossZone(
      new Proton.RectZone(
        0 - dis,
        0 - dis,
        canvas.width + 2 * dis,
        canvas.height + 2 * dis
      ),
      "cross"
    );
    emitter.addBehaviour(crossZoneBehaviour);
    emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.1, 0.55)));
    emitter.addBehaviour(new Proton.Color(this.colors));

    emitter.emit("once");
    this.proton.addEmitter(emitter);
    const renderer = this.createRenderer(canvas);
    this.proton.addRenderer(renderer);
github lindelof / particles-bg / src / particles / Tadpole.jsx View on Github external
new Proton.Span(0, 360),
        "polar"
      )
    );
    emitter.addInitialize(
      new Proton.Position(new Proton.RectZone(0, 0, width, height))
    );

    const mouseInfo = {
      x: width / 2,
      y: height / 2
    };

    const attractionBehaviour = new Proton.Attraction(mouseInfo, 0, 0);
    const crossZoneBehaviour = new Proton.CrossZone(
      new Proton.RectZone(0, 0, canvas.width, canvas.height),
      "bound"
    );
    emitter.addBehaviour(new Proton.Color(this.props.color || "#bbb"));
    //emitter.addBehaviour(new Proton.Alpha(new Proton.Span(0.5, 1)));
    emitter.addBehaviour(attractionBehaviour, crossZoneBehaviour);
    emitter.addBehaviour(new Proton.RandomDrift(15, 15, 0.05));
    emitter.emit("once");

    this.proton.addEmitter(emitter);
    this.proton.addRenderer(this.createRenderer(canvas));
    this.crossZoneBehaviour = crossZoneBehaviour;
  }
github lindelof / particles-bg / src / particles / Cobweb.jsx View on Github external
const pointZone = new Proton.Position(
      new Proton.RectZone(0, 0, width, height)
    );
    emitter.addInitialize(pointZone);
    emitter.addInitialize(
      new Proton.Velocity(
        new Proton.Span(0.3, 0.6),
        new Proton.Span(0, 360),
        "polar"
      )
    );

    emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.2, 0.9)));
    emitter.addBehaviour(new Proton.Color(this.props.color || "#333"));
    this.crossZoneBehaviour = new Proton.CrossZone(
      new Proton.RectZone(0, 0, width, height),
      "cross"
    );
    emitter.addBehaviour(this.crossZoneBehaviour);

    emitter.emit("once");
    emitter.damping = 0;
    this.proton.addEmitter(emitter);
    this.proton.addRenderer(this.createRenderer(canvas, emitter));
  }
github drawcall / Proton / source / src / components / particles / Cobweb.jsx View on Github external
const pointZone = new Proton.Position(
      new Proton.RectZone(0, 0, width, height)
    );
    emitter.addInitialize(pointZone);
    emitter.addInitialize(
      new Proton.Velocity(
        new Proton.Span(0.3, 0.6),
        new Proton.Span(0, 360),
        "polar"
      )
    );

    emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.2, 0.9)));
    emitter.addBehaviour(new Proton.Color("#ffffff"));
    this.crossZoneBehaviour = new Proton.CrossZone(
      new Proton.RectZone(0, 0, width, height),
      "cross"
    );
    emitter.addBehaviour(this.crossZoneBehaviour);

    emitter.emit("once");
    emitter.damping = 0;
    this.proton.addEmitter(emitter);
    this.proton.addRenderer(this.createRenderer(canvas, emitter));
  }
github lindelof / particles-bg / src / particles / Lines.jsx View on Github external
emitter.addInitialize(new Proton.Radius(4));
    emitter.addInitialize(
      new Proton.Velocity(
        new Proton.Span(1.5),
        new Proton.Span(0, 360),
        "polar"
      )
    );
    const mouseObj = {
      x: width / 2,
      y: height / 2
    };

    const attractionBehaviour = new Proton.Attraction(mouseObj, 0, 0);
    const crossZoneBehaviour = new Proton.CrossZone(
      new Proton.RectZone(0, 0, canvas.width, canvas.height),
      "cross"
    );
    emitter.addBehaviour(new Proton.Color("random"));
    emitter.addBehaviour(attractionBehaviour, crossZoneBehaviour);
    emitter.addBehaviour(new Proton.RandomDrift(10, 10, 0.05));
    emitter.p.x = canvas.width / 2;
    emitter.p.y = canvas.height / 2;
    emitter.emit("once");

    this.proton.addEmitter(emitter);
    this.proton.addRenderer(this.createRenderer(canvas));
    this.crossZoneBehaviour = crossZoneBehaviour;
  }
github lindelof / particles-bg / src / particles / Polygon.jsx View on Github external
new Proton.Span(4, 6),
          new Proton.Span(-90, 90),
          "polar"
        )
      );

      emitter.addBehaviour(new Proton.Alpha(alpha, 0.2));
      emitter.addBehaviour(new Proton.Color(color));
      emitter.addBehaviour(new Proton.Scale(1, 0.3));
      emitter.addBehaviour(new Proton.Rotate());
      emitter.addBehaviour(new Proton.Gravity(gravity));

      emitter.addBehaviour(this.customDeadBehaviour(canvas));
      emitter.addBehaviour(
        new Proton.CrossZone(
          new Proton.RectZone(0, 0, canvas.width, canvas.height),
          zone
        )
      );
    }

    emitter.p.x = x;
    emitter.p.y = y;
    if (once === "once") emitter.emit("once");
    else emitter.emit();

    this.proton.addEmitter(emitter);
    //this.expireEmitter(emitter);
  }
github lindelof / particles-bg / dist / index.es.js View on Github external
var scaleB = scale ? new Proton.Scale(scale[0], scale[1]) : new Proton.Scale(1, 0.2);
            var colorB = color ? new Proton.Color(color[0], color[1]) : new Proton.Color(this.colors);

            emitter.addBehaviour(alphaB);
            emitter.addBehaviour(scaleB);
            if (!body) emitter.addBehaviour(colorB);

            if (rotate) {
                if (rotate[0] === true || rotate[0] === "rotate") {
                    emitter.addBehaviour(new Proton.Rotate());
                } else {
                    emitter.addBehaviour(new Proton.Rotate(rotate[0], rotate[1]));
                }
            }

            var zone = new Proton.RectZone(0, 0, canvas.width, canvas.height);
            var crossZoneBehaviour = new Proton.CrossZone(zone, cross);
            emitter.addBehaviour(crossZoneBehaviour);

            random && emitter.addBehaviour(new Proton.RandomDrift(random, random, 0.05));
            g && emitter.addBehaviour(new Proton.G(g));
            f && emitter.addBehaviour(new Proton.F(f[0], f[1]));

            emitter.emit();
            this.proton.addEmitter(emitter);

            var renderer = this.createRenderer(canvas);
            this.proton.addRenderer(renderer);

            this.emitter = emitter;
            this.crossZoneBehaviour = crossZoneBehaviour;
        }