\n \n \n 
\n
\n ,\n rowRef.current\n )\n )\n } else {\n return (<>)\n }\n};\n\nexport default Drawer;\n","import LazyLoad from 'react-lazy-load';\n\nconst Slide = ({\n slideId,\n title,\n url,\n info,\n show,\n setShow,\n rowRef,\n row,\n screenshot\n}) => {\n return (\n \n x\n
\n }\n\n \n )\n};\n\nexport default Slide;\n","import Slide from './Slide';\nimport { forwardRef } from 'react';\n\nconst SlidesRow = forwardRef(({\n row,\n setShow,\n slidesPerRows,\n show,\n slides\n}, ref) => (\n \n {\n slides.map((link, i) =>\n setShow(current ? [row, i] :[])}\n row={row}\n screenshot={link.screenshot}\n slidesPerRows={slidesPerRows}\n />\n )\n }\n \n
\n));\n\nexport default SlidesRow;\n","import { useRef, createRef } from 'react';\nimport { linksToRows } from './../../utils';\n\nimport Drawer from './Drawer';\nimport SlidesRow from './SlidesRow';\n\nconst SlideViewer = ({ slidesPerRow, references, show, setShow, toggleFilters }) => {\n const [row, col] = show;\n\n const rows = linksToRows(references, slidesPerRow);\n\n const rowRefs = useRef([]);\n rowRefs.current = rows.map((_, i) => rowRefs.current[i] ?? createRef());\n\n const isDrawerOpen = (row > -1) && (rowRefs.current[row]);\n\n return (\n \n <>\n {\n rows.map((row, i) => (\n
\n );\n}\n\nexport default SlideViewer;\n","import { createContext, useReducer, useState, useEffect } from 'react';\nimport { filtersReducer } from './../../reducers';\nimport { filterReferences } from './../../utils';\nimport SlideViewer from './SlideViewer';\nimport { Filters } from './Filters';\nimport './Explorer.css';\n\nconst Context = createContext({\n activeFilters: [],\n toggleFilters: () => {},\n});\n\nconst withContext = (El) => (props) =>\n \n {type}\n
;\n\n return (\n <>\n {\n linksToRows(Object.keys(availableFilters), 2).map((filters, index) => \n {\n filters.map((filter) => {\n const isActive = activeFilters[type].find(x => x === filter);\n const onClick = !isActive ?\n () => {\n addFilter(type)(filter);\n setShow([-1, -1]);\n } : () => {\n removeFilter(type)(filter);\n setShow([-1, -1]);\n }\n\n return (\n \n \n {\n filter\n }\n \n \n )\n })\n }\n
\n \n\t\t\t
\n\t);\n};\n\nexport default Tabs;\n","import { useEffect, useRef, useCallback, useMemo } from 'react';\n\nconst Static = ({ width, height }) => {\n const size = useMemo(() => ({ width, height}), [width, height]);\n const canvasRef = useRef(null);\n const requestIdRef = useRef(null);\n\n const tick = useCallback(() => {\n requestIdRef.current = requestAnimationFrame(tick);\n if (canvasRef.current) {\n const canvasContext = canvasRef.current.getContext('2d');\n const imageData = canvasContext.createImageData(size.width, size.height);\n for (var i = 0, a = imageData.data.length; i < a; i++) {\n imageData.data[i] = (Math.random() * 255)|0;\n }\n canvasContext.putImageData(imageData, 0, 0);\n }\n }, [size]);\n\n useEffect(() => {\n requestIdRef.current = requestAnimationFrame(tick);\n return () => {\n cancelAnimationFrame(requestIdRef.current);\n };\n }, [tick]);\n\n return ;\n};\n\nexport default Static;\n\n","import React from \"react\";\nimport './youtube.css';\n\nconst YoutubeEmbed = ({ embedId }) => (\n \n\t\t\t\t{\n\t\t\t\t\ttabs.map((tab, index) => (\n\t\t\t\t\t\t setActiveTab(index)}\n\t\t\t\t\t\t\tclassName={`tabs__tab-button ${ tabActive === index ? 'tabs__tab-button--active' : '' }`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttab.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t
\n\t\t\t\n\t\t\t\t
\n\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\t\tReact.Children.toArray(children)[tabActive]\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\n
\n);\n\n\nexport default YoutubeEmbed;\n","import { useState, useEffect } from 'react';\nimport Static from './Static';\nimport Youtube from './../embeds/YoutubeEmbed';\n\nimport './channels.css';\n\nconst Channels = ({ channelVideos }) => {\n\tconst getActiveTabOnLoad = () => 0;\n\n\tconst [ channel, setChannel ] = useState(getActiveTabOnLoad());\n\tconst [ hover, setHover ] = useState(-1);\n\tconst [ size, setSize ] = useState('large');\n\n\tuseEffect(() => {\n\t\tconst urlSearchParams = new URLSearchParams(window.location.search);\n\t\tconst params = Object.fromEntries(urlSearchParams.entries());\n\t\tif ((channel > - 1) && (params.video !== channelVideos[channel].param)) {\n\t\t\twindow.history.replaceState({}, '', `?video=${channelVideos[channel].param}`)\n\t\t}\n\t}, [channel, channelVideos]);\n\n\tconst sizes = {\n\t\tsmall: {\n\t\t\theight: 250,\n\t\t\twidth: 300\n\t\t},\n\t\tmedium: {\n\t\t\theight: 250,\n\t\t\twidth: 400,\n\t\t},\n\t\tlarge: {\n\t\t\theight: 500,\n\t\t\twidth: 800\n\t\t}\n\t};\n\n const resizeFunction = () => {\n\t\tif (window.innerWidth < 450) {\n\t\t\tif (size !== 'small') {\n\t\t\t\tsetSize('small');\n\t\t\t}\n\t\t} else if (window.innerWidth < 900) {\n\t\t\tif (size !== 'medium') {\n\t\t\t\tsetSize('medium');\n\t\t\t}\n\t\t} else {\n\t\t\tif (size !== 'large') {\n\t\t\t\tsetSize('large');\n\t\t\t}\n\t\t}\n };\n\n\tresizeFunction();\n\n window.addEventListener('resize', () => {\n resizeFunction();\n });\n\n\treturn (\n\t\t\n\t\t\t
\n\t)\n};\n\nexport default Channels;\n","import './info.css';\n\nconst Info = ({ curators }) => {\n\treturn (\n\t\t\n\t\t\t\t{\n\t\t\t\t\tchannelVideos.map(({\n\t\t\t\t\t\ttitle\n\t\t\t\t\t}, index) => (\n\t\t\t\t\t\t setChannel(index)}\n\t\t\t\t\t\t\tonMouseOver={() => setHover(index)}\n\t\t\t\t\t\t\tonMouseOut={() => setHover(-1)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t
\n\t\t\t\n\t\t\t\t{\n\t\t\t\t\t(channel < 0) ?
\n\t\t\t\n\t\t\t\t<>\n\t\t\t\t{\n\t\t\t\t\t((channel < 0) && (hover < 0)) && Please pick a channel to tune into.\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t<>\n\t\t\t\t\t{\n\t\t\t\t\t\t((hover > -1) || (channel > -1)) && (<>\n\t\t\t\t\t \t\t{ channelVideos[(hover > -1 && channel < 0) ? hover : channel].info.map(i =>
\n\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\t\n\t\t\t{i.role}
\n\t\t\t\t\t \t\t\t\t{i.credit}
\n\t\t\t\t\t \t\t\t\n\t\t\t
\n\t)\n};\n\nexport default Info;\n","import './index.css';\nimport { StrictMode } from 'react';\nimport ReactDOM from 'react-dom';\nimport Explorer from './components/Explorer';\nimport Tabs from './components/Tabs';\nimport Channels from './components/Channels';\nimport Info from './components/Info';\n\nwindow.renderGarden = (data) => {\n ReactDOM.render(\n \n\t\t\t\tDesigned and Developed By Patrick Cartlidge\n\t\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t\tAtacama Garden Web Portal
\n\t\t\t\t\n\t\t\t\t\tThe concept of ‘landscape’ has been broadly treated by the arts and sciences throughout the past centuries. However, due to the emergence of the digital realm, the word has acquired a different understanding that is linked with the idea of an entangled network of elements dependent on one another and relying on the interconnections between them. This wholeness or connected network of digital data can be referred to as a ‘digital landscape’, and because of that, also serves to better understand the natural phenomena that science and technology tries to acknowledge. This is because it is now understood that natural environments work in a similar way, by communicating and exchanging information between the constituent elements, such as how the trees and plants communicate with each other. By these means, it is going to become apparent how the digital realm can be directly related to the way a networked landscape works. In that context, Fundación Mustakis / ALMA garden brings together art, science, and technology towards an educational purpose, aiming to speculate and question our understanding of nature through technology, going from the bleak landscape of Atacama Desert with the eyes towards the most distant galaxies, but focusing on bringing this ideas closer to people for them to find a meaning.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tFor this occasion under the organisation of Samuel Domínguez, Valeria Foncea (ALMA) and Leonor Merín (Mustakis) invited a scientist and an architect to curate and select references from their field of expertise that will help us open the discussion towards the concept of Atacama Garden. This will provide a broader picture of the theme and hopefully open a window for the curious users willing to deepen the subject and a starting point for them to explore the unknown.\n\t\t\t\t
\n\t\t\tOrganisations
\n\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t![{`logo](\"/images/LogoArsElectronicaFestival2021.png\")
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t![{`logo](\"/images/LogoMustakis.png\")
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t![{`logo](\"/images/LogoALMA.png\")
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\n\t\t\t\tCurators
\n\t\t\t<>\n\t\t\t\t{\n\t\t\t\t\tcurators.map(({\n\t\t\t\t\t\tname,\n\t\t\t\t\t\tinvitado,\n\t\t\t\t\t\tbio,\n\t\t\t\t\t\texplanation,\n\t\t\t\t\t\tphoto,\n\t\t\t\t\t\tcredit,\n\t\t\t\t\t\trepresentando\n\t\t\t\t\t}) =>\n\t\t\t\t\t\t
)\n\t\t\t\t}\n\t\t\t\n\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tPhotograph credit: {credit}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tPhotograph credit: {credit}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{name}
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\texplanation && { invitado }
\n\t\t\t\t\t\t\t\t\t{ representando }
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\"{ explanation }\"
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{bio.map(b =>
\n\t\t\t\t\t\t\t{b}
)}\n\t\t\t\t\t\t\t\t