Download raw (10.6 KB)
<!DOCTYPE html>
<html dir="ltr" class="sid-plesk" lang="en" id="index">
<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-main.css">
<!-- <script src="scripts/jquery-1.9.1.js"></script> -->
<!-- <script src="scripts/jquery-ui-1.9.2.custom.js"></script> -->
</head>
<body>
<div id="menu" class="">
<ul>
<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>
</div>
<div class="columns">
<div id="about" class="section">
<div class="intro">
<h1>Colorlab</h1>
<p class="header">
<p>Laboratorium is the experimental lab for art/design and biotechnology at KASK / School of Arts Ghent. As a biolab in art and design it focuses on exploring different interactions between art, science and technology.</p>
<p>The main research project is the color biolab, which focuses on new ways of approaching the color field.</p>
<p>If you are interested in participating or using our facilities, send us an email to <a href="mailto:info@laboratorium.bio">info@laboratorium.bio</a>
</p>
<!-- <h2>Art, science and technology</h2>
<p>The lab is a place for practice-based experimentation, research and education. The lab is open. It invites artists, designers, scientists and other interested parties to engage in a process of creative cross-pollination. Participants get a basic introduction to the functioning and principles of the lab, but are encouraged to bring in and open up their own backgrounds, creative methodologies, artistic practices and research questions.</p>
<h2>Color research</h2>
<p>From 2016 up until the end of 2019 an initial research project is being conducted at the lab focusing on new ways of creating colours. This Color Research project is led by María Boto together with Kristel Peters and explores different approaches to the production and application of living, sustainable and/or open colours by making use of waste or living organisms.</p>
<h2>Additive technologies</h2>
<p>The lab is located at the Media Arts Studio of KASK, neighboring the Formlab. The Formlab is offering high-end tools and support for 3D additive technologies. Establishing links between the realms of biotechnology and 3D printing is one of their main key interests.</p>
<h2>Greenhouse</h2>
<p>As part of Laboratorium, a greenhouse has been installed in the Bijloke. Nowadays it is being used to cultivate coloring plants together with other art-science projects.</p>
<h2>Lab (equipment)</h2>
<p>As part of color research and with the objective to promote art-science works, a laboratory has been installed in the School of Arts, within the Media department (Offerlaan 5).</p>
-->
<p class="footer-more"><a href="about.html">→ read more about</a></p>
<div class="intro patterned-border">
<div class="patterned-background ">
</div>
</div>
</div>
</div>
<div id="projects" class="section">
<div class="intro patterned-border">
<div class="patterned-background ">
<h1>Projects</h1>
<p class="header">
Laboratorium develops projects in collaboration with artists and scientists applying the research from the
color biolab project.</p>
<p class="footer-more">
<a href="">↓ Latest posts</a>
</p>
</div>
</div>
<ul>
<li class="patterned-border">
<div class="patterned-background">
<a href="project-page.html#Tierra-de-diatomaes">
<h2 class=" ">Tierra de Diatomeas</h2>
<figure>
<img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg" />
</figure>
</a>
</div>
</li>
<li class="patterned-border">
<div class="patterned-background">
<a href="project-page.html#Neochromologism">
<h2 class=" ">neochromologism.io </h2>
<figure>
<img src="img-website/neochrom_2_2-1024x504.png" />
</figure>
</a>
</div>
</li>
<li class="patterned-border">
<div class="patterned-background">
<a href="project-page.html#Faro">
<h2 class=" ">FARO</h2>
<figure>
<img src="img-website/faroweb-1024x677.jpg" />
</figure>
</a>
</div>
</li>
<li class="patterned-border">
<div class="patterned-background">
<a href="project-page.html#Monochrome">
<h2 class=" ">Monochrome</h2>
<figure>
<img src="img-website/dhoe9342-1024x683.jpg" />
</figure>
</a>
</div>
</li>
<!-- <li class="patterned-border">
<div class="patterned-background">
<h2 class=" ">FARO</h2>
<figure>
<img src="img-website/faroweb-1024x677.jpg" />
</figure>
</div>
</li>
<li class="patterned-border">
<div class="patterned-background">
<h2 class=" ">Monochrome</h2>
<figure>
<img src="img-website/dhoe9342-1024x683.jpg" />
</figure>
</div>
</li> -->
</ul>
<div class="background25 fill patterned"></div>
</div>
<div id="calendar" class="section">
<div class="intro patterned-border">
<div class="patterned-background">
<h1>Education</h1>
<p class="header">
Laboratorium organises workshops, lectures and participates in the academic programme of KASK within the
topics as colors, biomaterials, Art+­Science and DIYbio. Here you can find info of the previous activities organised
as well as a list of the upcoming events.</p>
<p class="footer-more">
<a href="">↓ Latest posts</a>
</p>
</div>
</div>
<div class="fill patterned"></div>
<ul>
<li class="patterned-border">
<div class="patterned-background">
<h2>KASKcinema // X-Ray: Laboratorium</h2>
</div>
</li>
<li class="patterned-border">
<div class="patterned-background">
<h2>Master Seminar: Art, science and technology interactions</h2>
</div>
</li>
<li class="patterned-border">
<div class="patterned-background">
<h2>Indigo workshop</h2>
</div>
</li>
</ul>
</div>
</div>
<script src="backgrounds.js"></script>
<script>
window.addEventListener('load', function () {
initBackgrounds();
});
(function () {
var column = document.querySelector('#projects'),
fill = column.querySelector('.fill'),
intro = column.querySelector('.intro'),
lastY, listOffset;
if (fill && intro) {
function tick() {
if (window.scrollY !== lastY || intro.getBoundingClientRect().height !== listOffset) {
lastY = window.scrollY;
listOffset = intro.getBoundingClientRect().height;
var scrollDistance = document.body.scrollHeight - window.innerHeight,
position = window.scrollY / scrollDistance,
top = window.scrollY + (1 - position) * (listOffset + 150),
bottom = position * (window.innerHeight - (listOffset + 150)) + (1 - position) * (column.getBoundingClientRect().height - window.innerHeight);
fill.style.setProperty('top', top.toString() + 'px');
fill.style.setProperty('bottom', bottom.toString() + 'px');
}
window.requestAnimationFrame(tick);
}
window.requestAnimationFrame(tick);
}
})();
(function () {
var column = document.querySelector('#calendar'),
fill = column.querySelector('.fill'),
intro = column.querySelector('.intro'),
lastY, listOffset;
if (fill && intro) {
function tick() {
if (window.scrollY !== lastY || intro.getBoundingClientRect().height !== listOffset) {
lastY = window.scrollY;
introHeight = intro.getBoundingClientRect().height;
var scrollDistance = document.body.scrollHeight - window.innerHeight,
position = window.scrollY / scrollDistance;
// top = window.scrollY + (1 - position) * (listOffset + 150);
// fill.style.setProperty('top', top.toString() + 'px');
fill.style.setProperty('top', (window.scrollY + position * (introHeight + 150)).toString() + 'px');
fill.style.setProperty('bottom', ((1 - position) * (column.getBoundingClientRect().height - introHeight - 150)).toString() + 'px');
}
window.requestAnimationFrame(tick);
}
window.requestAnimationFrame(tick);
}
})();
document.querySelectorAll('#projects, #calendar').forEach(function (column) {
var lastY, lastWindowWidth, lastWindowHeight,
list = column.querySelector('ul'),
compensation, scrollDistance, position;
function tick () {
var redraw = false;
if (lastWindowWidth !== window.innerWidth || lastWindowHeight !== window.innerHeight) {
lastWindowWidth = window.innerWidth,
lastWindowHeight = window.innerHeight,
top = parseInt(list.style.getPropertyValue('top')),
compensation = Math.floor(column.getBoundingClientRect().bottom - list.getBoundingClientRect().bottom) + ((typeof top === 'number') ? top : 0);
redraw = true;
console.log(compensation);
}
if (window.scrollY !== lastY) {
lastY = window.scrollY;
scrollDistance = document.body.scrollHeight - window.innerHeight,
redraw = true;
}
if (redraw) {
position = window.scrollY / scrollDistance;
list.style.setProperty('top', Math.round(position * (compensation)).toString() + 'px');
}
window.requestAnimationFrame(tick);
}
window.requestAnimationFrame(tick);
});
</script>
</body>
</html>