issue.xpub.nl/08/Research/please.undo.undo.it/nodesscript.js

		//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
		var svg = document.getElementById('canvas');
		var padding = 8;
		var circleRadius = 8;

		/**
		 * Returns a random number between min (inclusive) and max (exclusive)
		 * from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
		 */
		function getRandomArbitrary(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		}

		/**
		 * Returns randomly either "true" or "false" with 50% chance for each one.
		 * @returns {boolean}
		 */
		function getRandomBoolean() {
			return getRandomArbitrary(0, 2) === 1;
		}
		
		//when we execute sleep (...ms), program waits for (...ms)
		function sleep(time) {
			return new Promise(resolve => {
				setTimeout(() => {
					resolve();
				}, time);
			});
		}
		//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
		function pickARandomCirclePosition() {
			var w = parseInt(window.getComputedStyle(svg).width);
			var h = parseInt(window.getComputedStyle(svg).height);
			var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
			var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
			//return an object which has 2 properties, named x,y and value the value of var x,y
			return { x: x, y: y };
		}

		//======================================================================//
		// new code 2019.03.02:
		
		const messages = [
			"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS AND SOCIAL WEB ENTHUSIASTS?",
			"WHY DO WE NEED A DECENTRALIZED NETWORK?",
			"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
			"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
			"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
			"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
			"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
			"IS THE MEDIUM THE MESSAGE?",
			"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
			"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
			"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
			"IS DECENTRALIZATION A PANACEA, OR A PHARMAKON?",
			"IS DECENTRALIZATION ENOUGH?",
			"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
			"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
			"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
			"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
			"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
			"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
			"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
			"WHO MAINTAINS A FEDERATED NETWORK?",
			"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
			"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC AND ECOLOGICAL MEANS?",
		];
		
		const clickedCircles = [];
		const links = [];
		const positions = [];
		
		const positionsFromJson = JSON.parse('[{"x":420,"y":388},{"x":408,"y":269},{"x":356,"y":673},{"x":246,"y":499},{"x":1009,"y":476},{"x":468,"y":399},{"x":714,"y":189},{"x":1336,"y":427},{"x":1307,"y":595},{"x":1496,"y":95},{"x":876,"y":657},{"x":929,"y":373},{"x":356,"y":599},{"x":1375,"y":726},{"x":1293,"y":465},{"x":1512,"y":325},{"x":972,"y":387},{"x":1115,"y":720},{"x":547,"y":85},{"x":663,"y":431},{"x":1583,"y":272},{"x":1019,"y":416},{"x":1500,"y":592}]');
		let positionFromJsonIndex = 0;
		
		class Question {
			constructor(text) {
				// Create property "text".
				this.text = text;

				//const position = pickARandomCirclePosition();
				const position = positionsFromJson[positionFromJsonIndex++];
				positions.push(position);
				
				const htmlCircle = this.createCircle(position);
				const htmlText = this.createText(position, text);
				
				htmlCircle.addEventListener('mouseenter', () => {
					htmlText.style.display = 'block';
				});
				htmlCircle.addEventListener('mouseleave', () => {
					htmlText.style.display = 'none';
				});


				htmlCircle.addEventListener('mouseenter', () => {
					htmlCircle.style.fill = 'red';
				});
				htmlCircle.addEventListener('mouseleave', () => {
					htmlCircle.style.fill = 'black';
				});

				
				htmlCircle.addEventListener('click', () => {
					//if(!clickedCircles.includes(htmlCircle)) {
						clickedCircles.push(htmlCircle);
					//}
					this.linkClickedWithPreviouslyClicked();
					//this.linkClickedWithAllPreviouslyClicked();
				});
			}
			
			createCircle(position) {
				const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
				circle.style.fill = 'black';
				circle.setAttribute('cx', position.x);
				circle.setAttribute('cy', position.y);
				circle.setAttribute('r', circleRadius);
				svg.appendChild(circle);
				return circle;
			}
			
			createText(position, textContent) {
				const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
				text.setAttribute('x', position.x + 2*circleRadius);
				text.setAttribute('y', position.y + circleRadius/2);
				text.textContent = textContent;
				text.style.display = 'none';
				text.style.fontStyle = "italic";
				text.style.fontStyle = "italic";
				text.style.fontFamily = "Courier";
				text.style.fontWeight = "bold";
				text.style.fontSize = "large";
				svg.appendChild(text);
				return text;
			}
			
			createLine(position1, position2) {
				const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
				line.setAttribute('x1', position1.x);
				line.setAttribute('y1', position1.y);
				line.setAttribute('x2', position2.x);
				line.setAttribute('y2', position2.y);
				line.setAttribute('stroke', 'black');
				svg.appendChild(line);
				return line;
			}
			
			linkClickedWithPreviouslyClicked() {
				const length = clickedCircles.length;
				if(length < 2) { return; }
				
				const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
				const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
				
				if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
				
				const htmlLine = this.createLine(circle1Pos, circle2Pos);
				links.push(this.getLinkAsString(circle1Pos, circle2Pos));
			}
			
			
			getCircleCenterPosition(htmlCircle) {
				return {
					x: htmlCircle.cx.baseVal.value,
					y: htmlCircle.cy.baseVal.value,
				};
			}
			
			getLinkAsString(circle1Pos, circle2Pos) {
				const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
				const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
				
				const linkAsString = pos1AsString + "-" + pos2AsString;
				
				return linkAsString;
			}
			
			linkAlreadyExists(circle1Pos, circle2Pos) {
				return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
			}
		}
		
		async function network() {
			for(let i = 0; i < messages.length; i++) {
				const message = messages[i];
				new Question(message);
				
				//"await" works only inside async functions
				const delayBetweenQuestionCreations = 50;
				await sleep(delayBetweenQuestionCreations);
			}
			
			console.log(JSON.stringify(positions));
		}
		network();