›

Javascript syntax in a p5 sketch

vasquesvasques
in Using Processing

Hello.

I'm completely fresh in this p5 thing. I'm learning with these tutorials from one of p5 creators. I know that p5 is mixed with javascript but i don´t understand how can we simply use js in a skectch instead of p5 syntax. For example, when i try to run the code in the video below, nothing happens (i'm using Atom editor). Can you help me understand this?

Answers

  • BattlesquidBattlesquid

    Processing allows for various modes, from R to Python to Javascript. More Javascript functionality is added through the p5.js library. It would be best if you used the Processing IDE and installed the p5.js mode. This way, the program layout is already set up for you, so you won't have to do it from scratch.

    If you don't run the program from the Processing IDE and want to stick with Atom, make sure to reference it in your HTML file like so:

    `<html>
<head>
<script src="path/to/p5.js"></script>
<script src="name_of_program"></script>
</head>`

    You can also create the sketch directly in the script tag.

    `<script src="path/to/p5.js"></script>
<script type="text/javascript>
//code goes here
</script>`

    Also, if you are new to p5.js, objects should be learned later on. Check out some resources here.

  • kfrajerkfrajer

    You can also, instead of downloading and referencing the p5.js library from a local folder, reference it from an online repo like this:

    https://cdnjs.com/libraries/p5.js/

    For instance, check @GoToLoop's post here: https://forum.processing.org/two/discussion/comment/108529/#Comment_108529

    Kf

  • jeremydouglassjeremydouglass

    @vasques -- re:

    p5 is mixed with javascript but i don´t understand how can we simply use js in a skectch instead of p5 syntax.

    That isn't quite right. From the p5.js homepage:

    Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web. ... p5.js is a new interpretation, not an emulation or port, and it is in active development.

    So it isn't "mixed with JavaScript" -- it is JavaScript, but using most of the same core API as Processing Java (setup, draw, line, rect, etc).

    Other modes each allow writing sketches in those languages, not in a mixture of that language and Java -- Processing.py (Python mode) involves writing sketches in Python, Processing.R (R mode) involves writing sketches in R. These modes then running on a Java platform behind-the-scenes so that they can work with the Processing Java implementation. For example, Processing.py runs on Jython:

    Jython is an implementation of the Python language for the Java platform. Jython 2.7 implements the same language as CPython 2.7, and nearly all of the Core Python standard library modules. -- https://wiki.python.org/jython/JythonFaq/GeneralInfo

    ...and Processing.R runs on Renjin:

    Renjin is a JVM-based [Java Virtual Machine] interpreter for the R language for statistical computing. -- http://www.renjin.org/

Sign In or Register to comment.