Processing Images v1.2

This sketch shows how to import and display images using processing

by mmansion

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 url1 = 
  
      "http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/clown-fish_500_600x450.jpg";
    
  var url2 = 
      
      "http://3.bp.blogspot.com/-ssZCWBc0WuU/UIFMwxU6b4I/AAAAAAAAB4A/b4f3jxJD3xw/s1600/funny+fish+1.gif";
  
  var img1;
  var img2;
  
 
  p.setup = function() {
    
    p.size(600, 400);
    
    img1 = p.loadImage(url1);     
    img2 = p.loadImage(url2);
      
  };//end setup
    
 
  p.draw = function() {
      
     //arguments = (imageObj, xPosition, yPosition, width, height)
     //p.image(img1, 0, 0, p.width, p.height);
     
     p.image(img2, 0, 0, 250, 357);
  
  };//end draw
    
}//end sketch


// 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);