index.html

---
layout: withcc
title: reference
---
<h2>Reference</h2>

<p>This page references all the commands available to Processing.js. Regular Javascript commands will work in Processing.js script.</p>
<p>The Processing.js community is working towards a 100% compatible API, allowing all native Java code to run in Javascript.
<b>Items highlighted in red are not yet implemented</b>.</p>
<p>The original Processing reference can be found on <a href="http://processing.org/reference/">the Processing website</a></p>
<p>If you encounter any problems with these commands or their documentation please file a <a href ="https://processing-js.lighthouseapp.com/projects/41284-processingjs/overview">bug</a>

<div class="reference row">
  <div class="span">
    <div class="category">
      <b>Processing.js instructions</b>
        <a href="/reference/pjs directive/">@pjs directives</a>
        <a href="/reference/font/">font</a>
        <a href="/reference/globalKeyEvents/">globalKeyEvents</a>
        <a href="/reference/pauseOnBlur/">pauseOnBlur</a>
        <a href="/reference/preload/">preload</a>
    </div>

    <div class="category">
      <b>Structure</b>
      <a href="/reference/array access/">[] (array access)</a>
      <a href="/reference/assign/">= (assign)</a>
      <a href="/reference/class/">class</a>
      <a href="/reference/comma/">, (comma)</a>
      <a href="/reference/comment/">// (comment)</a>
      <a href="/reference/curly braces/">{} (curly braces)</a>
      <a href="/reference/doc comment/">/** */ (doc comment)</a>
      <a href="/reference/dot/">. (dot)</a>
      <a href="/reference/draw_/">draw()</a>
      <a href="/reference/exit_/">exit()</a>
      <a href="/reference/extends/">extends</a>
      <a href="/reference/false/">false</a>
      <a href="/reference/final/">final</a>
      <a href="/reference/implements/">implements</a>
      <a href="/reference/import/">import</a>
      <a href="/reference/loop_/">loop()</a>
      <a href="/reference/multiline comment/">/* */ (multiline comment)</a>
      <a href="/reference/new/">new</a>
      <a href="/reference/noLoop_/">noLoop()</a>
      <a href="/reference/null/">null</a>
      <a href="/reference/parentheses/">() (parentheses)</a>
      <a href="/reference/popStyle_/">popStyle()</a>
      <a href="/reference/private" >private</a>
      <a href="/reference/public/">public</a>
      <a href="/reference/pushStyle_" pushStyle()</a>
      <a href="/reference/redraw_/">redraw()</a>
      <a href="/reference/return/">return</a>
      <a href="/reference/semi colon/">; (semicolon)</a>
      <a href="/reference/setup_/">setup()</a>
      <a href="/reference/size_/">size()</a>
      <a href="/reference/static/">static</a>
      <a href="/reference/super/">super</a>
      <a href="/reference/this/">this</a>
      <a href="/reference/true/">true</a>
      <a href="/reference/void/">void</a>
    </div>

    <div class="category">
      <b>Environment</b>
        <a href="/reference/cursor_/">cursor()</a>
        <a href="/reference/focused/">focused</a>
        <a href="/reference/frameCount/">frameCount</a>
        <a href="/reference/frameRate_/">frameRate()</a>
        <a href="/reference/frameRate/">frameRate</a>
        <a href="/reference/height/">height</a>
        <a href="/reference/noCursor_/">noCursor()</a>
        <a href="/reference/online/">online</a>
        <a href="/reference/screen/">screen</a>
        <a href="/reference/width/">width</a>
    </div>

    <div class="category">
      <b>Data</b>
      <h5>Primitive</h5>
        <a href="/reference/boolean/">boolean</a>
        <a href="/reference/byte/">byte</a>
        <a href="/reference/char/">char</a>
        <a href="/reference/color datatype/">color</a>
        <a href="/reference/double/">double</a>
        <a href="/reference/float/">float</a>
        <a href="/reference/int/">int</a>
        <a href="/reference/long/">long</a>
      <h5>Composite</h5>
        <a href="/reference/Array/">Array</a>
        <a href="/reference/ArrayList/">ArrayList</a>
        <a href="/reference/HashMap/">HashMap</a>
        <a href="/reference/Object/">Object</a>
        <a href="/reference/String/">String</a>
        <a href="/reference/XMLElement/">XMLElement</a>
      <h5>Conversion</h5>
        <a href="/reference/binary_/">binary()</a>
        <a href="/reference/boolean_/">boolean()</a>
        <a href="/reference/byte_/">byte()</a>
        <a href="/reference/char_/">char()</a>
        <a href="/reference/float_/">float()</a>
        <a href="/reference/hex_/">hex()</a>
        <a href="/reference/int_/">int()</a>
        <a href="/reference/str_/">str()</a>
        <a href="/reference/unbinary_/">unbinary()</a>
        <a href="/reference/unhex_/">unhex()</a>
      <h5>String Functions</h5>
        <a href="/reference/join_/">join()</a>
        <a href="/reference/match_/">match()</a>
        <a href="/reference/matchAll_/">matchAll()</a>
        <a href="/reference/nf_/">nf()</a>
        <a href="/reference/nfc_/">nfc()</a>
        <a href="/reference/nfp_/">nfp()</a>
        <a href="/reference/nfs_/">nfs()</a>
        <a href="/reference/split_/">split()</a>
        <a href="/reference/splitTokens_/">splitTokens()</a>
        <a href="/reference/trim_/">trim()</a>
          <div>
            <h5>Array Functions</h5>
              <a href="/reference/append_/">append()</a>
              <a href="/reference/arrayCopy_/">arrayCopy()</a>
              <a href="/reference/concat_/">concat()</a>
              <a href="/reference/expand_/">expand()</a>
              <a href="/reference/reverse_/">reverse()</a>
              <a href="/reference/shorten_/">shorten()</a>
              <a href="/reference/sort_/">sort()</a>
              <a href="/reference/splice_/">splice()</a>
              <a href="/reference/subset_/">subset()</a>
          </div>
    </div>

    <div class="category">
      <b>Control</b>
      <h5>Relational Operators</h5>
        <a href="/reference/equality/">== (equality)</a>
        <a href="/reference/greater than/">> (greater than)</a>
        <a href="/reference/greater than or equal to/">>= (greater than or equal to)</a>
        <a href="/reference/inequality/">!= (inequality)</a>
        <a href="/reference/less than/">< (less than)</a>
        <a href="/reference/less than or equal to/">&lt;= (less than or equal to)</a>
      <h5>Iteration</h5>
        <a href="/reference/for_/">for()</a>
        <a href="/reference/while_/">while()</a>
      <h5>Conditionals</h5>
        <a href="/reference/break/">break</a>
        <a href="/reference/case/">case</a>
        <a href="/reference/conditional/">?: (conditional)</a>
        <a href="/reference/continue/">continue</a>
        <a href="/reference/default/">default</a>
        <a href="/reference/else_/">else()</a>
        <a href="/reference/if_/">if()</a>
        <a href="/reference/switch_/">switch()</a>
      <h5>Logical Operators</h5>
        <a href="/reference/logical AND/">&& (logical AND)</a>
        <a href="/reference/logical NOT/">! (logical NOT)</a>
        <a href="/reference/logical OR/">|| (logical OR)</a>
    </div>
  </div>


  <div class="span3">
    <div class="category">
      <b>Shape</b>
      <a href="/reference/PShape/">PShape</a>
      <h5>2D Primitives</h5>
        <a href="/reference/arc_/">arc()</a>
        <a href="/reference/ellipse_/">ellipse()</a>
        <a href="/reference/line_/">line()</a>
        <a href="/reference/point_/">point()</a>
        <a href="/reference/quad_/">quad()</a>
        <a href="/reference/rect_/">rect()</a>
        <a href="/reference/triangle_/">triangle()</a>
      <h5>Curves</h5>
        <a href="/reference/bezier_/">bezier()</a>
        <a href="/reference/bezierDetail_/">bezierDetail()</a>
        <a href="/reference/bezierPoint_/">bezierPoint()</a>
        <a href="/reference/bezierTangent_/">bezierTangent()</a>
        <a href="/reference/curve_/">curve()</a>
        <a href="/reference/curveDetail_/">curveDetail()</a>
        <a href="/reference/curvePoint_/">curvePoint()</a>
        <a href="/reference/curveTangent_/">curveTangent()</a>
        <a href="/reference/curveTightness_/">curveTightness()</a>
          <div>
          <h5>3D Primitives</h5>
            <a href="/reference/box_/">box()</a>
            <a href="/reference/sphere_/">sphere()</a>
            <a href="/reference/sphereDetail_/">sphereDetail()</a>
          </div>
      <h5>Attributes</h5>
        <a href="/reference/ellipseMode_/">ellipseMode()</a>
        <a href="/reference/noSmooth_/">noSmooth()</a>
        <a href="/reference/rectMode_/">rectMode()</a>
        <a href="/reference/smooth_/">smooth()</a>
        <a href="/reference/strokeCap_/">strokeCap()</a>
        <a href="/reference/strokeJoin_/">strokeJoin()</a>
        <a href="/reference/strokeWeight_/">strokeWeight()</a>
      <h5>Vertex</h5>
        <a href="/reference/beginShape_/">beginShape()</a>
        <a href="/reference/bezierVertex_/">bezierVertex()</a>
        <a href="/reference/curveVertex_/">curveVertex()</a>
        <a href="/reference/endShape_/">endShape()</a>
        <a href="/reference/texture_/">texture()</a>
        <a href="/reference/textureMode_/">textureMode()</a>
        <a href="/reference/vertex_/">vertex()</a>
          <div>
          <h5>Loading & Displaying</h5>
            <a href="/reference/loadShape_/">loadShape()</a>
            <a href="/reference/shape_/">shape()</a>
            <a href="/reference/shapeMode_/">shapeMode()</a>
          </div>
          </div>

      <div class="category">
      <b>Input</b>
        <h5>Mouse</h5>
          <a href="/reference/mouseButton/">mouseButton</a>
          <a href="/reference/mouseClicked_/">mouseClicked()</a>
          <a href="/reference/mouseDragged_/">mouseDragged()</a>
          <a href="/reference/mouseMoved_/">mouseMoved()</a>
          <a href="/reference/mouseOut_/">mouseOut()</a>
          <a href="/reference/mouseOver_/">mouseOver()</a>
          <a href="/reference/mousePressed_/">mousePressed()</a>
          <a href="/reference/mousePressed/">mousePressed</a>
          <a href="/reference/mouseReleased_/">mouseReleased()</a>
          <a href="/reference/mouseX/">mouseX</a>
          <a href="/reference/mouseY/">mouseY</a>
          <a href="/reference/pmouseX/">pmouseX</a>
          <a href="/reference/pmouseY/">pmouseY</a>
        <h5>Keyboard</h5>
          <a href="/reference/key/">key</a>
          <a href="/reference/keyCode/">keyCode</a>
          <a href="/reference/keyPressed_/">keyPressed()</a>
          <a href="/reference/keyPressed/">keyPressed</a>
          <a href="/reference/keyReleased_/">keyReleased()</a>
          <a href="/reference/keyTyped_/">keyTyped()</a>
        <h5>Files</h5>
          <a class="warning" href="http://processing.org/reference/createInput_.html" title="Link to native docs">createInput()</a> <!--NOT DONE-->
          <a href="/reference/loadBytes_/">loadBytes()</a>
          <a href="/reference/loadStrings_/">loadStrings()</a>
          <a class="warning" href="http://processing.org/reference/open_.html" title="Link to native docs">open()</a><!--NOT DONE-->
          <a class="warning" href="http://processing.org/reference/selectFolder_.html" title="Link to native docs">selectFolder()</a><!--NOT DONE-->
          <a class="warning" href="http://processing.org/reference/selectInput_.html" title="Link to native docs">selectInput()</a><!--NOT DONE-->
        <h5>Web</h5>
          <a href="/reference/link_/">link()</a>
          <a class="warning" href="http://processing.org/reference/param_/" title="Link to native docs">param()</a><!--NOT DONE-->
          <a href="/reference/status_/">status()</a>
        <h5>Time & Date</h5>
          <a href="/reference/day_/">day()</a>
          <a href="/reference/hour_/">hour()</a>
          <a href="/reference/millis_/">millis()</a>
          <a href="/reference/minute_/">minute()</a>
          <a href="/reference/month_/">month()</a>
          <a href="/reference/second_/">second()</a>
          <a href="/reference/year_/">year()</a>
      </div>

      <div class="category">
      <b>Output</b>
        <h5>Text Area</h5>
          <a href="/reference/print_/">print()</a>
          <a href="/reference/println_/">println()</a>
        <div>
        <h5>Image</h5>
          <a href="/reference/save_/">save()</a>
          <a href="/reference/saveFrame_/">saveFrame()</a>
        </div>
        <div class="category">
          <h5>Files</h5>
            <a href="http://processing.org/reference/PrintWriter.html" title="Link to native docs" class="warning">PrintWriter</a><!--NOT DONE-->
            <a href="http://processing.org/reference/beginRaw_.html" title="Link to native docs" class="warning">beginRaw()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/beginRecord_.html" title="Link to native docs" class="warning">beginRecord()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/createOutput_.html" title="Link to native docs" class="warning">createOutput()</a>    <!--NOT DONE-->
            <a href="http://processing.org/reference/createReader_.html" title="Link to native docs" class="warning">createReader()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/createWriter_.html" title="Link to native docs" class="warning">createWriter()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/endRaw_.html" title="Link to native docs" class="warning">endRaw()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/endRecord_.html/" title="Link to native docs" class="warning">endRecord()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/saveBytes_.html" title="Link to native docs" class="warning">saveBytes()</a><!--NOT DONE-->
            <a href="http://processing.org/reference/saveStream_.html" title="Link to native docs" class="warning">saveStream()</a> <!--NOT DONE-->
            <a href="/reference/saveStrings_/">saveStrings()</a>
            <a href="http://processing.org/reference/selectOutput_.html" title="Link to native docs" class="warning">selectOutput()</a><!--NOT DONE-->
        </div>
      </div>
      <div class="category">
      <b>Transform</b>
          <a href="/reference/applyMatrix_/">applyMatrix()</a>
          <a href="/reference/popMatrix_/">popMatrix()</a>
          <a href="/reference/printMatrix_/">printMatrix()</a>
          <a href="/reference/pushMatrix_/">pushMatrix()</a>
          <a href="/reference/resetMatrix_/">resetMatrix()</a>
          <a href="/reference/rotate_/">rotate()</a>
          <a href="/reference/rotateX_/">rotateX()</a>
          <a href="/reference/rotateY_/">rotateY()</a>
          <a href="/reference/rotateZ_/">rotateZ()</a>
          <a href="/reference/scale_/">scale()</a>
          <a href="/reference/translate_/">translate()</a>
      </div>

      <div class="category" >
      <b>Lights, Camera</b>
        <h5>Lights</h5>
          <a href="/reference/ambientLight_/">ambientLight()</a>
          <a href="/reference/directionalLight_/">directionalLight()</a>
          <a href="/reference/lightFalloff_/">lightFalloff()</a>
          <a href="/reference/lightSpecular_/">lightSpecular()</a>
          <a href="/reference/lights_/">lights()</a>
          <a href="/reference/noLights_/">noLights()</a>
          <a href="/reference/normal_/">normal()</a>
          <a href="/reference/pointLight_/">pointLight()</a>
          <a href="/reference/spotLight_/">spotLight()</a>
        <h5>Camera</h5>
          <a href="/reference/beginCamera_/">beginCamera()</a>
          <a href="/reference/camera_/">camera()</a>
          <a href="/reference/endCamera_/">endCamera()</a>
          <a href="/reference/frustum_/">frustum()</a>
          <a href="/reference/ortho_/">ortho()</a>
          <a href="/reference/perspective_/">perspective()</a>
          <a href="/reference/printCamera_/">printCamera()</a>
          <a href="/reference/printProjection_/">printProjection()</a>
        <h5>Coordinates</h5>
          <a href="/reference/modelX_/">modelX()</a>
          <a href="/reference/modelY_/">modelY()</a>
          <a href="/reference/modelZ_/">modelZ()</a>
          <a href="/reference/screenX_/">screenX()</a>
          <a href="/reference/screenY_/">screenY()</a>
          <a href="/reference/screenZ_/">screenZ()</a>
        <h5>Material Properties</h5>
          <a href="/reference/ambient_/">ambient()</a>
          <a href="/reference/emissive_/">emissive()</a>
          <a href="/reference/shininess_/">shininess()</a>
          <a href="/reference/specular_/">specular()</a>
      </div>
  </div>

  <div class="span3">
    <div class="category">
      <b>Color</b>
        <h5>Setting</h5>
          <a href="/reference/background_/">background()</a>
          <a href="/reference/colorMode_/">colorMode()</a>
          <a href="/reference/fill_/">fill()</a>
          <a href="/reference/noFill_/">noFill()</a>
          <a href="/reference/noStroke_/">noStroke()</a>
          <a href="/reference/stroke_/">stroke()</a>
        <h5>Creating & Reading</h5>
          <a href="/reference/alpha_/">alpha()</a>
          <a href="/reference/blendColor_/">blendColor()</a>
          <a href="/reference/blue_/">blue()</a>
          <a href="/reference/brightness_/">brightness()</a>
          <a href="/reference/color_/">color()</a>
          <a href="/reference/green_/">green()</a>
          <a href="/reference/hue_/">hue()</a>
          <a href="/reference/lerpColor_/">lerpColor()</a>
          <a href="/reference/red_/">red()</a>
          <a href="/reference/saturation_/">saturation()</a>
      </div>

    <div class="category">
      <b>Image</b>
        <a href="/reference/PImage/">PImage</a>
        <a href="/reference/createImage_/">createImage()</a>
      <h5>Loading & Displaying</h5>
        <a href="/reference/image_/">image()</a>
        <a href="/reference/imageMode_/">imageMode()</a>
        <a href="/reference/loadImage_/">loadImage()</a>
        <a href="/reference/noTint_/">noTint()</a>
        <a href="/reference/requestImage_/">requestImage()</a>
        <a href="/reference/tint_/">tint()</a>
      <h5>Pixels</h5>
        <a href="/reference/blend_/">blend()</a>
        <a href="/reference/copy_/">copy()</a>
        <a href="/reference/filter_/">filter()</a>
        <a href="/reference/get_/">get()</a>
        <a href="/reference/loadPixels_/">loadPixels()</a>
        <a href="/reference/pixels_/">pixels[]</a>
        <a href="/reference/set_/">set()</a>
        <a href="/reference/updatePixels_/">updatePixels()</a>
    </div>

    <div class="category">
      <b>Rendering</b>
        <a href="/reference/PGraphics/">PGraphics</a>
        <a href="/reference/createGraphics_/">createGraphics()</a>
        <a href="/reference/hint_/">hint()</a>
    </div>

    <div class="category">

        <b>Typography</b>
      <div>
        <a href="/reference/PFont/">PFont</a>
       </div>
      <h5>Loading & Displaying</h5>
        <a href="/reference/createFont_/">createFont()</a>
        <a href="/reference/loadFont_/">loadFont()</a>
        <a href="/reference/text_/">text()</a>
        <a href="/reference/textFont_/">textFont()</a>
      <div>
      <h5>Attributes</h5>
        <a href="/reference/textAlign_/">textAlign()</a>
        <a href="/reference/textLeading_/">textLeading()</a>
        <a href="/reference/textMode_/">textMode()</a>
        <a href="/reference/textSize_/">textSize()</a>
        <a href="/reference/textWidth_/">textWidth()</a>
      <h5>Metrics</h5>
        <a href="/reference/textAscent_/">textAscent()</a>
        <a href="/reference/textDescent_/">textDescent()</a>
      </div>
    </div>

    <div class="category">
    <b>Math</b>
        <a href="/reference/PVector/">PVector</a>
      <h5>Operators</h5>
        <a href="/reference/add assign/">+= (add assign)</a>
        <a href="/reference/addition/">+ (addition)</a>
        <a href="/reference/decrement/">-- (decrement)</a>
        <a href="/reference/divide/">/ (divide)</a>
        <a href="/reference/divide assign/">/= (divide assign)</a>
        <a href="/reference/increment/">++ (increment)</a>
        <a href="/reference/minus/">- (minus)</a>
        <a href="/reference/modulo/">% (modulo)</a>
        <a href="/reference/multiply/">* (multiply)</a>
        <a href="/reference/multiply assign/">*= (multiply assign)</a>
        <a href="/reference/subtract assign/">-= (subtract assign)</a>
      <h5>Bitwise Operators</h5>
        <a href="/reference/bitwise AND/">& (bitwise AND)</a>
        <a href="/reference/bitwise OR/">| (bitwise OR)</a>
        <a href="/reference/left shift/"><< (left shift)</a>
        <a href="/reference/right shift/">>> (right shift)</a>
      <h5>Calculation</h5>
        <a href="/reference/abs_/">abs()</a>
        <a href="/reference/ceil_/">ceil()</a>
        <a href="/reference/constrain_/">constrain()</a>
        <a href="/reference/dist_/">dist()</a>
        <a href="/reference/exp_/">exp()</a>
        <a href="/reference/floor_/">floor()</a>
        <a href="/reference/lerp_/">lerp()</a>
        <a href="/reference/log_/">log()</a>
        <a href="/reference/mag_/">mag()</a>
        <a href="/reference/map_/">map()</a>
        <a href="/reference/max_/">max()</a>
        <a href="/reference/min_/">min()</a>
        <a href="/reference/norm_/">norm()</a>
        <a href="/reference/pow_/">pow()</a>
        <a href="/reference/round_/">round()</a>
        <a href="/reference/sq_/">sq()</a>
        <a href="/reference/sqrt_/">sqrt()</a>
      <h5>Trigonometry</h5>
        <a href="/reference/acos_/">acos()</a>
        <a href="/reference/asin_/">asin()</a>
        <a href="/reference/atan_/">atan()</a>
        <a href="/reference/atan2_/">atan2()</a>
        <a href="/reference/cos_/">cos()</a>
        <a href="/reference/degrees_/">degrees()</a>
        <a href="/reference/radians_/">radians()</a>
        <a href="/reference/sin_/">sin()</a>
        <a href="/reference/tan_/">tan()</a>
      <h5>Random</h5>
        <a href="/reference/noise_/">noise()</a>
        <a href="/reference/noiseDetail_/">noiseDetail()</a>
        <a href="/reference/noiseSeed_/">noiseSeed()</a>
        <a href="/reference/random_/">random()</a>
        <a href="/reference/randomSeed_/">randomSeed()</a>
    </div>
    <div class="category">
      <b>Constants</b>
        <a href="/reference/HALF_PI/">HALF_PI (1.57079...)</a>
        <a href="/reference/PI/">PI (3.14159...)</a>
        <a href="/reference/QUARTER_PI/">QUARTER_PI (0.78539...)</a>
        <a href="/reference/TWO_PI/">TWO_PI (6.28318...)</a>
      </div>
  </div>
</div>