benchmarks/gradient.jpeg benchmarks/green-square.gif benchmarks/obama_smoking.jpg @@ -4,7 +4,7 @@ <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>Processing.js Benchmarks</title> -<script type="text/javascript" src="../processing.min.js"></script> +<script type="text/javascript" src="../processing.js"></script> <script type="text/javascript"> /* * This code searches for all the <script type="application/processing" target="canvasid"> @@ -39,33 +39,140 @@ if ( document.addEventListener ) { body{font-size:70%;font-family:lucida-console;padding:0;margin:0;} h1{font-family:verdana;background:steelblue;color:#fff;padding:5px 25px;margin:0;} h2{font-family:verdana;background:lightgrey;color:dimgrey;padding:5px 25px;margin:0;font-size:120%} - div{border:1px dotted dimgrey;padding:0 5px;float:left;margin:5px;} + div{border:1px dotted dimgrey;padding:0 5px;float:left;margin:5px;font-size:.7em;height:100px;} </style> </head> <body> <h1>Processing.js Benchmarks</h1> <h2>All Canvas elements should render green</h2> + + <div><p>set() pixel<p> + <script type="application/processing"> + size( 50, 50 ); + color black = color(0); + set(10, 10, black); + set(40, 10, black); + set(40, 40, black); + set(10, 40, black); + </script><canvas style="background:#0f0;"></canvas> + </div> + + <div><p>get() pixel<p> + <script type="application/processing"> + void setup(){ + size( 50, 50 ); + frameRate(5); + } + PImage myImage = loadImage("obama_smoking.jpg"); + void draw(){ + image( myImage, 0, 0 ); + color cp = get(30, 20); + fill(cp); + rect(5, 25, 20, 20); + if( frameCount > 10 ){ exit(); } + } + </script><canvas style="background:#f00;"></canvas> + </div> + + <div><p>get() pixels<p> + <script type="application/processing"> + void setup(){ + size( 50, 50 ); + frameRate(5); + } + PImage myImage = loadImage("obama_smoking.jpg"); + void draw(){ + image( myImage, 0, 0 ); + PImage cp = get(); + image( cp, 20, 20 ); + if( frameCount > 10 ){ exit(); } + } + </script><canvas style="background:#f00;"></canvas> + </div> + + <div><p>updatePixels()<p> + <script type="application/processing"> + size( 50, 50 ); + int halfImage = width*height / 2; + PImage myImage = loadImage("gradient.jpeg"); + void setup(){ + frameRate(5); + } + void draw(){ + image( myImage, 0, 0 ); + loadPixels(); + for (int i = 0; i < halfImage; i++) { + pixels[i+halfImage] = pixels[i]; + } + updatePixels() + if( frameCount > 10 ){ exit(); } + } + </script><canvas style="background:#f00;"></canvas> + </div> + + <div><p>background()<br /> as image<p> + <script type="application/processing"> + pImage a; + void setup(){ + size( 50, 50 ); + frameRate(5); + a = loadImage( "green-square.gif" ); + } + void draw(){ + + // Image is not drawn if it's not ready + background( a ); + + // Image load may be delayed, so wait a while... + if( frameCount > 10 ){ + exit(); + } + } + </script><canvas style="background:#f00;"></canvas> + </div> + + <div><p>loadImage()<p> + <script type="application/processing"> + pImage a; + void setup(){ + size( 50, 50 ); + frameRate(5); + a = loadImage( "green-square.gif" ); + } + void draw(){ + + // Image is not drawn if it's not ready + image( a, 0, 0 ); + + // Image load may be delayed, so wait a while... + if( frameCount > 10 ){ + exit(); + } + } + </script><canvas style="background:#f00;"></canvas> + </div> + <div><p>text()<p> <script type="application/processing"> - size(50,50); + size(50,50); noStroke(); PFont fontA = loadFont("Biotyp.svg"); textFont(fontA, 12); fill(0); text("Working!", 0, 0); </script><canvas style="background:#0f0;"></canvas> - </div> - + </div> + <div><p>println()<p> <script type="application/processing"> - size(50,50); + size(50,50); noStroke(); void lnPrinted(){ fill(ln[0],ln[1],ln[2]); rect(0,0,50,50); } - println(0,255,0); + println(0,255,0); </script><canvas style="background:red;"></canvas> </div> @@ -194,8 +301,7 @@ if ( document.addEventListener ) { background(0,G,0,G); </script><canvas style="background:red"></canvas> </div> - - + <div><p>lerp<p> <script type="application/processing"> size(50,50); @@ -237,5 +343,6 @@ if ( document.addEventListener ) { </script><canvas style="background:url(arc_fill.gif);"></canvas> </div> + </body> </html> benchmarks/index.html @@ -24,10 +24,10 @@ float drag = 30.0; void setup() { size(200,200); - teddy = loadImage("teddy.gif"); + teddy = loadImage("data/teddy.gif"); xpos = width/2; ypos = height/2; - frameRate(60); + frameRate(60); } void draw() @@ -47,7 +47,7 @@ void draw() } // Display the sprite at the position xpos, ypos - image(teddy, xpos, ypos); + image( teddy, xpos, ypos ); } </script><canvas width="200" height="200"></canvas></p> <div style="height:0px;width:0px;overflow:hidden;"><img src='data/sky.jpg' id='sky.jpg'/><img src='data/teddy.gif' id='teddy.gif'/></div> @@ -63,7 +63,7 @@ float drag = 30.0; void setup() { size(200,200); - teddy = loadImage("teddy.gif"); + teddy = loadImage("data/teddy.gif"); xpos = width/2; ypos = height/2; frameRate(60); examples/basic/sprite.html @@ -35,10 +35,7 @@ return p; }; - - // Auto-load Processing sketches - addEventListener( 'DOMContentLoaded', USInit, false ); - + // IE Unfriendly AJAX Method var ajax=function( url ){ var AJAX; @@ -277,6 +274,7 @@ var p = {}; // Set Processing defaults / environment variables + p.name = 'Processing.js Instance'; p.PI = Math.PI; p.TWO_PI = 2 * p.PI; p.HALF_PI = p.PI / 2; @@ -726,7 +724,7 @@ p.ceil = function ceil ( aNumber ){ return Math.ceil( aNumber ); }; p.round = function round ( aNumber ){ return Math.round( aNumber ); }; p.lerp = function lerp ( value1, value2, amt ){ return ( ( value2 - value1 ) * amt ) + value1; }; - p.abs = function abs ( aNumber ){ return Math.abs( aNumber ); }; + p.abs = function abs ( aNumber ){ return Math.abs( aNumber ); }; p.cos = function cos ( aNumber ){ return Math.cos( aNumber ); }; p.sin = function sin ( aNumber ){ return Math.sin( aNumber ); }; p.pow = function pow ( aNumber, aExponent ){ return Math.pow( aNumber, aExponent ); }; @@ -1178,7 +1176,7 @@ p.rect = function rect( x, y, width, height ){ - if( width + height ){ return; } + if( !( width + height ) ){ return; } curContext.beginPath(); @@ -1267,26 +1265,35 @@ p.save = function save( file ){}; - p.loadImage = function loadImage( file ){ - var img = document.getElementById( file ); - - if ( !img ){ return; } + // Loads an image for display. Type is unused. Callback is fired on load. + p.loadImage = function loadImage( file, type, callback ){ - var h = img.height, - w = img.width; - - var canvas = document.createElement( "canvas" ); - canvas.width = w; - canvas.height = h; - var context = canvas.getContext( "2d" ); + var img = document.createElement( 'img' ); + img.src = file; + + img.onload = function(){ + + var h = this.height, + w = this.width; + + var canvas = document.createElement( "canvas" ); + canvas.width = w; + canvas.height = h; + var context = canvas.getContext( "2d" ); + + context.drawImage( this, 0, 0 ); + this.data = buildImageObject( context.getImageData( 0, 0, w, h ) ); + this.data.img = img; - context.drawImage( img, 0, 0 ); - var data = buildImageObject( context.getImageData( 0, 0, w, h ) ); - data.img = img; - return data; + callback?callback():0; + + } + + return img; + }; - - // Gets a single pixel from Canvas + + // Gets a single pixel or block of pixels from the current Canvas Context p.get = function get( x, y ){ if( !arguments.length ){ @@ -1303,6 +1310,17 @@ }; + // Creates a new Processing instance and passes it back for... processing + p.createGraphics = function createGraphics( w, h ){ + + var canvas = document.createElement( "canvas" ); + var ret = buildProcessing( canvas ); + ret.size( w, h ); + ret.canvas = canvas; + return ret; + + }; + // Paints a pixel array into the canvas p.set = function set( x, y, obj ){ @@ -1362,39 +1380,35 @@ }; + // Draw an image or a color to the background p.background = function background( img ) { - if( arguments.length ){ + if( arguments.length ){ - if( img && img.img ){ - curBackground = img; + if( img.data && img.data.img ){ + curBackground = img.data; }else{ curBackground = p.color.apply( this, arguments ); } - + } if( curBackground.img ){ - p.image( curBackground, 0, 0 ); + + p.image( img, 0, 0 ); + }else{ + var oldFill = curContext.fillStyle; curContext.fillStyle = curBackground + ""; curContext.fillRect( 0, 0, p.width, p.height ); curContext.fillStyle = oldFill; + } - }; - - // Clears hole in the Canvas or the whole Canvas - p.clear = function clear ( x, y, width, height ) { - if( arguments.length == 0 ){ - curContext.clearRect( x, y, width, height ); - }else{ - curContext.clearRect( 0, 0, p.width, p.height ); - } - } + }; - p.AniSprite = function( prefix, frames ){ + p.AniSprite = function( prefix, frames ){ this.images = []; this.pos = 0; @@ -1403,15 +1417,15 @@ } this.display = function( x, y ){ - p.image( this.images[ this.pos ], x, y ); + p.image_old( this.images[ this.pos ], x, y ); if( ++this.pos >= frames ){ this.pos = 0; } }; - this.getWidth = function(){ return getImage( this.images[ 0 ] ).width; }; - this.getHeight = function(){ return getImage( this.images[ 0 ] ).height; }; + this.getWidth = function(){ return getImage_old( this.images[ 0 ] ).width; }; + this.getHeight = function(){ return getImage_old( this.images[ 0 ] ).height; }; }; function buildImageObject( obj ){ @@ -1463,7 +1477,7 @@ } p.createImage = function createImage( w, h, mode ){ - + var data = {}; data.width = w; data.height = h; @@ -1492,29 +1506,19 @@ }; - p.createGraphics = function createGraphics( w, h ){ - - var canvas = document.createElement( "canvas" ); - var ret = buildProcessing( canvas ); - ret.size( w, h ); - ret.canvas = canvas; - return ret; - - }; - - - p.tint = function tint( rgb, a ){ - curTint = a; - }; - function getImage( img ){ - + if( typeof img == "string" ){ return document.getElementById( img ); } - if( img.img || img.canvas ){ - return img.img || img.canvas; + if( img.img ){ + + return img.img; + + }else if( img.getContext || img.canvas ){ + + img.pixels = img.getContext( '2d' ).createImageData( img.width, img.height ); } for( var i = 0, l = img.pixels.length; i < l; i++ ){ @@ -1534,43 +1538,114 @@ canvas.height = img.height; var context = canvas.getContext( "2d" ); - context.putImageData( img, 0, 0 ); + context.putImageData( img.pixels, 0, 0 ); img.canvas = canvas; - return canvas; + return img; } - p.image = function image( img, x, y, w, h ){ - + // Depreciating "getImage_old" from PJS - currently here to support AniSprite + function getImage_old( img ){ + if( typeof img == "string" ){ + return document.getElementById( img ); + } + if( img.img || img.canvas ){ + return img.img || img.canvas; + } + for( var i = 0, l = img.pixels.length; i < l; i++ ){ + var pos = i * 4; + var c = ( img.pixels[ i ] || "rgba(0,0,0,1)" ).slice( 5, - 1 ).split( "," ); + img.data[ pos + 0 ] = parseInt( c[ 0 ] ); + img.data[ pos + 1 ] = parseInt( c[ 1 ] ); + img.data[ pos + 2 ] = parseInt( c[ 2 ] ); + img.data[ pos + 3 ] = parseFloat( c[ 3 ] ) * 100; + } + var canvas = document.createElement( "canvas" ); + canvas.width = img.width; + canvas.height = img.height; + var context = canvas.getContext( "2d" ); + context.putImageData( img, 0, 0 ); + img.canvas = canvas; + return canvas; + } + // Depreciating "getImage_old" from PJS - currently here to support AniSprite + p.image_old=function image_old(img,x,y,w,h){ x = x || 0; - y = y || 0; - - var obj = getImage( img ); - + y = y || 0; + var obj = getImage( img ); if( curTint >= 0 ){ var oldAlpha = curContext.globalAlpha; curContext.globalAlpha = curTint / opacityRange; - } - + } if( arguments.length == 3 ){ curContext.drawImage( obj, x, y ); }else{ curContext.drawImage( obj, x, y, w, h ); - } - + } if( curTint >= 0 ){ curContext.globalAlpha = oldAlpha; - } - + } if( img._mask ){ var oldComposite = curContext.globalCompositeOperation; curContext.globalCompositeOperation = "darker"; p.image( img._mask, x, y ); curContext.globalCompositeOperation = oldComposite; + } + }; + + // Draws an image to the Canvas + p.image = function image( img, x, y, w, h ){ + + if( img.data || img.canvas ){ + + x = x || 0; + y = y || 0; + + var obj = getImage( img.data || img.canvas ); + + if( curTint >= 0 ){ + var oldAlpha = curContext.globalAlpha; + curContext.globalAlpha = curTint / opacityRange; + } + + if( arguments.length == 3 ){ + curContext.drawImage( obj, x, y ); + }else{ + curContext.drawImage( obj, x, y, w, h ); + } + + if( curTint >= 0 ){ + curContext.globalAlpha = oldAlpha; + } + + if( img._mask ){ + var oldComposite = curContext.globalCompositeOperation; + curContext.globalCompositeOperation = "darker"; + p.image( img._mask, x, y ); + curContext.globalCompositeOperation = oldComposite; + } + + } + + if( typeof img == 'string' ){ + } }; + + // Clears hole in the Canvas or the whole Canvas + p.clear = function clear ( x, y, width, height ) { + if( arguments.length == 0 ){ + curContext.clearRect( x, y, width, height ); + }else{ + curContext.clearRect( 0, 0, p.width, p.height ); + } + } + + p.tint = function tint( rgb, a ){ + curTint = a; + }; processing.js 30200170c7904936d75d6ff32811e7870c93f173 f1lt3r f1lt3r@f1lt3r-desktop.(none) http://github.com/jeresig/processing-js/commit/bc2b97200a7d74e8ef498c55d20ab1aca7545745 bc2b97200a7d74e8ef498c55d20ab1aca7545745

2009-10-27T14:00:10-07:00

PJS handled IMG loads, ignores & onload callbacks. e9668ecbf5d9844ad4257c68fe23f7170cf64c5d f1lt3r f1lt3r@f1lt3r-desktop.(none)