{"id":242,"date":"2016-11-09T22:50:43","date_gmt":"2016-11-09T22:50:43","guid":{"rendered":"https:\/\/oceanwp.org\/architect\/?page_id=242"},"modified":"2022-03-08T16:33:13","modified_gmt":"2022-03-08T16:33:13","slug":"home","status":"publish","type":"page","link":"https:\/\/www.inforarte.com\/interactive\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tApps & Multimedia<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWeb Development<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInteractive Devices<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInteractive Archviz<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t \r\n \r\n Babylon Template<\/title>\r\n\r\n <style>\r\n body {\r\n resize: auto;\r\n text-align: center;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n \r\n }\r\n <\/style>\r\n <\/head>\r\n \r\n\t<canvas>\r\n\t \r\n <script>\r\n\r\n\r\n\r\n\/\/ Global Variables\r\nvar DIRECTION = {\r\n\tIDLE: 0,\r\n\tUP: 1,\r\n\tDOWN: 2,\r\n\tLEFT: 3,\r\n\tRIGHT: 4\r\n};\r\n\r\nvar rounds = [1000, 1000, 3, 3, 2];\r\nvar colors = ['#1abc9c', '#2ecc71', '#3498db', '#e74c3c', '#9b59b6'];\r\n\r\n\/\/ The ball object (The cube that bounces back and forth)\r\nvar Ball = {\r\n\tnew: function (incrementedSpeed) {\r\n\t\treturn {\r\n\t\t\twidth: 18,\r\n\t\t\theight: 18,\r\n\t\t\tx: (this.canvas.width \/ 2) - 9,\r\n\t\t\ty: (this.canvas.height \/ 2) - 9,\r\n\t\t\tmoveX: DIRECTION.IDLE,\r\n\t\t\tmoveY: DIRECTION.IDLE,\r\n\t\t\tspeed: incrementedSpeed || 9\r\n\t\t};\r\n\t}\r\n};\r\n\r\n\/\/ The paddle object (The two lines that move up and down)\r\nvar Paddle = {\r\n\tnew: function (side) {\r\n\t\treturn {\r\n\t\t\twidth: 18,\r\n\t\t\theight: 70,\r\n\t\t\tx: side === 'left' ? 150 : this.canvas.width - 150,\r\n\t\t\ty: (this.canvas.height \/ 2) - 35,\r\n\t\t\tscore: 1000,\r\n\t\t\tmove: DIRECTION.IDLE,\r\n\t\t\tspeed: 10\r\n\t\t};\r\n\t}\r\n};\r\n\r\nvar Game = {\r\n\tinitialize: function () {\r\n\t\tthis.canvas = document.querySelector('canvas');\r\n\t\tthis.context = this.canvas.getContext('2d');\r\n\r\n\t\tthis.canvas.width = 1300;\r\n\t\tthis.canvas.height = 1000;\r\n\r\n\r\n\r\n\r\n\t\tthis.canvas.style.width = (this.canvas.width \/ 2) + 'px';\r\n\t\tthis.canvas.style.height = (this.canvas.height \/ 2) + 'px';\r\n\r\n\t\tthis.player = Paddle.new.call(this, 'left');\r\n\t\tthis.paddle = Paddle.new.call(this, 'right');\r\n\t\tthis.ball = Ball.new.call(this);\r\n\r\n\t\tthis.paddle.speed = 8;\r\n\t\tthis.running = this.over = false;\r\n\t\tthis.turn = this.paddle;\r\n\t\tthis.timer = this.round = 0;\r\n\t\tthis.color = '#2c3e50';\r\n\r\n\t\tPong.menu();\r\n\t\tPong.listen();\r\n\t},\r\n\r\n\tendGameMenu: function (text) {\r\n\t\t\/\/ Change the canvas font size and color\r\n\t\tPong.context.font = '50px Courier New';\r\n\t\tPong.context.fillStyle = this.color;\r\n\r\n\t\t\/\/ Draw the rectangle behind the 'Press any key to begin' text.\r\n\/\/\t\tPong.context.fillRect(\r\n\/\/\t\t\tPong.canvas.width \/ 2 - 350,\r\n\/\/\t\t\tPong.canvas.height \/ 2 - 48,\r\n\/\/\t\t\t700,\r\n\/\/\t\t\t100\r\n\/\/\t\t);\r\n\r\n\t\t\/\/ Change the canvas color;\r\n\t\tPong.context.fillStyle = '#ffffff';\r\n\r\n\t\t\/\/ Draw the end game menu text ('Game Over' and 'Winner')\r\n\/\/\t\tPong.context.fillText(text,\r\n\/\/\t\t\tPong.canvas.width \/ 2,\r\n\/\/\t\t\tPong.canvas.height \/ 2 + 15\r\n\/\/\t\t);\r\n\r\n\t\tsetTimeout(function () {\r\n\t\t\tPong = Object.assign({}, Game);\r\n\t\t\tPong.initialize();\r\n\t\t}, 3000);\r\n\t},\r\n\r\n\tmenu: function () {\r\n\t\t\/\/ Draw all the Pong objects in their current state\r\n\t\tPong.draw();\r\n\r\n\t\t\/\/ Change the canvas font size and color\r\n\t\tthis.context.font = '50px Courier New';\r\n\t\tthis.context.fillStyle = '#000000';\r\n\r\n\t\t\/\/ Draw the rectangle behind the 'Press any key to begin' text.\r\n\t\tthis.context.fillRect(\r\n\t\t\tthis.canvas.width \/ 2 - 350,\r\n\t\t\tthis.canvas.height \/ 2 - 48,\r\n\t\t\t700,\r\n\t\t\t100\r\n\t\t);\r\n\r\n\t\t\/\/ Change the canvas color;\r\n\t\tthis.context.fillStyle = '#ffffff';\r\n\r\n\t\/\/\t Draw the 'press any key to begin' text\r\n\t\tthis.context.fillText('Use \"W\" and \"S\" Keys to Play',\r\n\t\t\tthis.canvas.width \/ 2,\r\n\t\t\tthis.canvas.height \/ 2 + 15\r\n\t\t);\r\n\t},\r\n\r\n\t\/\/ Update all objects (move the player, paddle, ball, increment the score, etc.)\r\n\tupdate: function () {\r\n\t\tif (!this.over) {\r\n\t\t\t\/\/ If the ball collides with the bound limits - correct the x and y coords.\r\n\t\t\tif (this.ball.x <= 0) Pong._resetTurn.call(this, this.paddle, this.player);\r\n\t\t\tif (this.ball.x >= this.canvas.width - this.ball.width) Pong._resetTurn.call(this, this.player, this.paddle);\r\n\t\t\tif (this.ball.y <= 0) this.ball.moveY = DIRECTION.DOWN;\r\n\t\t\tif (this.ball.y >= this.canvas.height - this.ball.height) this.ball.moveY = DIRECTION.UP;\r\n\r\n\t\t\t\/\/ Move player if they player.move value was updated by a keyboard event\r\n\t\t\tif (this.player.move === DIRECTION.UP) this.player.y -= this.player.speed;\r\n\t\t\telse if (this.player.move === DIRECTION.DOWN) this.player.y += this.player.speed;\r\n\t\t\t\r\n\r\n\t\t\t\/\/ On new serve (start of each turn) move the ball to the correct side\r\n\t\t\t\/\/ and randomize the direction to add some challenge.\r\n\t\t\tif (Pong._turnDelayIsOver.call(this) && this.turn) {\r\n\t\t\t\tthis.ball.moveX = this.turn === this.player ? DIRECTION.LEFT : DIRECTION.RIGHT;\r\n\t\t\t\tthis.ball.moveY = [DIRECTION.UP, DIRECTION.DOWN][Math.round(Math.random())];\r\n\t\t\t\tthis.ball.y = Math.floor(Math.random() * this.canvas.height - 200) + 200;\r\n\t\t\t\tthis.turn = null;\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ If the player collides with the bound limits, update the x and y coords.\r\n\t\t\tif (this.player.y <= 0) this.player.y = 0;\r\n\t\t\telse if (this.player.y >= (this.canvas.height - this.player.height)) this.player.y = (this.canvas.height - this.player.height);\r\n\r\n\t\t\t\/\/ Move ball in intended direction based on moveY and moveX values\r\n\t\t\tif (this.ball.moveY === DIRECTION.UP) this.ball.y -= (this.ball.speed \/ 1.5);\r\n\t\t\telse if (this.ball.moveY === DIRECTION.DOWN) this.ball.y += (this.ball.speed \/ 1.5);\r\n\t\t\tif (this.ball.moveX === DIRECTION.LEFT) this.ball.x -= this.ball.speed;\r\n\t\t\telse if (this.ball.moveX === DIRECTION.RIGHT) this.ball.x += this.ball.speed;\r\n\r\n\t\t\t\/\/ Handle paddle (AI) UP and DOWN movement\r\n\t\t\tif (this.paddle.y > this.ball.y - (this.paddle.height \/ 2)) {\r\n\t\t\t\tif (this.ball.moveX === DIRECTION.RIGHT) this.paddle.y -= this.paddle.speed \/ 1.5;\r\n\t\t\t\telse this.paddle.y -= this.paddle.speed \/ 4;\r\n\t\t\t}\r\n\t\t\tif (this.paddle.y < this.ball.y - (this.paddle.height \/ 2)) {\r\n\t\t\t\tif (this.ball.moveX === DIRECTION.RIGHT) this.paddle.y += this.paddle.speed \/ 1.5;\r\n\t\t\t\telse this.paddle.y += this.paddle.speed \/ 4;\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Handle paddle (AI) wall collision\r\n\t\t\tif (this.paddle.y >= this.canvas.height - this.paddle.height) this.paddle.y = this.canvas.height - this.paddle.height;\r\n\t\t\telse if (this.paddle.y <= 0) this.paddle.y = 0;\r\n\r\n\t\t\t\/\/ Handle Player-Ball collisions\r\n\t\t\tif (this.ball.x - this.ball.width <= this.player.x && this.ball.x >= this.player.x - this.player.width) {\r\n\t\t\t\tif (this.ball.y <= this.player.y + this.player.height && this.ball.y + this.ball.height >= this.player.y) {\r\n\t\t\t\t\tthis.ball.x = (this.player.x + this.ball.width);\r\n\t\t\t\t\tthis.ball.moveX = DIRECTION.RIGHT;\r\n\r\n\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Handle paddle-ball collision\r\n\t\t\tif (this.ball.x - this.ball.width <= this.paddle.x && this.ball.x >= this.paddle.x - this.paddle.width) {\r\n\t\t\t\tif (this.ball.y <= this.paddle.y + this.paddle.height && this.ball.y + this.ball.height >= this.paddle.y) {\r\n\t\t\t\t\tthis.ball.x = (this.paddle.x - this.ball.width);\r\n\t\t\t\t\tthis.ball.moveX = DIRECTION.LEFT;\r\n\r\n\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\/\/ Handle the end of round transition\r\n\t\t\/\/ Check to see if the player won the round.\r\n\t\tif (this.player.score === rounds[this.round]) {\r\n\t\t\t\/\/ Check to see if there are any more rounds\/levels left and display the victory screen if\r\n\t\t\t\/\/ there are not.\r\n\t\t\tif (!rounds[this.round + 1]) {\r\n\t\t\t\tthis.over = true;\r\n\t\t\t\tsetTimeout(function () { Pong.endGameMenu('Winner!'); }, 1000);\r\n\t\t\t} else {\r\n\t\t\t\t\/\/ If there is another round, reset all the values and increment the round number.\r\n\t\t\t\tthis.color = this._generateRoundColor();\r\n\t\t\t\tthis.player.score = this.paddle.score = 0;\r\n\t\t\t\tthis.player.speed += 0.5;\r\n\t\t\t\tthis.paddle.speed += 1;\r\n\t\t\t\tthis.ball.speed += 1;\r\n\t\t\t\tthis.round += 1;\r\n\r\n\t\t\t\r\n\t\t\t}\r\n\t\t}\r\n\t\t\/\/ Check to see if the paddle\/AI has won the round.\r\n\t\telse if (this.paddle.score === rounds[this.round]) {\r\n\t\t\tthis.over = true;\r\n\t\t\tsetTimeout(function () { Pong.endGameMenu('Game Over!'); }, 1000);\r\n\t\t}\r\n\t},\r\n\r\n\t\/\/ Draw the objects to the canvas element\r\n\tdraw: function () {\r\n\t\t\/\/ Clear the Canvas\r\n\t\tthis.context.clearRect(\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\tthis.canvas.width,\r\n\t\t\tthis.canvas.height\r\n\t\t);\r\n\r\n\t\t\/\/ Set the fill style to black\r\n\t\tthis.context.fillStyle = '#000000';\r\n\r\n\t\t\/\/ Draw the background\r\n\t\tthis.context.fillRect(\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\tthis.canvas.width,\r\n\t\t\tthis.canvas.height\r\n\t\t);\r\n\r\n\t\t\/\/ Set the fill style to white (For the paddles and the ball)\r\n\t\tthis.context.fillStyle = '#ffffff';\r\n\r\n\t\t\/\/ Draw the Player\r\n\t\tthis.context.fillRect(\r\n\t\t\tthis.player.x,\r\n\t\t\tthis.player.y,\r\n\t\t\tthis.player.width,\r\n\t\t\tthis.player.height\r\n\t\t);\r\n\r\n\t\t\/\/ Draw the Paddle\r\n\t\tthis.context.fillRect(\r\n\t\t\tthis.paddle.x,\r\n\t\t\tthis.paddle.y,\r\n\t\t\tthis.paddle.width,\r\n\t\t\tthis.paddle.height\r\n\t\t);\r\n\r\n\t\t\/\/ Draw the Ball\r\n\t\tif (Pong._turnDelayIsOver.call(this)) {\r\n\t\t\tthis.context.fillRect(\r\n\t\t\t\tthis.ball.x,\r\n\t\t\t\tthis.ball.y,\r\n\t\t\t\tthis.ball.width,\r\n\t\t\t\tthis.ball.height\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t\/\/ Draw the net (Line in the middle)\r\n\t\tthis.context.beginPath();\r\n\t\tthis.context.setLineDash([7, 15]);\r\n\t\tthis.context.moveTo((this.canvas.width \/ 2), this.canvas.height - 140);\r\n\t\tthis.context.lineTo((this.canvas.width \/ 2), 140);\r\n\t\tthis.context.lineWidth = 10;\r\n\t\tthis.context.strokeStyle = '#ffffff';\r\n\t\tthis.context.stroke();\r\n\r\n\t\t\/\/ Set the default canvas font and align it to the center\r\n\t\tthis.context.font = '100px Courier New';\r\n\t\tthis.context.textAlign = 'center';\r\n\r\n\t\t\/\/ Draw the players score (left)\r\n\t\/\/\tthis.context.fillText(\r\n\t\/\/\t\tthis.player.score.toString(),\r\n\t\/\/\t\t(this.canvas.width \/ 2) - 300,\r\n\t\/\/\t\t200\r\n\t\/\/\t);\r\n\r\n\t\/\/\t\/\/ Draw the paddles score (right)\r\n\t\/\/\tthis.context.fillText(\r\n\t\/\/\t\tthis.paddle.score.toString(),\r\n\t\/\/\t\t(this.canvas.width \/ 2) + 300,\r\n\t\/\/\t\t200\r\n\t\/\/\t);\r\n\r\n\t\t\/\/ Change the font size for the center score text\r\n\t\tthis.context.font = '30px Courier New';\r\n\r\n\/\/\t\t\/\/ Draw the winning score (center)\r\n\/\/\t\tthis.context.fillText(\r\n\/\/\t\t\t'Round ' + (Pong.round + 1),\r\n\/\/\t\t\t(this.canvas.width \/ 2),\r\n\/\/\t\t\t35\r\n\/\/\t\t);\r\n\r\n\t\t\/\/ Change the font size for the center score value\r\n\t\tthis.context.font = '40px Courier';\r\n\r\n\t\t\/\/ Draw the current round number\r\n\t\/\/\tthis.context.fillText(\r\n\t\t\/\/\trounds[Pong.round] ? rounds[Pong.round] : \/\/ rounds[Pong.round - 1],\r\n\t\t\/\/\t(this.canvas.width \/ 2),\r\n\t\/\/\t\t100\r\n\/\/\t\t);\r\n\t},\r\n\r\n\tloop: function () {\r\n\t\tPong.update();\r\n\t\tPong.draw();\r\n\r\n\t\t\/\/ If the game is not over, draw the next frame.\r\n\t\tif (!Pong.over) requestAnimationFrame(Pong.loop);\r\n\t},\r\n\r\n\r\n\r\n\tlisten: function () {\r\n\t\tdocument.addEventListener('keydown', function (key) {\r\n\t\t\t\/\/ Handle the 'Press any key to begin' function and start the game.\r\n\t\t\tif (Pong.running === false) {\r\n\t\t\t\tPong.running = true;\r\n\t\t\t\twindow.requestAnimationFrame(Pong.loop);\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Handle up arrow and w key events\r\n\t\/\/\t\tif (key.keyCode === 38 || key.keyCode === 87) Pong.player.move = DIRECTION.UP;\r\n\r\n\t\t\t\/\/ Handle down arrow and s key events\r\n\t\/\/\t\tif (key.keyCode === 40 || key.keyCode === 83) Pong.player.move = DIRECTION.DOWN;\r\n\t\t\t\r\n\t\t\t\t\/\/ Handle up arrow and w key events\r\n\t\t\tif (key.keyCode === null || key.keyCode === 87) Pong.player.move = DIRECTION.UP;\r\n\r\n\t\t\t\/\/ Handle down arrow and s key events\r\n\t\t\tif (key.keyCode === null|| key.keyCode === 83) Pong.player.move = DIRECTION.DOWN;\r\n\t\t\t\r\n\t\t});\r\n\r\n\r\n\t\t\/\/ Stop the player from moving when there are no keys being pressed.\r\n\t\tdocument.addEventListener('keyup', function (key) { Pong.player.move = DIRECTION.IDLE; });\r\n\t},\r\n\r\n\t\/\/ Reset the ball location, the player turns and set a delay before the next round begins.\r\n\t_resetTurn: function(victor, loser) {\r\n\t\tthis.ball = Ball.new.call(this, this.ball.speed);\r\n\t\tthis.turn = loser;\r\n\t\tthis.timer = (new Date()).getTime();\r\n\r\n\t\tvictor.score++;\r\n\t\r\n\t},\r\n\r\n\t\/\/ Wait for a delay to have passed after each turn.\r\n\t_turnDelayIsOver: function() {\r\n\t\treturn ((new Date()).getTime() - this.timer >= 1000);\r\n\t},\r\n\r\n\t\/\/ Select a random color as the background of each level\/round.\r\n\t\t_generateRoundColor: function () {\r\n\t\t\tvar newColor = colors[Math.floor(Math.random() * \t colors.length)];\r\n\t\t\tif (newColor === this.color) return Pong._generateRoundColor();\r\n\t\t\treturn newColor;\r\n\t\t}\r\n};\r\n\r\nvar Pong = Object.assign({}, Game);\r\nPong.initialize();\r\n\r\n\r\n <\/script>\r\n<\/canvas>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Apps & Multimedia Web Development Interactive Devices Interactive Archviz Babylon Template<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Home - InforArte InterActive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inforarte.com\/interactive\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - InforArte InterActive\" \/>\n<meta property=\"og:description\" content=\"Apps & Multimedia Web Development Interactive Devices Interactive Archviz Babylon Template\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inforarte.com\/interactive\/\" \/>\n<meta property=\"og:site_name\" content=\"InforArte InterActive\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-08T16:33:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inforarte.com\/interactive\/wp-content\/uploads\/sites\/5\/2020\/11\/app-multimedia-150x150.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inforarte.com\/interactive\/\",\"url\":\"https:\/\/www.inforarte.com\/interactive\/\",\"name\":\"Home - InforArte InterActive\",\"isPartOf\":{\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#website\"},\"datePublished\":\"2016-11-09T22:50:43+00:00\",\"dateModified\":\"2022-03-08T16:33:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inforarte.com\/interactive\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inforarte.com\/interactive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#website\",\"url\":\"https:\/\/www.inforarte.com\/interactive\/\",\"name\":\"InforArte InterActive\",\"description\":\"Just another InforArte site\",\"publisher\":{\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inforarte.com\/interactive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#organization\",\"name\":\"InforArte InterActive\",\"url\":\"https:\/\/www.inforarte.com\/interactive\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inforarte.com\/interactive\/wp-content\/uploads\/sites\/5\/2020\/11\/Logo_InforArte_Interactive_white-01.png\",\"contentUrl\":\"https:\/\/www.inforarte.com\/interactive\/wp-content\/uploads\/sites\/5\/2020\/11\/Logo_InforArte_Interactive_white-01.png\",\"width\":3175,\"height\":1771,\"caption\":\"InforArte InterActive\"},\"image\":{\"@id\":\"https:\/\/www.inforarte.com\/interactive\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - InforArte InterActive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inforarte.com\/interactive\/","og_locale":"sv_SE","og_type":"article","og_title":"Home - InforArte InterActive","og_description":"Apps & Multimedia Web Development Interactive Devices Interactive Archviz Babylon Template","og_url":"https:\/\/www.inforarte.com\/interactive\/","og_site_name":"InforArte InterActive","article_modified_time":"2022-03-08T16:33:13+00:00","og_image":[{"url":"https:\/\/www.inforarte.com\/interactive\/wp-content\/uploads\/sites\/5\/2020\/11\/app-multimedia-150x150.jpg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.inforarte.com\/interactive\/","url":"https:\/\/www.inforarte.com\/interactive\/","name":"Home - InforArte InterActive","isPartOf":{"@id":"https:\/\/www.inforarte.com\/interactive\/#website"},"datePublished":"2016-11-09T22:50:43+00:00","dateModified":"2022-03-08T16:33:13+00:00","breadcrumb":{"@id":"https:\/\/www.inforarte.com\/interactive\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inforarte.com\/interactive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inforarte.com\/interactive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inforarte.com\/interactive\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/www.inforarte.com\/interactive\/#website","url":"https:\/\/www.inforarte.com\/interactive\/","name":"InforArte InterActive","description":"Just another InforArte site","publisher":{"@id":"https:\/\/www.inforarte.com\/interactive\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inforarte.com\/interactive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/www.inforarte.com\/interactive\/#organization","name":"InforArte InterActive","url":"https:\/\/www.inforarte.com\/interactive\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/www.inforarte.com\/interactive\/#\/schema\/logo\/image\/","url":"https:\/\/www.inforarte.com\/interactive\/wp-content\/uploads\/sites\/5\/2020\/11\/Logo_InforArte_Interactive_white-01.png","contentUrl":"https:\/\/www.inforarte.com\/interactive\/wp-content\/uploads\/sites\/5\/2020\/11\/Logo_InforArte_Interactive_white-01.png","width":3175,"height":1771,"caption":"InforArte InterActive"},"image":{"@id":"https:\/\/www.inforarte.com\/interactive\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/pages\/242"}],"collection":[{"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/comments?post=242"}],"version-history":[{"count":219,"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/pages\/242\/revisions"}],"predecessor-version":[{"id":1007,"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/pages\/242\/revisions\/1007"}],"wp:attachment":[{"href":"https:\/\/www.inforarte.com\/interactive\/wp-json\/wp\/v2\/media?parent=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}