Skip to content

Instantly share code, notes, and snippets.

@tkota0726
Created July 3, 2017 20:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tkota0726/29eddd12c08937d14a2fda4f240cf8e2 to your computer and use it in GitHub Desktop.
Save tkota0726/29eddd12c08937d14a2fda4f240cf8e2 to your computer and use it in GitHub Desktop.
Processing.js
<!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>
$ ->
console.log 'processing code is in html'
body {
background: #eee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment