main.html

<!doctype html>
<meta charset="utf-8">
<script src="public/template.v1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
        onload="renderMathInElement(document.body,{ignoredTags:['script', 'noscript', 'style', 'textarea', 'option']});"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">

<script type="text/front-matter">
  title: "Learning Sensorimotor Capabilities in Cellular Automata"
  description: "Description of the post"
  authors:
  - Gautier Hamon
  - Mayalen Etcheverry : https://mayalenetcheverry.com/
  - Bert Chan : https://chakazul.github.io/
  - Clément Moulin-Frier : https://clement-moulin-frier.github.io/
  - Pierre-Yves Oudeyer : http://www.pyoudeyer.com/
  affiliations:
  - INRIA Flowers Team
  - INRIA Flowers Team / Poietis
  - Google Brain Tokyo / INRIA Flowers Team 
  - INRIA Flowers Team 
  - INRIA Flowers Team / Microsoft Research Montreal
</script>



<style>
#showText {opacity:0.75; background-color:#668; color:#eef; font:0.7em Courier New; }
</style>
<style>
.site-header {
  padding-top: .5rem;
  padding-bottom: 1rem;

}

    

.site-header a {
  color: #333;
  font-size: 1.25rem;
  font-weight: 300;
  background-image: none;
}

.site-header .site-title {
  font-size: 1.5rem;
}

.site-nav {
  padding-top: 1rem;
  margin-top:0.25rem;
  float:right
}

.site-header nav a {
  color: #777;
  border-bottom:none;
}
.site-header a {
  border-bottom:none;
}

.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:active,
.site-header nav a.nav-active:hover,
.site-header nav a.nav-active:focus,
.site-header nav a.nav-active:active {
  color: #444;
  opacity: 1;
  border-bottom: 2px solid #444;
}

.site-header nav a.nav-active {
  border-bottom: 1px solid #ccc;
}

.site-nav a + a {
  margin-left: 1rem;
}

.site-header a:hover,
.posts .post a:hover .post-meta,
.posts .post a:hover .post-title,
.posts .post a:hover .post-summary {
  opacity: 0.88;
}

.clearfix:before, .clearfix:after {
content: ' ';
display: table;
}

.clearfix:after {
  clear: both;
}

.social-icons {
    font-size: 1.25rem;
    padding: 0.5em 0 0 0;

}
</style>

<d-byline></d-byline>



{% include article.html %}


<style>
button {
display: inline-block;
background-color: #7b38d8;
border-radius: 10px;
border: 4px double #cccccc;
color: #eeeeee;
text-align: center;
font-size: 15px;
padding: 10px;
width: 80px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: lightgreen;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #cbc;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 15px;
    padding: 10px;
    width: 80px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color:green;
    border-color: #4c4;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;
}

.radio-toolbar label:hover {
  background-color: lightgreen;
}

.figcaption{
  font-size: 22px;
  color:#A0A0A0;
}

d-content li{
  font-size: 14px;
  color:#A0A0A0;
}

d-content {
    clear: both;
    float: right;
    line-height:1.4;
    padding-top: 1em;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 0;
    margin-left: 10px;
    margin-right: calc((100vw - 1500px) / 2 + 168px);
    width: calc((1500px - 648px) / 2 - 24px);
}

d-content h5{
  margin-block-start: 1.5em;
  margin-block-end: 0em;
}

d-content ul{
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

d-content h2{
  margin-top:10px;
}
@media (max-width: 1300px)
d-content {
    display: none;
}
.colab-root {
      display: inline-block;
      background: rgba(255, 255, 255, 0.75);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px!important;
      text-decoration: none;
      color: #5c5c5c;
      border: none;
      font-weight: 600;
      border: solid 1px rgba(0, 0, 0, 0.08);
      border-bottom-color: rgba(0, 0, 0, 0.15);
      text-transform: uppercase;
      line-height: 16px;
    }

span.colab-span {
  background-image: url(public/images/colab.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position-y: 2px;
  display: inline-block;
  padding-left: 24px;
  border-radius: 4px;
  text-decoration: none;
}

a.colab-root:hover{
  color: #666;
  background: white;
  border-color: rgba(0, 0, 0, 0.2);
}

/*
.code {
white-space: nowrap;
border-radius: 2px;
padding: 4px 25px;
font-size: 15px;
color: rgba(0, 0, 0, 0.6);
display: block;
background: white;
border-left: 3px solid rgba(0, 0, 0, 0.05);
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 0.00001;
tab-size: 4;
}*/



</style>
  
  <script>
    const $$$ = q => document.documentElement.querySelectorAll(q);
    $$$('.vidoverlay').forEach(e => e.onclick = () => {
      e.parentNode.getElementsByTagName('video')[0].onended = v => {e.style.opacity = 0.8; v.target.load();};
      e.parentNode.getElementsByTagName('video')[0].currentTime = 0.0;
      e.parentNode.getElementsByTagName('video')[0].play();
      e.style.opacity = '0';
    });
  </script>

<script type="text/javascript">
  "use strict";
  var sliderSpeed = document.getElementById("rangeSpeed");
  var outputSpeed = document.getElementById("valueSpeed");
  var videos=document.getElementsByClassName("videoShow");
  outputSpeed.innerHTML = sliderSpeed.value; // Display the default slider value

  // Update the current slider value (each time you drag the slider handle)
  sliderSpeed.oninput = function() {
  outputSpeed.innerHTML = this.value;
  for (var i = 0; i < videos.length; i++) {
  	videos[i].playbackRate = this.value;
  }}
  function changeImgIMGEP(img)
        {
            var schemeIMGEP=document.getElementById("schemeIMGEP");
            schemeIMGEP.src=img;
        }


</script>