› › ›

Embedding sketch in webpage(html)

tatertottatertot
edited July 2017 in JavaScript Mode

Hello. I am working on a sketch based on the "Solar system generator" (video link below).

I modified the code such that it retrieves the number of moons and the appropriate image file from a .csv, and managed to get it working.

However, I have trouble embedding it to a html file. Below are the contents of the html and processing code. I also attached an image of the working directory.

Any pointers on what's going wrong is greatly appreciated. (I have a feeling it has something to do with the *@pjs preload command of the .pde ..., but not sure)

Many thanks in advance.

-----html code--------

<html>
<head>
<title> My first webpage</title>
<script src="Processing.js"></script>
</head>

<body>
Hello World!
<marquee> this is a test!</marquee>
<canvas data-processing-sources="solargenerator_sunrotate_ver6.pde planet.pde"></canvas>
</body>
</html>

-----sketch code solargenerator_sunrotate_ver6--------

import peasy.*;
Planet[] sun;


PeasyCam cam;

PImage sunTexture;
PImage[] textures = new PImage[3];
Table holidaytable;
int nrows;

void setup() {
  size(900, 700, P3D);

  Table holidaytable=loadTable("test.csv", "header");

  textures[0] = loadImage("earth.jpg");
  textures[1] = loadImage("cmb.jpg");
  textures[2] = loadImage("sky.jpg");

  cam = new PeasyCam(this, 1000);

  int nrows =holidaytable.getRowCount(); 

  sun = new Planet[nrows];


  for (int i = 0; i < nrows; i++) {
    TableRow row = holidaytable.getRow(i);

    int ID = row.getInt("no");
    int holiday = row.getInt("holidays");
    String picture = row.getString("image");

    sunTexture= loadImage(picture);

    sun[i]= new Planet(50, 450, 0, true, ID, sunTexture);
    sun[i].spawnMoons(holiday,1); 
  }  
}

void draw() {
  background(0);
  lights();

  for (Planet sun2 : sun) {
    sun2.show();
    sun2.orbit();
  }
}

OS: windows 10 Processing version: 3.3.4

workingdirectory

Tagged:

Answers

Sign In or Register to comment.