I want to put my aplication in my website, but doesn't work in JavaScript Mode

sain120

Hello everybody!

I'm a beginner in processing, this is my second game I've created. It's about parabolic shoot and my fisic teacher said she wanted to put in her blog to make his students play and at the same time make them interested in the subject. So I saw the way to do it was to upload to openproccesing.org, then copy the embed code and paste in the blog. The problem was that for uploading, it required me to change to JavaScript mode and when I do the game doesn't run. How I can figure it out? Is there another way to upload at any page without changing to JavaScript?

Thank you all.

http://www.openprocessing.org/sketch/178104

Here is my code:

PFont dis;
PFont vel;
PFont at;
PFont pnt;
PFont tit;

float fps = 90;
float t;

int pun = 0;
int plus;
int ins = 0;

float linespa;

float dnx;
float dny;

float lindx;
float lindy;

float dns = 60;

float flecx;
float flecy;

float bow = -30;
float cord;

float g;
float speed;
float speedx;
float speedy;
float speedmk = 30;

float ang = -45;
float radbow;
float radflec;

int c = 0;

int sta = 3;

void setup() {
  frameRate(fps);
  size(600, 400);
  dis = loadFont("CharterBT-BoldItalic-48.vlw");
  vel = loadFont("Arial-Black-48.vlw");
  at = loadFont("CenturyGothic-48.vlw");
  pnt = loadFont("CenturyGothic-Bold-48.vlw");
  tit = loadFont("ACaslonPro-Italic-48.vlw");
}

void draw() {

  background(255);

  if (sta == 0) {

    flecx = 60;
    flecy = height - 50;
    radflec = radbow;
    cord = -30;
    lindx = dnx;
    lindy = dny;

    if (keyPressed) {

      if (key == 'w') { 
        ang -= 0.5;
      }
      if (key == 's') { 
        ang += 0.5;
      }

      if (key == 'd') { 
        speedmk += 0.5;
      }
      if (key == 'a') { 
        speedmk -= 0.5;
      }

      if (key == 'k' && speedmk != 0) { 
        sta = 1;
      }

      speedmk = constrain(speedmk, 0, 40);
      speed = speedmk/fps*5;
      ang = constrain(ang, -90, 0);

      delay(75);
    }

  } else if(sta == 1) {

    t += 1/fps;
    g += 9.81/sq(fps)*5;

    speedx = speed*cos(abs(radbow));
    speedy = -speed*sin(abs(radbow)) + g;

    flecx += speedx;
    flecy += speedy;

    lindx = flecx;
    lindy = flecy;

    cord += speed;

    radflec = atan(speedy/speedx);


    if (flecx > width + 30 || flecy > height + 30) { 
      sta = 3;
      ins++;
    } 

    if (flecx >= dnx - dns/57 && flecx <= dnx + dns/57 && flecy <= dny + dns/2 && flecy >= dny - dns/2) { 
      sta = 2; 
      c = 0; 
    }


  } else if(sta == 2) {

      if (flecy <= dny + dns/16 && flecy >= dny - dns/16) {
        plus = 45;
        fill(255, c, c);
      } else if (flecy <= dny + dns/4 && flecy >= dny - dns/4) {
        plus = 15;
        fill(c, 255, c);
      } else {
        plus = 5;
        fill(c, c, 255);
      }

      if(c == 0) { pun = pun + plus; ins++; }

      c += 5;
      c = constrain(c, 0, 255);

      textFont(vel);
      textAlign(CENTER);
      textSize(130);
      text("+" +plus, (width - 40)/2, (height - 50)/2);

    if(c >= 255) { sta = 3; }

  } else if (sta == 3) {

    dnx = round(random(200 + dns/6, width - 40 - dns/6));
    dny = round(random(100 + dns/2, height - 50 - dns/2));
    g = 0;
    t = 0;
    sta = 0;
  }

  cord = constrain(cord, bow - 15, bow);
  bow = map(speedmk, 0, 40, -30, -15);
  radbow = map(ang, 0, 360, 0, 2*PI); 

  strokeWeight(1);

  stroke(200);
  line(lindx, lindy, width - 40, lindy);
  line(lindx, lindy, lindx, height - 50);

  textFont(tit);
  textAlign(RIGHT);
  textSize(15);
  fill(170);
  text("Alejandro Camacho", width, height - 5);

  stroke(100);

  line(60, height - 50, width - 40, height - 50);
  line(width - 40, height - 40, width - 40, 0);

  for (linespa = 60; linespa <= width - 40; linespa += 500/20.0) {
    line(linespa, height - 50, linespa, height - 40);
  }

  for (linespa = 60; linespa <= width - 40; linespa += 500/80.0) {
    line(linespa, height - 50, linespa, height - 45);
  }

  for (linespa = height - 50; linespa >= 0; linespa -= 500/20.0) {
    line(width - 40, linespa, width - 30, linespa);
  }

  for (linespa = height - 50; linespa >= 0; linespa -= 500/80.0) {
    line(width - 40, linespa, width - 35, linespa);
  }

  stroke(0);

  fill(0, 0, 255);
  ellipse(dnx, dny, dns/3, dns);
  fill(0, 255, 0);
  ellipse(dnx, dny, dns/9, dns/2);
  fill(255, 0, 0);
  ellipse(dnx, dny, dns/27, dns/8);


  textFont(vel);
  textSize(15);
  textAlign(SQUARE);
  fill(speedmk*6.375, 0, 255 - speedmk*6.375);
  text(speedmk +"m/s", 100, height - 12);

  textFont(at);
  textSize(15);
  fill(0);
  text(abs(ang) +"º", 62, height - 70);

  pushMatrix();

  translate(60, height - 50);

  rotate(radbow);

  noFill();
  strokeWeight(4);
  stroke(220, 90, 0);
  arc(bow, 0, 30, 75, -PI/2, PI/2);

  strokeWeight(1);
  stroke(130, 95, 75);
  line(cord, 0, bow, 75/2);
  line(cord, 0, bow, -75/2);


  popMatrix();


  pushMatrix();

  translate(flecx, flecy);
  rotate(radflec);

  strokeWeight(2);
  stroke(0, 0, 0);

  line(0, 0, -30, 0);

  popMatrix();

  textFont(pnt);
  textSize(20);
  textAlign(LEFT, TOP);
  fill(0);
  text("PUNTOS = " +pun, 10, 10);
  text("PRECISION = " +String.format("%.1f", pun/float(ins)), 10, 30);

  textSize(40);
  textAlign(RIGHT, TOP);
  fill(200);
  text(String.format("%.1f", t) + "s", width - 60 , 10);

  textFont(dis);
  fill(0);
  textAlign(CENTER);
  textSize(15);

  text(String.format("%.1f", (lindx - 60)/5) +"m", lindx, height - 30);
  text(String.format("%.1f", (height - 50 - lindy)/5) +"m", width - 20, lindy);


}

GoToLoop

In order for the transpilation from Java Mode to JS Mode be successful, we gotta adhere to Processing's API:
http://processingjs.org/reference/

Since you're loading fonts, you should use @pjs directives:

• http://processingjs.org/reference/pjs directive/
• http://processingjs.org/reference/font/

More tips about Java to JS conversion: http://processingjs.org/articles/p5QuickStart.html

Test your code in "JavaScript Mode" before trying to host it somewhere else:
https://github.com/fjenett/javascript-mode-processing

sain120

Have I to rewrite all the code manually learning all the differences with JS? There isn't another way?

GoToLoop

Differences are few. Just need to add the @pjs directives and watch out for anything straying away from Processing API! We also gotta check a browser's console for any JS error messages!

sain120

I have changed some things and works better. The problem now is that I cannot use delay(), do we have any similar function? also to round at the second decimal I cannot use String.format(), so the numbers become really big and blind the screen.

PhiLho

Using delay() is generally seen as bad practice in an interactive program, as it freezes the screen.
In general, the practice is to use millis() to count the time before performing something.

Formatting: if all you want is to display a floating point number with a fixed number of decimal digits, use the good old poor man's formatting trick:

float pi = 3.1415926;
String fpi = str(int(pi * 100) / 100.0);
println(fpi);