Benros_racingAvatar.

Running code...
Restart
View-only mode, changes are not saved.

Shapes

  • rect(x, y, w, h);
    Draws a rectangle, using the first two coordinates as the top left corner and the last two as the width/height
  • ellipse(x, y, w, h);
    Draws an ellipse, using the first two parameters as the center coordinates and the last two as the width/height
  • triangle(x1, y1, x2, y2, x3, y3);
    Draws an triangle between three points
  • line(x1, y1, x2, y2);
    Draws a line between two points
  • point(x, y);
    Draws a point at the given coordinates
  • arc(x, y, w, h, start, stop);
    Draws an arc between two angles
  • bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
    Draws a bezier curve between two points. To extract points and tangents after drawing the curve, use bezierPoint() and bezierTangent()
  • quad(x1, x2, y2, x3, y3, x4, y4);
    Draws a quadrilateral between four points

Complex Shapes

  • beginShape() / endShape() / vertex()
    Use beginShape() and endShape() to create more complex shapes. To start a shape, call beginShape(), then call the vertex() command, then call endShape() to stop. By default, it creates an irregular polygon, but you can control that by sending a mode to beginShape().
  • curveVertex()
    Use curveVertex() to create a curved shape. It's used in conjunction with the bezierVertex() command.
  • bezierVertex()
    Use bezierVertex() to create a bezier curve. It's used in conjunction with the curveVertex() command.

Colors

  • background(r, g, b);
    Sets the background color of the canvas
  • fill(r, g, b);
    Sets the fill color of the shape
  • noFill
    Removes the fill color of the shape
  • stroke(r, g, b);
    Set the outline color for shapes
  • strokeWeight(thickness);
    Change the thickness of lines and outlines.
  • noStroke
    Removes the outline color of the shape
  • color(r, g, b);
    Store a color in a variable
  • blendColor(c1, c2, mode);
    Blend two colors together
  • lerpColor(c1, c2, amount);
    Interpolate between two colors

Text

  • text(string, x, y);
    Draws text to the canvas
  • textSize(size);
    Change the size of the text
  • textFont(font, size);
    Change the font of the text

Transform

  • rotate(angle);
    Rotate shapes by an angle
  • scale(factor);
    Scale shapes by a factor
  • translate(x, y);
    Translates shapes by an offset

Environment

  • width / height
    The size of the canvas
  • draw = function() {...}
    Called repeatedly during program execution

Mouse

  • mouseX
    The x-coordinate of the mouse
  • mouseY
    The y-coordinate of the mouse
  • pmouseX
    The previous x-coordinate of the mouse
  • pmouseY
    The previous y-coordinate of the mouse
  • mouseButton
    Which mouse button is pressed
  • mouseIsPressed
    Whether the mouse is pressed
  • mouseClicked() = function() {...}
    Called when mouse is clicked
  • mousePressed() = function() {...}
    Called when mouse is pressed
  • mouseReleased() = function() {...}
    Called when mouse is released
  • mouseMoved = function() {...}
    Called when mouse is moved
  • mouseDragged() = function() {...}
    Called when mouse is dragged
  • mouseOver() = function() {...}
    Called when mouse is over
  • mouseOut() = function() {...}
    Called when mouse is out

Keyboard

  • key
    The value of the key pressed
  • keyCode
    The code of the key pressed
  • keyIsPressed
    Whether a key is currently pressed
  • keyPressed() = function() {...}
    Called when a key is pressed
  • keyReleased() = function() {...}
    Called when a key is released
  • keyTyped() = function() {...}
    Called when a key is typed

Math

  • random(low, high);
    Generate a random number
  • dist(x1, y1, x2, y2);
    Calculates the distance between two points
  • constrain(value, low, high);
    Constrain value between min and max
  • min(num1, num2);
    Return the minimum of two numbers
  • max(num1, num2);
    Return the maximum of two numbers
  • abs(num);
    Return the absolute value of a number
  • log(num);
    Take the logarithm of a number
  • pow(num, exponent);
    Raise a number to an exponent
  • sq(num);
    Square a number
  • sqrt(num);
    Find the square root of a number
  • round(num);
    Round a number to the nearest whole number
  • ceil(num);
    Return nearest integer of greater/equal value
  • floor(num);
    Return nearest integer of lesser/equal value
  • PVector(x, y);
    An object that describes a 2-dimensional vector

Trigonometry

  • cos(angle);
    Take the cosine of an angle
  • sin(angle);
    Take the sine of an angle
  • tan(angle);
    Take the tangent of an angle

Datetime

  • day() / month () / year()
    Current date
  • hour() / minute() / second()
    Current time
  • millis()
    Milliseconds elapsed since program start

Debug

  • debug(arg1, arg2, ...)
    Print to your browser's developer console
  • println(data)
    Print the canvas console
  • print(data)
    Print to the canvas console

Javascript

  • var fooBar = function() {...}
    Define a new function
  • var array = [0, 1, 2, 3, 4]
    Define a new array
  • if (x < 20) {...}
    Only run code if a certain condition is true
  • for (var i = 0; i < 10; i++) {...}
    Run code a certain number of times
  • while (x < 250) {...}
    Run code while a certain condition is true