Processing Images

This sketch shows how to import and display images using processing

by pinkLucie

HTML

<div id="wrapper">

<h1>Load Image with ProcessingJS</h1>

<p><canvas id="canvas1"></canvas></p>
    
</div><!-- end wrapper -->

CSS

h1 {
 color: brown;   
}

canvas {
 width: 600px;
 height: 450px;
 border: thin black solid;   
}

JavaScript

//this is the processing sketch object
function sketch(processing) {
  
  var p = processing;
  
  var url = "http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/clown-fish_500_600x450.jpg"
  
  var img;
  
 
  p.setup = function() {
    p.size(600, 400);
    
    img = p.loadImage(url);       
  };
    
 
  p.draw = function() {
      
     p.image(img, 0, 0, p.width, p.height); 
  };
}


// grab the canvas element from the page
var canvas = document.getElementById("canvas1");

// atach the sketch function to the canvas
var p = new Processing(canvas, sketch);