connecting p5js to the html5 api

Answers

• GoToLoop

  August 2014 edited August 2014

  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

  August 2014

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

  August 2014 edited August 2014

  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

  August 2014

  this is great! thanks !!! :)