question related with processing js
dear people,
i have spent 3 days in trying to implement mij processing work from processing 1.5 to processing.js and while i like processing very much, it's very good and fast.
i found different sites with different solutions to get my work on my website and with wampserver or Webserver.
i get only html texts on mij screen en no art work. i am also a poet and artist. (professional scientific programming since the first computers from 1964 and software trainer till 2011).
the solution processing js offered was exciting for me to show others and learn others how to use this.
so i organised the next map as a test with a clock:
helloweb (with 3 things as content)
helloweb 1 kB HTML document
helloweb 2 kB Processing Source
processing-1.3.5.min JScript Script File (download from the js website)
content helloweb html:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="processing-1.3.5.min.js"></script>
<script type="application/processing">
<canvas data-processing-sources="helloweb.pde"></canvas>
</body>
</html>
helloweb processing source:
html> <head>
<title>A Processing.js xxxx Example</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>A Processing.js Example</h1>
<script type="application/processing">
// void setup() {
//instructions in here happen once when the sketch is run
// size(500,500);
// background(0);
//}
//void draw() {
//instructions in here happen over and over again
//}
void setup() {
size(200, 200);
stroke(255);
smooth();
}
void draw() {
background(0);
fill(80);
noStroke();
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
ellipse(100, 100, 160, 160);
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
stroke(255);
strokeWeight(1);
line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
strokeWeight(2);
line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
strokeWeight(4);
line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
}
</script><canvas></canvas>
</body> </html>
and the processing-1.3.5.min java script file
i have read that the init file is obsolete and this should be enough
after this i copied this helloweb map to the root or www from a webserver to run as localhost or to my own website.
result on screen is 1 line : A Processing.js Example
that's all.
what is wrong ???
please help me to get it working?
thank you
Cees Riddering
driebergen / netherlands
