connecting p5js to the html5 api

lia

hello,

i came across this example here: http://www.openprocessing.org/sketch/74153

which uses processing.js and somehow, magically the code is using externals.context... to set some dropShadow for the shapes being drawn.

i tried to "port" this to p5js, but i failed. does anyone have any idea if this is actually possible ? if so, a little sample file would be totally great !!!

(i already figured i probably should include the dom lib....)

all the best

Lia.-

GoToLoop

That code is mixing Java & JavaScript syntaxes. Thus it isn't compatible w/ "Java Mode" anymore. [..]
The ideal is when we can develop an app in "Java Mode" and be able to deploy it in "JavaScript Mode"! (*)

IMO, when "JS Mode" is violating Java syntax, it's better to write the app in "CoffeeScript Mode".
And of course, the future in "p5js" mode too! =:)

lmccart

this should indeed be possible in p5.js, will work on posting an example shortly!

lmccart

the code below should work just like the example you posted. basically, the key is, anywhere you see something like:

externals.context or getContext("2d")

you should be able to use the variable drawingContext instead.

var a;

function setup() {
  createCanvas(500, 500);
  background(0);
  frameRate(25);
  noStroke();
  colorMode(HSB);
  a = random(1);
}

function draw () {
  a+=.01;
  var n=noise(a);

  background(255);
  for(var i=150; i>0; i-=5){
    push();
    translate(width/2,height/2);
    rotate(radians(frameCount*i/5));

    // call to HTML5 canvas API
    drawingContext.shadowOffsetX = cos(radians(5*i))*3;
    drawingContext.shadowOffsetY = sin(radians(5*i))*3;
    drawingContext.shadowBlur = min(i,5);
    drawingContext.shadowColor = "black";

    fill(255);
    ellipse(0,0,10+i*10*sin(n*TWO_PI),30+i*20*cos(n*TWO_PI));
    pop();
  }
}

lia

this is great! thanks !!! :)