Browser-based?

alicef

Hello, I am a high school teacher and thinking about using Processing in the classroom. Students are issued district laptops and it is very difficult/almost impossible to get IT to download/update software. Is there a browser-based version of Processing? I completed the Processing beginners' tutorial (Hour of Code) and was able to do a little coding online.

GoToLoop

There's a Processing spin-off based on a Pjs fork @ Khan's Academy: B-)
https://www.KhanAcademy.org/computing/computer-programming
However the syntax there is JavaScript, not Java. ~O)

Still on JS syntax, there's the latest spin-off p5.js. There are some web IDEs for it: :bz

1. http://p5ide.HerokuApp.com/editor
2. https://www.OpenProcessing.org/sketch/create
3. http://p5js.SketchPad.cc/

jeremydouglass

@alicef -- see also a recent discussion of students posting work and online grading with p5.js --

https://forum.processing.org/two/discussion/19456/education-uploading-sketches

alicef

Thanks! Is there a web-based version of Processing in Python by any chance?

jeremydouglass

Sadly, no. The web-based version of Processing uses JavaScript in order to run in a browser. Processing.py compiles to Java, not JavaScript:

Processing.py has an interesting history, discussed on its homepage readme. It is built on the Jython Project, which (among other things) supports dynamic compilation of python source code to Java bytecodes. Jython used to be a source-to-source compiler, transcompiler or transpiler to Java, and now compiles directly to JVM bytecode. In any case, when using Jython you can write in Python, but you can run Java bytecode that is able to hook up with the rest of the Java libraries in the Processing ecosystem.

See discussion: https://forum.processing.org/two/discussion/19326/

alicef

Thanks so much! Using a web IDE such as http://p5ide.herokuapp.com/editor, is it possible for a novice programmer/classroom math teacher to create a graphic image of a polygon that is reflected across a defined line; rotated around a defined point; and/or translated by a defined vector.

Also, is it possible to click and drag points so that if objects are defined by transformations, the image changes appropriate - similar to GeoGebra.

Here's an example: http://www.codeskulptor.org/#user40_jApncvZy6B_1.py

GoToLoop

You should take a look at p5.js' reference in order to have an idea about what can be done w/ its API: http://p5js.org/reference/

Also some of its 3rd-party libraries: http://p5js.org/libraries/

jeremydouglass

a polygon that is reflected across a defined line; rotated around a defined point; and/or translated by a defined vector.

This is trivially easy in any version of Processing (Java, JavaScript Python, Ruby) using any IDE. Check out:

• Coordinate System and Shapes. https://processing.org/tutorials/drawing/
• 2D Transformations. https://processing.org/tutorials/transform2d/

...like so:

void setup(){  
  size(200, 200);
  background(20);
}
void draw(){
    background(192);

    // translate
    translate(width/2,height/2);

    //reflect
    scale(-1,1);

    //rotate
    rotate(-second()*HALF_PI);

    // draw a shape();
    beginShape();
      vertex(  0,   0);
      vertex(-12,  20);
      vertex(15,   0);
      vertex( 50,  20);
      vertex( 20, -40);
    endShape(CLOSE);
}

...although the "defined line" part needs to be carefully implemented, as in general you reflect before you draw (unless you want to buffer an image and then manipulate it).

is it possible to click and drag points so that if objects are defined by transformations, the image changes appropriate.

Yes, with mouseClicked(), mousePressed(), and mouseDragged(). You will need to define your points, and then check whether your click is close to a point in order to begin modifying it. See this example that implements clicking and dragging:

• https://processing.org/examples/mousefunctions.html

Edit: note that my examples are from Processing(Java), although the corresponding p5.js is almost exactly the same.