colorlab
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

project-page.html
text/html

Download raw (11.9 KB)

<!DOCTYPE html>
<html lang="en" id="project-page">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Laboratorium</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="">
  <link rel="stylesheet" href="styles.css">
  <!-- <script src="scripts/jquery-1.9.1.js"></script> -->
  <!-- <script src="scripts/jquery-ui-1.9.2.custom.js"></script> -->
  <style>
    :root {
      --background-color: #00b386;
      --blocking-background-color: white;
      --header-color-mono: darkred;

      --header-color-one: red;
      --header-color-two: darkred;
      --header-color-three: darkgreen;
      --header-color-four: darkred;
    }

    #main {
      background: transparent;
    }

    .colored-wrapper-content, #main .colored-wrapper-content {
      background: transparent;
    }

    #main h1 {
      margin-top: 0;
    }

    #menu {
      padding: 50px 70px;
      --background-color: #E1A800;

    }

    .leftside, .rightside {
      --background-color: #E1A800;
    }
  </style>
</head>

<body>
  <!-- <div id="colors">
    <div class="colored-wrapper"></div>
  </div> -->
  <nav id="menu"  class="colored-wrapper">
    <ul class="">
      <li><a href="main.html">Laboratorium</a></li>
      <li><a href="about-single-other.html">Colorlab</a></li>
      <li><a href="project-page.html">Projects</a></li>
      <li><a href="education-page.html">Education</a></li>
    </ul>
  </nav>
  <!-- <div id="left-menu"  class="colored-wrapper">
    <div class="colored-wrapper-content">
      <h2>Living colors</h2>
      <h3>Bacteria</h3>
      <ul>
        <li>Spirulina</li>
        <li>Chelidonium majus</li>
      </ul>
      <h3>Algae</h3>
      <ul>
        <li>Dunaliella Salina</li>
        <li>Haematococcus pluvialis</li>
        <li>Porphyridium cruentum</li>
        <li>Chlorella</li>
        <li>Fucus</li>
        <li>Isatis Galbana</li>
      </ul>
      <h2>Traditional sources</h2>
      <ul>
        <li>Murex</li>
      </ul>
    </div>
  </div> -->
  <div id="main" class="colored-wrapper">
    <div class="leftside colored-wrapper">
      <p class="footer-more">↓ All projects</p>
      <ul>
        <li><a href="#Tierra-de-diatomaes">Tierra de Diatomeas</a></li>
        <li><a href="#Neochromologism">neochromologism.io</a></li>
        <li><a href="#Faro">Faro</a></li>
        <li><a href="#Monochrome">Monochrome</a></li>

      </ul>
    </div>
    <div class="rightside colored-wrapper">
      <ul>
        <p class="footer-more">↓ Related projects or workshops</p>
        <ul>
          <li><a href="">Tierra de Diatomeas</a>
            <figure>
                <img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg"/>
            </figure>
          </li>
          <li><a href="">neochromologism.io</a>
            <figure>
                <img src="img-website/neochrom_2_2-1024x504.png"/>
            </figure>
          </li>
          <li><a href="">Faro</a>
            <figure>
                <img src="img-website/faroweb-1024x677.jpg"/>
            </figure>
          </li>
          <!-- <li><a href="">Monochrome</a></li>
          <li><a href="">Kars&Boom</a></li>
          <li><a href="">UGent-cells</a></li>
          <li><a href="">OSP</a></li>
          <li><a href="">UGent-Interference</a></li>
          <li><a href="">Peter Beyls</a></li>
          <li><a href="">Cern</a></li> -->
        </ul>
      </ul>
    </div>

      <div class="colored-wrapper-content">
        <h1 class="colored">Projects</h1>
        <p>Laboratorium develops projects in collaboration with artists and scientists applying the research from the color biolab project.
        </p>
      </div>

  </div>
  <div class="anchor" id="Tierra-de-diatomaes"></div>
  <div class="projects colored-wrapper">
      <div class="colored-wrapper-content">
        <h2  class="colored">Tierra de Diatomeas</h2>
        <div class="figure">
          <a href="img-website/musac_lab987_tierradediatomeas_1_xl.jpg" target="_blank">
            <figure>
                <img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg"/>
                <figcaption>Caption</figcaption>
            </figure>
          </a>
          <a href="img-website/musac_lab987_tierradediatomeas_1_xl.jpg" target="_blank">
            <figure>
                <img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg"/>
                <figcaption>Caption</figcaption>
            </figure>
          </a>
        </div>
        <p>Land of Diatoms, a project by Susana, Inés Cámara Leret and María Boto Ordóñez to investigate the relationship between human beings and Castilla and León geographic areas. This research is part of a collaboration with the Laboratory of Diatomology of the University of León, in which diatoms are used as a metaphor to create a dialogue through which to discover historical events, trace existing narratives and discuss desirable futures for the land, its waters and its people.</p>

        <p>Due to the high sensitivity of diatoms to chemical changes in the water, these microorganisms are used to analyse ecological parameters such as the quality of the water. Thanks to the fact that diatom cells are covered by a silica wall, they are fossilizable, and through their study, it is possible to analyse agricultural cycles marked by the arrival of the Romans, the Industrial Revolution or livestock farming, for example. As a consequence of their easy dispersion they can be found in any environment, not only in places where there is or there was water. At the same time, diatoms also help to outline a map of invasions through the study of the migration, dispersal and propagation of species as a result of human activities.</p>

        <p>Land of Diatoms has been accompanied by researcher Dr. Saúl Blanco Lanza (Diatomology Lab from the University of León) and botanist Dr. Estrella Alfaro. It is commissioned by LAB987 at MUSAC, supported by Universidad de León, represented by the Area de Actividades Culturales and Departamento de Diatomología from Facultad de Ciencias Biológicas and The University College Ghent, School of Arts KASK.</p>
        <p class="footer-more"><a href="http://musac.es/lab987/en/ficha/?p=2">See the site</a></p>

      </div>

    </div>

    <div class="anchor" id="Neochromologism"></div>

    <div class="projects colored-wrapper">

        <div class="colored-wrapper-content">
          <h2 class="colored">Neochromologism.io</h2>
          <div class="figure">
            <a href="img-website/neochrom_2_2-1024x504.png" target="_blank">
              <figure>
                  <img src="img-website/neochrom_2_2-1024x504.png"/>
                  <figcaption>Caption</figcaption>
              </figure>
            </a>
          </div>
          <p>Neochromologism.io is an ongoing artistic website that aims to reflect about the color vocabulary that we are using in our daily life at professional and personal level by establishing connections between a color name and a meaning or experience.</p>
          <p>The random RGB code generated for the website background is presented as hexadecimal code, a name following the rules presented above and gives also the possibility to the user of name it by creating a new color database.</p>
          <p>This project has been developed by Laboratorium, the experimental lab for art/design and biotechnology at KASK/School of Arts Ghent, as part of the research project “The color biolab” funded by Arts Research Fund of University College Ghent in collaboration with Juan Luis Font, digital alchemy.</p>
          <p class="footer-more"><a href="http://neochromologism.io/">See the site</a></p>

        </div>

      </div>
      <div class="anchor" id="Faro"></div>

      <div class="projects colored-wrapper">

          <div class="colored-wrapper-content">
            <h2 class="colored">Faro</h2>
            <div class="figure">
              <a href="img-website/faroweb-1024x677.jpg" target="_blank">
                <figure>
                    <img src="img-website/faroweb-1024x677.jpg"/>
                    <figcaption>Caption</figcaption>
                </figure>
              </a>
            </div>
            <p>Experimental movie based on Belousov-Zhabotinsky reaction. Elias Heuninck (Formlab), María Boto (Laboratorium), 2017, 3.</p>
            <p class="footer-more"><a href="">LINK KASK CINEMA</a></p>

          </div>

        </div>
        <div class="anchor" id="Faro"></div>

        <div class="projects colored-wrapper">

            <div class="colored-wrapper-content">
              <h2 class="colored">Monochrome</h2>
              <div class="figure">
                <a href="img-website/dhoe9342-1024x683.jpg" target="_blank">
                  <figure>
                      <img src="img-website/dhoe9342-1024x683.jpg"/>
                      <figcaption>Cover photo credits: Freddy D’Hoe</figcaption>
                  </figure>
                </a>
              </div>
              <p>From May 27th to July 31st 2016 Salina has been exhibited at The Société (Brussels) as part of the Monochrome exhibition.</p>
              <p>Salina are several monochromatic glass canvasses in green and orange, with colors brought by the same living source, Dunaliella salina.</p>
              <p>Salina highlights new color possibilities to be applied in art practice using emerging biotechnology tools as well as questioning issues in this field as stability or ownership: what would our response be to an art piece which state changes autonomously? Could a living entity become a color itself?
              Salina suggests the viewer new possibilities in color research, and opens new discussions around art and biotechnology.</p>

              <p class="footer-more"><a href="http://www.societe-d-electricite.com">→ More info</a></p>

            </div>

          </div>
  <!-- <div id="right-tags" class="colored-wrapper">
      <div class="colored-wrapper-content"></div>
  </div> -->

  <script>

    function patt(rot) {
      return 'repeating-linear-gradient(' + rot.toString(10) + 'deg, var(--background-color),  var(--background-color) 1px, transparent 1px,transparent 4px)';
    }

    function blockingPatt(rot) {
      return 'repeating-linear-gradient(' + rot.toString(10) + 'deg, var(--blocking-background-color),  var(--blocking-background-color) 3px, transparent 3px,transparent 4px)';
    }

    function initBackgrounds() {
      document.querySelectorAll('.colored-wrapper').forEach(el => {
        var rotation = parseInt(Math.random() * 90);
        el.dataset.rotation = rotation;
        el.dataset.speed = (Math.random() * 3) - 1.5;
        el.style.backgroundImage = patt(rotation);
        el.querySelectorAll('.colored-wrapper-content').forEach(elInner => {
          elInner.style.backgroundImage = blockingPatt(rotation + 90);
        });
      });

      var lastScrollY = null;

      function updateBackgrounds () {
        if (window.scrollY !== lastScrollY) {
          document.querySelectorAll('.colored-wrapper').forEach(el => {
            var rotation = Math.round((window.scrollY * parseFloat(el.dataset.speed) + parseInt(el.dataset.rotation)) % 360);
            el.style.backgroundImage = patt(rotation);
            el.querySelectorAll('.colored-wrapper-content').forEach(elInner => {
              elInner.style.backgroundImage = blockingPatt(rotation + 90);
            });
          });
          lastScrollY = window.scrollY;
        }

        window.requestAnimationFrame(updateBackgrounds);
      }

      updateBackgrounds();
    }

    function updateBarPosition () {
      var contentHeight = document.querySelector('html').getBoundingClientRect().height,
      windowHeight = window.innerHeight,
      windowScrollDistance = contentHeight - windowHeight,
      pos = window.scrollY / windowScrollDistance;
      document.querySelector('#colors').style.top = Math.round(pos * 70).toString(10) + 'vh';
    }


    initBackgrounds();

    (function () {

    })();

  </script>
</body>

</html>