Old school D3 from simpler times

All examples By author By category About

Yannael

Full window Github gist

Corrige2

Built with blockbuilder.org

forked from Yannael's block: fresh block

forked from Yannael's block: Corrige

forked from Yannael's block: Corrige

forked from Yannael's block: Corrige2

forked from Yannael's block: Corrige2

forked from Yannael's block: Corrige2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.js"></script>
    
  <style>
     svg { width:100%; height: 100% }
    html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;

/* This centers our sketch horizontally. */
  justify-content: center;

/* This centers our sketch vertically. */
  align-items: center;
}

</style>
</head>

<body>
  <div align="center">
  <script>
    
    textDisplay="Corrigez\ns'il vous plaît,\ncar il y a là\nune obscurité\ntrès nette"
    compteur=0
    function preload() {
      img = loadImage("https://upload.wikimedia.org/wikipedia/commons/7/70/Gestation_crate_(Farm_Sanctuary).jpg");
    }
    function setup() {
createCanvas(500, 500);
  
rect(100,100,100,100);
noStroke();
          }
    
    function draw() {
       
textFont("Alpha Sausage")
 background(54)
 image(img,0,0,800,500);
      fill(353,219,255,250-compteur*2)
      rect(0,0,500,500)
fill(0, 0, 0);
      textSize(60);  
          
text(textDisplay.substr(0,compteur), 14, 101);
   }
    
                         
    function keyTyped() {
      if (key === ' ') {
         compteur=compteur+1
         
      } 
     if (key === 'a') {
         compteur=0
         
      }  
    }   
    
  </script>
  </div>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.js"></script>
    
  <style>
     svg { width:100%; height: 100% }
    html, body {
  height: 100%;
}
​
body {
  margin: 0;
  display: flex;
​
  /* This centers our sketch horizontally. */
  justify-content: center;
​
  /* This centers our sketch vertically. */
  align-items: center;
}
​
  </style>
</head>
​
<body>
  <div align="center">
  <script>
    
    textDisplay="Corrigez\ns'il vous plaît,\ncar il y a là\nune obscurité\ntrès nette"
    compteur=0
    function preload() {
      img = loadImage("https://upload.wikimedia.org/wikipedia/commons/7/70/Gestation_crate_(Farm_Sanctuary).jpg");
    }
    function setup() {
createCanvas(500, 500);
  
rect(100,100,100,100);
noStroke();
          }
    
    function draw() {
       
textFont("Alpha Sausage")
 background(54)
 image(img,0,0,800,500);
      fill(353,219,255,250-compteur*2)
      rect(0,0,500,500)
fill(0, 0, 0);
      textSize(60);  
          
text(textDisplay.substr(0,compteur), 14, 101);
   }
    
                         
    function keyTyped() {
      if (key === ' ') {
         compteur=compteur+1
         
      } 
     if (key === 'a') {
         compteur=0
         
      }  
    }   
    
  </script>
  </div>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.js