html head style canvas border 1px solid 000 style head body canvas id canvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes 10 Define a decentralized network const decentralizedNetwork name Decentralized Network nodes 10 Define the canvas and context const canvas document getElementById canvas const ctx canvas getContext 2d Function to generate a random position on the canvas function getRandomPosition const x Math random canvas width const y Math random canvas height return x y Function to draw a node on the canvas function drawNode position ctx beginPath ctx arc position x position y 10 0 2 Math PI ctx fillStyle blue ctx fill ctx closePath Function to draw the networks function drawNetwork network ctx font 16px Arial ctx fillText network name 10 20 for let i 0 i network nodes i const position getRandomPosition drawNode position Clear the canvas function clearCanvas ctx clearRect 0 0 canvas width canvas height Compare the networks function compareNetworks networkA networkB clearCanvas drawNetwork networkA drawNetwork networkB Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html let n 10 console log n n 1 2 html head style canvas border 1px solid 000 style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes 10 Define a decentralized network const decentralizedNetwork name Decentralized Network nodes 10 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position ctx beginPath ctx arc position x position y 10 0 2 Math PI ctx fillStyle blue ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes for let i 0 i network nodes i const position getRandomPosition const node x position x y position y nodes push node drawNode ctx position Draw connections for let i 0 i nodes length i for let j i 1 j nodes length j drawConnection ctx nodes i nodes j Clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html DOCTYPE html html head style centralizedCanvas decentralizedCanvas border 1px solid 000 display inline block margin right 20px style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes 10 centralNode 3 Index of the central node zero based Define a decentralized network const decentralizedNetwork name Decentralized Network nodes 10 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position isCentral ctx beginPath ctx arc position x position y 10 0 2 Math PI ctx fillStyle isCentral red blue ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes for let i 0 i network nodes i const position getRandomPosition const node x position x y position y nodes push node drawNode ctx position i network centralNode Draw connections if network centralNode undefined const centralNode nodes network centralNode for let i 0 i nodes length i if i network centralNode drawConnection ctx centralNode nodes i else for let i 0 i nodes length i for let j i 1 j nodes length j drawConnection ctx nodes i nodes j Clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html html head style centralizedCanvas decentralizedCanvas border 1px solid 000 display inline block margin right 20px style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes 10 centralNode 3 Index of the central node zero based Define a decentralized network const decentralizedNetwork name Decentralized Network nodes 10 connectivity 0 5 Adjust the connectivity value 0 to 1 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position isCentral ctx beginPath ctx arc position x position y 10 0 2 Math PI ctx fillStyle isCentral red blue ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes for let i 0 i network nodes i const position getRandomPosition const node x position x y position y nodes push node drawNode ctx position i network centralNode Draw connections if network centralNode undefined const centralNode nodes network centralNode for let i 0 i nodes length i if i network centralNode drawConnection ctx centralNode nodes i else for let i 0 i nodes length i for let j i 1 j nodes length j if Math random network connectivity drawConnection ctx nodes i nodes j Clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html html head style centralizedCanvas decentralizedCanvas border 1px solid 000 display inline block margin right 20px style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes 10 centralNode 3 Index of the central node zero based Define a decentralized network const decentralizedNetwork name Decentralized Network nodes 10 connectivity 0 2 Adjust the connectivity value 0 to 1 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position isCentral isConnected ctx beginPath ctx arc position x position y 10 0 2 Math PI if isCentral ctx fillStyle red else if isConnected ctx fillStyle blue else ctx fillStyle gray ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes for let i 0 i network nodes i const position getRandomPosition const node x position x y position y nodes push node drawNode ctx position i network centralNode false Draw connections if network centralNode undefined const centralNode nodes network centralNode drawNode ctx centralNode true false for let i 0 i nodes length i if i network centralNode const currentNode nodes i drawConnection ctx centralNode currentNode drawNode ctx currentNode false true else const connectedNodes new Set for let i 0 i nodes length i for let j i 1 j nodes length j if Math random network connectivity const nodeA nodes i const nodeB nodes j drawConnection ctx nodeA nodeB connectedNodes add i connectedNodes add j for let i 0 i nodes length i const currentNode nodes i if connectedNodes has i drawNode ctx currentNode false true else drawNode ctx currentNode false false Clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html html head style centralizedCanvas decentralizedCanvas border 1px solid 000 display inline block margin right 20px style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes new Array 10 centralNode 3 Index of the central node zero based disconnectedNodeProbability 0 05 Probability of a node getting disconnected 0 to 1 reconnectAttemptProbability 0 1 Probability of a disconnected node attempting to reconnect 0 to 1 Define a decentralized network const decentralizedNetwork name Decentralized Network nodes new Array 10 connectivity 0 5 Adjust the connectivity value 0 to 1 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position isCentral isConnected ctx beginPath ctx arc position x position y 10 0 2 Math PI if isCentral ctx fillStyle red else if isConnected ctx fillStyle blue else ctx fillStyle gray ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes network nodes for let i 0 i nodes length i const node nodes i const position node position x 0 y 0 Ensure position is defined const isConnected node connected drawNode ctx position i network centralNode isConnected Draw connections console log nodes network centralNode console log network centralNode console log nodes network centralNode nodes network centralNode return if network centralNode undefined const centralNode nodes 0 const centralPosition centralNode position x 0 y 0 Ensure position is defined drawNode ctx centralPosition true false for let i 0 i nodes length i if i network centralNode const currentNode nodes i const currentPosition currentNode position x 0 y 0 Ensure position is defined if currentNode connected drawConnection ctx centralPosition currentPosition drawNode ctx currentPosition false currentNode connected Simulate occasional disconnections and reconnections for let i 0 i nodes length i if i network centralNode const node nodes i if Math random centralizedNetwork disconnectedNodeProbability Disconnect the node node connected false else Reconnect the node with a probability if node connected Math random centralizedNetwork reconnectAttemptProbability node connected true else const connectedNodes new Set for let i 0 i nodes length i for let j i 1 j nodes length j if Math random network connectivity const nodeA nodes i const nodeB nodes j const positionA nodeA position x 0 y 0 Ensure position is defined const positionB nodeB position x 0 y 0 Ensure position is defined drawConnection ctx positionA positionB connectedNodes add i connectedNodes add j for let i 0 i nodes length i if connectedNodes has i const node nodes i const position node position x 0 y 0 Ensure position is defined drawNode ctx position false false Function to clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Function to update node positions function updateNodePositions nodes for let i 0 i nodes length i let node nodes i if nodes i undefined nodes i const dx Math random 4 2 Random x velocity 2 to 2 const dy Math random 4 2 Random y velocity 2 to 2 if nodes i position undefined nodes i position x dx 100 y dy 100 if nodes i y undefined nodes i position x 0 y 0 nodes i position x dx nodes i position y dy Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx updateNodePositions networkA nodes updateNodePositions networkB nodes drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx requestAnimationFrame compareNetworks networkA networkB function update compareNetworks centralizedNetwork decentralizedNetwork Compare the networks initially setInterval update 800 script body html
if i network centralNode drawConnection ctx centralNode nodes i else for let i 0 i nodes length i for let j i 1 j nodes length j if Math random network connectivity drawConnection ctx nodes i nodes j Clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html html head style centralizedCanvas decentralizedCanvas border 1px solid 000 display inline block margin right 20px style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes 10 centralNode 3 Index of the central node zero based Define a decentralized network const decentralizedNetwork name Decentralized Network nodes 10 connectivity 0 2 Adjust the connectivity value 0 to 1 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position isCentral isConnected ctx beginPath ctx arc position x position y 10 0 2 Math PI if isCentral ctx fillStyle red else if isConnected ctx fillStyle blue else ctx fillStyle gray ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes for let i 0 i network nodes i const position getRandomPosition const node x position x y position y nodes push node drawNode ctx position i network centralNode false Draw connections if network centralNode undefined const centralNode nodes network centralNode drawNode ctx centralNode true false for let i 0 i nodes length i if i network centralNode const currentNode nodes i drawConnection ctx centralNode currentNode drawNode ctx currentNode false true else const connectedNodes new Set for let i 0 i nodes length i for let j i 1 j nodes length j if Math random network connectivity const nodeA nodes i const nodeB nodes j drawConnection ctx nodeA nodeB connectedNodes add i connectedNodes add j for let i 0 i nodes length i const currentNode nodes i if connectedNodes has i drawNode ctx currentNode false true else drawNode ctx currentNode false false Clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx Compare the networks initially compareNetworks centralizedNetwork decentralizedNetwork Compare the networks on button click const compareButton document createElement button compareButton textContent Compare Networks compareButton addEventListener click function compareNetworks centralizedNetwork decentralizedNetwork document body appendChild compareButton script body html html head style centralizedCanvas decentralizedCanvas border 1px solid 000 display inline block margin right 20px style head body canvas id centralizedCanvas width 500 height 500 canvas canvas id decentralizedCanvas width 500 height 500 canvas script Define a centralized network const centralizedNetwork name Centralized Network nodes new Array 10 centralNode 3 Index of the central node zero based disconnectedNodeProbability 0 05 Probability of a node getting disconnected 0 to 1 reconnectAttemptProbability 0 1 Probability of a disconnected node attempting to reconnect 0 to 1 Define a decentralized network const decentralizedNetwork name Decentralized Network nodes new Array 10 connectivity 0 5 Adjust the connectivity value 0 to 1 Define the canvas and context for the centralized network const centralizedCanvas document getElementById centralizedCanvas const centralizedCtx centralizedCanvas getContext 2d centralizedCtx translate 250 250 Center the drawing on the canvas Define the canvas and context for the decentralized network const decentralizedCanvas document getElementById decentralizedCanvas const decentralizedCtx decentralizedCanvas getContext 2d decentralizedCtx translate 250 250 Center the drawing on the canvas Function to generate a random position on the canvas function getRandomPosition const x Math random 200 100 Random position within a smaller area const y Math random 200 100 Random position within a smaller area return x y Function to draw a node on the canvas function drawNode ctx position isCentral isConnected ctx beginPath ctx arc position x position y 10 0 2 Math PI if isCentral ctx fillStyle red else if isConnected ctx fillStyle blue else ctx fillStyle gray ctx fill ctx closePath Function to draw a connection between two nodes on the canvas function drawConnection ctx nodeA nodeB ctx beginPath ctx moveTo nodeA x nodeA y ctx lineTo nodeB x nodeB y ctx strokeStyle blue ctx stroke ctx closePath Function to draw the networks function drawNetwork network ctx ctx font 16px Arial ctx fillText network name 220 220 const nodes network nodes for let i 0 i nodes length i const node nodes i const position node position x 0 y 0 Ensure position is defined const isConnected node connected drawNode ctx position i network centralNode isConnected Draw connections console log nodes network centralNode console log network centralNode console log nodes network centralNode nodes network centralNode return if network centralNode undefined const centralNode nodes 0 const centralPosition centralNode position x 0 y 0 Ensure position is defined drawNode ctx centralPosition true false for let i 0 i nodes length i if i network centralNode const currentNode nodes i const currentPosition currentNode position x 0 y 0 Ensure position is defined if currentNode connected drawConnection ctx centralPosition currentPosition drawNode ctx currentPosition false currentNode connected Simulate occasional disconnections and reconnections for let i 0 i nodes length i if i network centralNode const node nodes i if Math random centralizedNetwork disconnectedNodeProbability Disconnect the node node connected false else Reconnect the node with a probability if node connected Math random centralizedNetwork reconnectAttemptProbability node connected true else const connectedNodes new Set for let i 0 i nodes length i for let j i 1 j nodes length j if Math random network connectivity const nodeA nodes i const nodeB nodes j const positionA nodeA position x 0 y 0 Ensure position is defined const positionB nodeB position x 0 y 0 Ensure position is defined drawConnection ctx positionA positionB connectedNodes add i connectedNodes add j for let i 0 i nodes length i if connectedNodes has i const node nodes i const position node position x 0 y 0 Ensure position is defined drawNode ctx position false false Function to clear the canvas function clearCanvas ctx ctx clearRect 250 250 500 500 Function to update node positions function updateNodePositions nodes for let i 0 i nodes length i let node nodes i if nodes i undefined nodes i const dx Math random 4 2 Random x velocity 2 to 2 const dy Math random 4 2 Random y velocity 2 to 2 if nodes i position undefined nodes i position x dx 100 y dy 100 if nodes i y undefined nodes i position x 0 y 0 nodes i position x dx nodes i position y dy Compare the networks function compareNetworks networkA networkB clearCanvas centralizedCtx clearCanvas decentralizedCtx updateNodePositions networkA nodes updateNodePositions networkB nodes drawNetwork networkA centralizedCtx drawNetwork networkB decentralizedCtx requestAnimationFrame compareNetworks networkA networkB function update compareNetworks centralizedNetwork decentralizedNetwork Compare the networks initially setInterval update 800 script body html