diff --git a/08/ArtemisGryllaki/indexold.html b/08/ArtemisGryllaki/indexold.html new file mode 100644 index 0000000..4b5433d --- /dev/null +++ b/08/ArtemisGryllaki/indexold.html @@ -0,0 +1,159 @@ + + + + + Social Networks + + + +

Questions on
Social Networks

+ +
+ +
+ + + \ No newline at end of file diff --git a/08/ArtemisGryllaki/intro1.html b/08/ArtemisGryllaki/intro1.html new file mode 100644 index 0000000..2ef33cf --- /dev/null +++ b/08/ArtemisGryllaki/intro1.html @@ -0,0 +1,282 @@ + + + + + Social Networks + + + + + +

Questions on
(Social) Networks

+ +
+

+ Dear guest,


+

+

+ Welcome to my home. It’s my pleasure to offer you some questions about (social) networks.
Here, you are at the starting point, where you can see 26 questions, which correspond to 26 doors.


+

+

+ You can open a door by clicking on a colourful question, though the grey ones are still locked.
(Apologies, the place is under construction.) Opening a red door will guide you to a different room of this house, while a teal door, will lead you to one of my neighbour’s homes.


+

+

+ Most of the questions came to my mind after the day of our Infrastructour. Generally, they relate to broader social aspects around analogue and digital networks. Trying to respond to them, I started writing small texts to express what led me to these questions, also my thoughts, feelings and memories that came after them. My texts are not finished answers and do not speak only in one voice. I often contradict or doubt myself, which is something I usually do when I write; I find it useful when trying to approach an answer.


+

+

+ There is not one way to navigate through the rooms; you can visit them out of order. Sometimes there are doors from one room to another. Please feel free to walk around, stay in each place as long as you wish, and come back to this starting point, when lost!


+

+

+ May your journey begin! +



+
+ + + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/08/ArtemisGryllaki/nodesscript.js b/08/ArtemisGryllaki/nodesscript.js new file mode 100644 index 0000000..8df15e1 --- /dev/null +++ b/08/ArtemisGryllaki/nodesscript.js @@ -0,0 +1,197 @@ + + //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(); diff --git a/08/ArtemisGryllaki/questionnodes.html b/08/ArtemisGryllaki/questionnodes.html new file mode 100644 index 0000000..3b97e6f --- /dev/null +++ b/08/ArtemisGryllaki/questionnodes.html @@ -0,0 +1,36 @@ + + + + + Question Nodes + + + + + + + + \ No newline at end of file diff --git a/08/ArtemisGryllaki/questions.html b/08/ArtemisGryllaki/questions.html new file mode 100644 index 0000000..8c2e50d --- /dev/null +++ b/08/ArtemisGryllaki/questions.html @@ -0,0 +1,27 @@ + + + + + + Questions on Networks + + + +

+

Questions on Networks

+

Centralized - Decentralized
Federated

+
+
+





+

QUESTIONS

+ +
+ + + +
+ + +