Old school D3 from simpler times

All examples By author By category About

Yannael

Full window Github gist

Poulp

Built with blockbuilder.org

forked from Yannael's block: Poulp

forked from Yannael's block: Poulp

forked from Yannael's block: Poulp

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.js">"https://raw.githubusercontent.com/lmccart/p5.js/master/lib/addons/p5.dom.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    
function preload() {
  img2 = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Sweet_and_tender_burmese_kitten_(8424746318).jpg/1280px-Sweet_and_tender_burmese_kitten_(8424746318).jpg")}

function setup() {
createCanvas(500,500);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
 }
    
function draw()  {
//background(255);
image(img2,134, 221, 257, 183);
 background(255);
  image(capture, 0, 0, 320, 240);
  filter('INVERT');
     }
    
    function keyTyped() {
      if (key === ' ') {
         background(255,random(255), 255);
      }
    }

function keyPressed() {
      if (keyCode === 'SPACE') {
         background(255,random(255), 255);
            //keyCodes: https://p5js.org/reference/#/p5/keyCode 
      }
    }

</script>
</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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.js">"https://raw.githubusercontent.com/lmccart/p5.js/master/lib/addons/p5.dom.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    
function preload() {
  img2 = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Sweet_and_tender_burmese_kitten_(8424746318).jpg/1280px-Sweet_and_tender_burmese_kitten_(8424746318).jpg")}
​
function setup() {
createCanvas(500,500);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
 }
    
function draw()  {
//background(255);
image(img2,134, 221, 257, 183);
 background(255);
  image(capture, 0, 0, 320, 240);
  filter('INVERT');
     }
    
    function keyTyped() {
      if (key === ' ') {
         background(255,random(255), 255);
      }
    }
​
      
    function keyPressed() {
      if (keyCode === 'SPACE') {
         background(255,random(255), 255);
            //keyCodes: https://p5js.org/reference/#/p5/keyCode 
      }
    }
​
  </script>
</body>
​
    

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

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