tkotaCellid
7/3/2017 - 8:14 PM

Processing.js

Processing.js

style.css
content_copyfile_download
body {
  background: #eee; 
}
script.js
content_copyfile_download
$ ->
  console.log 'processing code is in html'
index.html
content_copyfile_download
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>$title</title>
  $styles
</head>
<body>
  <h1>$title</h1>
  <canvas id="mycanvas"></canvas>
  
  <script src="$ext/processing-1.3.6.min.js"></script>
  <script type="text/processing" data-processing-target="mycanvas">
int x = 20;
int y = 20;
int w = 300;
int h = 200;
int speed = 3;
int vx = speed;
int vy = speed;

void setup()
{
  size(w,h);
  fill(255);
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
  println("Hello ErrorLog!");
}

void draw(){  
  background(125);
  text("Hello Web!",20,20);

  x += vx;
  y += vy;

  if (x < 0) vx = speed;
  if (x > w) vx = -speed;
  if (y < 0) vy = speed;
  if (y > h) vy = -speed;

  ellipse(x, y, 10, 10);
}
</script>

  $scripts
</body>
</html>