digitaleagenturnc/standards/templates/standards/agencynetwork_content.html_SAVE.html

 <div class="row col">
 	<div class="card col-9" style="min-height: 500px">  
 		<div class="card-body">
        <h5 class="card-title"></h5>
          <p class="card-text">
          	<canvas id="canvas"></canvas>
          </p>
      </div>
    </div>
    <div class="col-3">
    <!--
    <div class="card col-14 ml-1 mb-2" style="">  
      <div class="card-body">
        <h5 class="card-title">UPDATES</h5>
          <p class="card-text">
            UPDATES
          </p>
      </div>
    </div>-->

    <div class="card col-14 ml-1 mb-2" style="">  
      <div class="card-body">
        <h5 class="card-title">Beliebte Standards</h5>
          <p class="card-text">
            Keine
          </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
	let resizeReset = function() {
	w = canvasBody.width = window.innerWidth*0.55;
	h = canvasBody.height = window.innerHeight/2;
}

const opts = { 
	particleColor: "rgb(200,200,200)",
	lineColor: "rgb(200,200,200)",
	particleAmount: 5,
	defaultSpeed: 0.03,
	variantSpeed: 0.4,
	defaultRadius: 5,
	variantRadius: 5,
	linkRadius: 500,
};

window.addEventListener("resize", function(){
	deBouncer();
});

let deBouncer = function() {
    clearTimeout(tid);
    tid = setTimeout(function() {
        resizeReset();
    }, delay);
};

let checkDistance = function(x1, y1, x2, y2){ 
	return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
};

let linkPoints = function(point1, hubs){ 
	for (let i = 0; i < hubs.length; i++) {
		let distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y);
		let opacity = 1 - distance / opts.linkRadius;
		if (opacity > 0) { 
			drawArea.lineWidth = 0.2;
			drawArea.strokeStyle = "#CCCCCC";
			drawArea.beginPath();
			drawArea.moveTo(point1.x, point1.y);
			drawArea.lineTo(hubs[i].x, hubs[i].y);
			drawArea.closePath();
			drawArea.stroke();
		}
	}
}
particles = [];


Particle = function(xPos, yPos){
	this.name ="NAME";
	this.agnid = "";
	this.name_correction = 0;
	this.x = Math.random() * (w*0.4)+250; 
	this.y = Math.random() * (h*0.4)+150;
	this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed; 
	this.directionAngle = Math.floor(Math.random() * 360); 
	this.color = opts.particleColor;
	this.radius = opts.defaultRadius; 	
	this.vector = {
		x: Math.cos(this.directionAngle) * this.speed,
		y: Math.sin(this.directionAngle) * this.speed
	};
	this.update = function(){ 
		this.border(); 
		this.x += this.vector.x; 
		this.y += this.vector.y; 
	};
	this.border = function(){ 
		if (this.x >= w || this.x <= 0) { 
			this.vector.x *= -1;
		}
		if (this.y >= h || this.y <= 0) {
			this.vector.y *= -1;
		}
		if (this.x > w) this.x = w;
		if (this.y > h) this.y = h;
		if (this.x < 0) this.x = 0;
		if (this.y < 0) this.y = 0;	
	};
	this.draw = function(){ 
		drawArea.beginPath();
		drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2);
		drawArea.closePath();
		drawArea.fillStyle = this.color;
		drawArea.fill();
		drawArea.font = "30px Arial";

		drawArea.fillText(this.name, this.x-this.name_correction, this.y-15);
	};
	this.clicked = function(){
		alert(1);
	}

};


function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    	
    for (let i = 0; i < particles.length; i++){
    		
    	x_border_l = Math.round(particles[i].x - 10);
    	x_border_r = Math.round(particles[i].x + 10);
		y_border_l = Math.round(particles[i].y - 10);
    	y_border_r = Math.round(particles[i].y + 10);
    	
		if(x > x_border_l && x < x_border_r && y_border_r > y && y_border_l < y){
			alert(particles[i].name + " ID: " + particles[i].agnid);
		}
		
	}

}

function getCursorPositionOver(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    	
    for (let i = 0; i < particles.length; i++){
    		
    	x_border_l = Math.round(particles[i].x - 10);
    	x_border_r = Math.round(particles[i].x + 10);
		y_border_l = Math.round(particles[i].y - 10);
    	y_border_r = Math.round(particles[i].y + 10);
    	
		if(x > x_border_l && x < x_border_r && y_border_r > y && y_border_l < y){			
			if(particles[i].radius < 25){
				particles[i].radius = particles[i].radius+2.5;	
			}			
		}
		else{
			particles[i].radius = 5;			
		}
		
	}

}

const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})
canvas.addEventListener('mousemove', function(e) {
    getCursorPositionOver(canvas, e)
})


function setup(){ 
	
	resizeReset();
	/*for (let i = 0; i < opts.particleAmount; i++){
		p = new Particle();
		particles.push( p );
		
	}*/
	{% for agn in agencynetworks %}
		p_{{agn.pk}} = new Particle();
		p_{{agn.pk}}.name = "{{agn.name}}";
		p_{{agn.pk}}.agnid = {{agn.pk}};
		particles.push( p_{{agn.pk}} );

	{% endfor %}

	window.requestAnimationFrame(loop);
}

function loop(){ 
	window.requestAnimationFrame(loop);
	drawArea.clearRect(0,0,w,h);
	for (let i = 0; i < particles.length; i++){
		particles[i].update();
		particles[i].draw();
	}
	for (let i = 0; i < particles.length; i++){
		linkPoints(particles[i], particles);
	}
}

const canvasBody = document.getElementById("canvas"),
drawArea = canvasBody.getContext("2d");
let delay = 200, tid,
rgb = opts.lineColor.match(/\d+/g);
resizeReset();
setup();

</script>