Online Processing.js Editor

<!DOCTYPE html> <html> <head> <title>Processing.js Test</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script> <script type="application/processing" data-processing-target="pjs"> float[][] distances; float maxDistance; size(200, 200); background(0); maxDistance = dist(width/2, height/2, width, height); distances = new float[width][height]; for(int i=0; i<height; i++) { for(int j=0; j<width; j++) { float d = dist(width/2, height/2, j, i); distances[j][i] = d/maxDistance * 255; } } for(int i=0; i<height; i+=2) { for(int j=0; j<width; j+=2) { stroke(distances[j][i]); point(j, i); } } </script> </head> <body> <h1>Processing.js Test</h1> <p>Demonstrates the syntax for creating a two-dimensional (2D) array.</p> <canvas id="pjs"></canvas> </body> </html>