JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-full.min.js"></script>
<canvas class="circle"></canvas>

CSS

.circle {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
  top: 0; left: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hover:hover .active {
}

JavaScript

(function($){

	"use strict";

	var mypaper;

	$(document).ready(function() {
  
		mypaper = new PaperWrap( $('.circle')[0] );
    
	});

	function PaperWrap( canvasElement ) {

		var mypaper = new paper.PaperScope();
		mypaper.setup( canvasElement );

		var view = mypaper.view,
				Point = mypaper.Point,
				Path = mypaper.Path,
				Group = mypaper.Group;

		// adjustable variables
		var mouseForce = 0.35;
		// other variables
		var mousePoint = new Point(-4000, -4000);

		function Bacterium(center, size, color) {
			this.build(center, size, color);
		}

		Bacterium.prototype = {
			build: function(center, radius, color) {
				var padding = Math.min(view.size.width, view.size.height) * 0.15;
				
				var timeScale = .85;
				var maxWidth = view.size.width - padding * 2;
				var maxHeight = view.size.height - padding * 2;
				var w = maxWidth * timeScale;
				var h = maxHeight * timeScale;

				this.fitRect = new Path.Rectangle({
					point: [view.size.width / 2 - w / 2, view.size.height / 2 - h / 2],
					size: [w, h]
				});

				this.circlePath = new Path.Circle(center, radius);

				this.group = new Group([this.circlePath]);
				//this.group.strokeColor = "black";
				this.group.position = view.center;

				this.circlePath.fillColor = color;
				this.circlePath.fullySelected = false;
				
				// Mausdistanz
				this.threshold = radius * 2;
				this.center = center;
				// Elemente hinzufügen
				this.circlePath.flatten(radius * 1.35);
				// wieder zum Kreis machen
				this.circlePath.smooth();
				// einpassen in das fitRect
				this.circlePath.fitBounds( this.fitRect.bounds );

				// control circle erstellen, auf den die einzelnen Punkte später zurückgreifen können
				this.controlCircle = this.circlePath.clone();
				this.controlCircle.fullySelected = false;
				this.controlCircle.visible = false;

				var rotationMultiplicator = radius / 100;

				// Settings pro segment
				this.settings = [];
				for( var i = 0; i < this.circlePath.segments.length; i++...