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

edited December 2014 in JavaScript Mode

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


}

Answers

Sign In or Register to comment.