Reference
Structure
-
Draw
Examples
double yPos = Height;
Timer = Draw;
void Draw()
{
//draw() loops forever. Until stopped
Background(204);
yPos = yPos-1;
if(yPos < 0)
{
yPos = Height;
}
Line(0, yPos, Width, yPos);
}
Description
The Timer executes the Draw() function and the lines of codes inside the function until the program is stopped or NoLoop() is called.
Note if NoLoop() is called in Draw(), it will be execute once before stopping. The number of times the Timer executes Draw could be controlled with the FrameRate() function. It is important to note that the drawing coordinate system will be reset at the beginning of each Draw() call. If any transformations are performed within Draw() (scale, rotate, translate), their effects will be undone at the beginning of Draw(), so transformations will not accumulate over time. On the other hand, styling applied (fill, stroke, etc) will remain in effect.
Syntax
Draw() -
Loop()
Examples
double x = 0;
Timer = Draw;
MousePressed = OnMousePressed;
bool loop = true;
void OnMousePressed()
{
if(loop == true)
NoLoop();
else
Loop();
loop =! loop;
}
void Draw()
{
Background(204);
x = x + 1;
if (x > Width)
{
x = 0;
}
Line(x, 0, x, Height);
}
Description
The Timer executes the Draw() function and the lines of codes inside the function. The Timer stop to execute when NoLoop() is called and continues when Loop() will be called.
Syntax
Loop() -
NoLoop()
Examples
double x = 0;
Timer= Draw;
void Draw()
{
NoLoop();
Background(200);
Line(10, 10, 90, 90);
}
double x = 0;
Timer= Draw;
void Draw()
{
if(MouseIsPressed == true)
{
NoLoop();
}
Background(204);
x = x + 1;
if (x > Width)
{
x = 0;
}
Line(x, 0, x, Height);
}
Description
The Timer executes the Draw() function and the lines of codes inside the function until the program is stopped or NoLoop() is called. Note if NoLoop() is called in Draw() it will be execute once before stopping. When NoLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as MousePressed() or KeyPressed(). Instead, use those functions to call Loop(), which will run Draw(), which can update the screen properly. This means that when NoLoop() has been called, no drawing can happen.
Syntax
NoLoop() -
Timer
Examples
int counter = 0;
Timer = Draw;
void Draw()
{
Background(200);
Text(counter);
if(KeyIsPressed == true)
{
NoLoop();
}
counter += 1;
}
Description
The Timer executes the Draw() function and the lines of codes inside the function until the program is stopped or NoLoop() is called. The Timer acts similar to a loop. Note if NoLoop() is called in Draw() it will be execute once before stopping. The number of times the Timer executes Draw could be controlled with the FrameRate() function.
Syntax
Timer = "Method" -
FrameRate()
Examples
double x = 0;
Timer= Draw;
FrameRate(30);
void Draw()
{
Background(204);
x = x + 1;
if (x > Width)
{
x = 0;
}
Line(x, 0, x, Height);
}
Description
Specifies the number of frames to be displayed every second. For example, the function call FrameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. The default frame rate is based on the frame rate of the display, which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations.
Syntax
FrameRate(fps)
FrameRate()Parameters
fps: Number of frames to be displayed every second -
FrameCount()
Examples
Timer= Draw;
void Draw()
{
Background(200);
Text(FrameCount());
}
Description
FrameCount contains the number of frames that have been displayed since the program started.
Syntax
FrameCount() -
Millis()
Examples
Timer = Output;
void Output()
{
Background(204);
long millisecond = Millis();
Text("Milliseconds \n running: \n"+ millisecond, 5, 40);
}
Description
Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences.
Syntax
Millis() -
Width
Examples
Width = 100; Height = 100; Timer = Draw; void Draw() { Background(200); Text("Width: "+ Width + "\n" +"Height: "+ Height); }Description
System variable that stores the width of the window. -
Height
Examples
Width = 100; Height = 100; Timer = Draw; void Draw() { Background(200); Text("Width: "+ Width + "\n" +"Height: "+ Height); }Description
System variable that stores the height of the window. -
Cursor()
Examples
Timer= Draw;
void Draw()
{
Background(204);
var widthMid = Width / 2;
var heightMid = Height / 2;
Line(widthMid, 0, widthMid, Height);
Line(0, heightMid, Width, heightMid);
if (MouseX < widthMid && MouseY < heightMid)
{
Cursor("Arrow");
}
else if (MouseX > widthMid && MouseY < heightMid)
{
Cursor("No");
}
else if (MouseX > widthMid && MouseY > heightMid)
{
Cursor("SizeAll");
}
else
{
Cursor("UpArrow");
}
}
Description
Sets the cursor to a predefined symbol.
Syntax
Cursor("Cursortype")Parameters
type: String|Constant. For example: Arrow, Cross, Hand, IBeam, Wait, Help, None, UpArrow -
Random()
Examples
double r = Random(50, 100);
Line(30 + r, 40, 85, r);
Description
Return a random floating-point number. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. If no arguments are give, returns a random number between 0 and 1.
Syntax
Random(min, max);
Parameters
min (optional): Number: the lower bound
max (optional): Number: the upper bound -
Lerp()
Examples
Background(200);
double a = 20;
double b = 80;
double c = Lerp(a, b, 0.2);
double d = Lerp(a, b, 0.5);
double e = Lerp(a, b, 0.8);
double y = 50;
StrokeWeight(5);
Circle(a, y, 5);
Circle(b, y, 5);
Stroke(100);
Circle(c, y, 5);
Circle(d, y, 5);
Circle(e, y, 5);
Description
Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The Lerp function is convenient for creating motion along a straight path and for drawing dotted lines.
Syntax
Lerp(start, stop, amt);
Parameters
start: Number: first value
stop: Number: second value
amt: Number: number between first and second -
Dist()
Examples
Background(200);
double x1 = 20;
double x2 = 80;
double y = 50;
StrokeWeight(5);
Circle(x1, y, 5);
Circle(x2, y, 5);
double d = Dist(x1, y, x2, y);
Text("Distance:" + d);
Description
Calculates the distance between two points.
Syntax
Dist(x1, y1, x2, y2);
Parameters
x1: Number: x-coordinate of the first point
y1: Number: y-coordinate of the first point
x2: Number: x-coordinate of the second point
y2: Number: y-coordinate of the second point
Returns
Number: distance between the two points -
Hypot()
Examples
Background(200);
Triangle(20,20, 110,20, 20,100);
double x = Dist(20, 20, 110, 20);
double y = Dist(20, 20, 20, 100);
double h = Hypot(x, y);
Text("Hypotenuse Length: " + h);
Description
Calculates the square root of the sum of the squares of x and y. (Pythagorean addition)
Syntax
Hypot(first, second);
Parameters
first: Number: first value
second: Number: second value
Returns
Number: Hypotenuse Length -
Constrain()
Examples
Timer = Draw;
void Draw()
{
Background(200);
double leftWall = 25;
double rightWall = 75;
// x1 is just the MouseX, while
// x2 is the MouseX, but constrained
// between the leftWall and rightWall!
double x1 = MouseX;
double x2 = Constrain(MouseX, leftWall, rightWall);
// Draw the walls.
Stroke(150);
Line(leftWall, 0, leftWall, Height);
Line(rightWall, 0, rightWall, Height);
// Draw x1 and x2 as circles.
NoStroke();
Fill(150);
Ellipse(x1, 33, 9, 9); // Not Constrained
Fill(0);
Ellipse(x2, 66, 9, 9); // Constrained
}
Description
Constrains a value between a minimum and maximum value.
Syntax
Constrain(n, low, high);
Parameters
n: Number: number to constrain
low: Number: minimum limit
high: Number: maximum limit
Returns
Number: constrained number -
Map()
Examples
Background(200); double value = 23; double m = Map(value, 20, 80, 0, 100, true); Text(m); // output: 5Description
Re-maps a number from one range to another. In the first example above, the number 23 is converted from a value in the range of 20 to 80 into a value that ranges from 0 to 100.
Syntax
Map(value, start1, stop1, start2, stop2, [withinBounds]);
Parameters
value: Number: the incoming value to be converted
start1: Number: lower bound of the value's current range
stop1: Number: upper bound of the value's current range
start2: Number: lower bound of the value's target range
stop2: Number: upper bound of the value's target range
withinBounds: Boolean: constrain the value to the newly mapped range (Optional). If nothing is entered, the standard value of withinBounds is true.
Returns
Number: remapped number -
Norm()
Examples
Background(200); double value = 30; double n = Norm(value, 0, 100); Text(n); // output: 0.3Description
Normalizes a number from another range into a value between 0 and 1. Identical to Map(value, low, high, 0, 1).
Syntax
Norm(value, start, stop);
Parameters
value: Number: incoming value to be normalized
start: Number: lower bound of the value's current range
stop: Number: upper bound of the value's current range
Returns
Normalized number -
Radians()
Examples
double deg = 45.0; double rad = Radians(deg); Text(deg + " degrees is " + rad + " radians");Description
Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964.
Syntax
Radians(degrees);
Parameters
degrees: Number: the degree value to convert to radians
Returns
Number: the converted angle -
Noise()
Examples
double xoff = 0.0;
Timer = Draw;
void Draw()
{
Background(200);
xoff = xoff + 0.01;
double n = Noise(xoff) * Width/2;
Line(n, 0, n, Height);
Text(Noise(xoff));
}
Description
Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural, harmonic succession of numbers than that of the standard Random() function. It was developed by Ken Perlin in the 1980s and has been used in graphical applications to generate procedural textures, shapes, terrains, and other seemingly organic forms. The main difference to the Random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value. The coder can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.
Syntax
Noise(x, [y], [z]);
Parameters
x: Number: x-coordinate in noise space
y: Number: y-coordinate in noise space (Optional)
z: Number: z-coordinate in noise space (Optional)
Returns
Number: Perlin noise value (between 0 and 1) at specified coordinates -
PI
Examples
Text(PI);Description
PI is a mathematical constant with the value 3.14159265358979323846.
-
TWO_PI
Examples
Text(TWO_PI);Description
TWO_PI is a mathematical constant with the value 6.28318530717958647693.
-
HALF_PI
Examples
Text(HALF_PI);Description
HALF_PI is a mathematical constant with the value 1.57079632679489661923.
-
QUARTER_PI
Examples
Text(QUARTER_PI);Description
QUARTER_PI is a mathematical constant with the value 0.7853982.
-
MouseX
Examples
Timer = Draw;
void Draw()
{
Background(200);
Line(MouseX, 0, MouseX, Height);
}
Description
The system variable MouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas.
Syntax
MouseX
-
MouseY
Examples
Timer = Draw;
void Draw()
{
Background(200);
Line(0, MouseY, Width, MouseY);
}
Description
The system variable MouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas.
Syntax
MouseY
-
MouseIsPressed
Examples
Timer = Draw;
void Draw()
{
Background(237, 34, 93);
Fill(0);
if (MouseIsPressed == true)
Ellipse(50, 50, 50, 50);
else
Rect(50, 50, 50, 50);
Text("MouseIsPressed: " + MouseIsPressed);
}
Description
The boolean system variable MouseIsPressed is true if the mouse is pressed and false if not.
Syntax
MouseIsPressed
-
MousePressed
Examples
MousePressed = OnMousePressed;
double value = 0;
Background(200);
void OnMousePressed()
{
Fill(value);
Rect(25, 25, 50, 50);
if (value == 0)
{
value = 255;
}
else
{
value = 0;
}
}
Description
The MousePressed property is called once after every time a mouse button is pressed. The MouseButton variable (see the related reference entry) can be used to determine which button has been pressed.
Syntax
MousePressed
-
MouseButton
Examples
Timer = Draw; void Draw() { Background(237, 34, 93); Fill(0); if (MouseButton == MouseButtons.Left) Ellipse(50, 50, 50, 50); if (MouseButton == MouseButtons.Right) Rect(50, 50, 50, 50); if (MouseButton == MouseButtons.Middle) Triangle(23, 75, 50, 20, 78, 75); PrintLn(MouseButton); }Description
The Coder automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable MouseButton is either Left, Right, or Middle depending on which button was pressed last.
Syntax
MouseButton
-
KeyIsPressed
Examples
Timer = Draw;
void Draw()
{
Fill(0);
if (KeyIsPressed == true)
{
Fill(255);
}
else
{
Fill(0);
}
Square(25, 25, 25);
}
Description
The Boolean system variable KeyIsPressed is true if any key is pressed and false if no keys are pressed.
Syntax
KeyIsPressed -
KeyPressed
Examples
KeyPressed = Draw;
int value = 0;
void Draw()
{
Fill(value);
if (value == 0)
{
value = 255;
}
else
{
value = 0;
}
Square(25, 25, 25);
}
Description
The KeyPressed variable is called once every time a key is pressed. The keycode for the key that was pressed is stored in the KeyCode variable.
Syntax
KeyPressed -
Key
Examples
KeyPressed = OnKeyPressed;
void OnKeyPressed()
{
Background(204);
Text(Key, 25, 25);
}
Description
The system variable Key always contains the value of the most recent key on the keyboard that was typed.
Syntax
Key -
KeyCode
Examples
KeyPressed = OnKeyPressed;
void OnKeyPressed()
{
Background(204);
Text(KeyCode, 25, 25);
}
Description
The variable KeyCode is used to detect special keys such as Back, Delete, Enter, Tab, Escape, LeftShift, RightShift, LeftCtrl, RightCtrl, Alt, Up, Down, Left, Right. You can also check for custom keys by looking up the KeyCode of any key.
Syntax
KeyCode -
Ellipse()
Examples
Ellipse(45, 45, 50, 80);
Description
Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. You are not allowed to use negative values. An ellipse with equal width and height is a circle.
Syntax
Ellipse(x, y, w, [h])
Parameters
x positive number: x-coordinate of the center of the ellipse
y positive number: y-coordinate of the center of the ellipse
w positive number: width of the ellipse
h positive number: height of the ellipse (optional) -
Circle()
Examples
Circle(45, 45, 50);
Description
Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the center. This function is a special case of the Ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the center of the circle, the third sets the diameter of the circle. You are not allowed to use negative values.
Syntax
Circle(x, y, d)
Parameters
x positive number: x-coordinate of the center of the circle
y positive number: y-coordinate of the center of the circle
d positive number: diameter of the center of the circle -
Rect()
Examples
Rect(45, 45, 50, 65);Description
Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. You are not allowed to use negative values.
Syntax
Rect(x, y, w, h)
Parameters
x positive number: x-coordinate of the upper left corner of the rectangle
y positive number: x-coordinate of the upper left corner of the rectangle
w positive number: width of the rectangle
h positive number: height of the rectangle -
Square()
Examples
Square(45, 40.35, 50);
Description
Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the Rect() function, where the width and height are the same, and the parameter is called "w" for width. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. You are not allowed to use negative values.
Syntax
Square(x, y, w)
Parameters
x positive number: x-coordinate of the upper left corner of the square
y positive number: x-coordinate of the upper left corner of the square
w positive number: width (and height) of the square -
Line()
Examples
Line(40, 60, 80, 100);
Description
Draws a line (a direct path between two points) to the screen.
Syntax
Line(x1, y1, x2, y2)
Parameters
x1 positive number: x-coordinate of the first point of the line
y1 positive number: y-coordinate of the first point of the line
x2 positive number: x-coordinate of the second point of the line
y2 positive number: y-coordinate of the second point of the line -
Triangle()
Examples
Triangle(20, 10, 80, 80, 100, 10);
Description
Draws a triangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. You are not allowed to use negative values.
Syntax
Triangle(x1, y1, x2, y2, x3, y3)
Parameters
x1 positive number: x-coordinate of the first point of the triangle
y1 positive number: y-coordinate of the first point of the triangle
x2 positive number: x-coordinate of the second point of the triangle
y2 positive number: y-coordinate of the second point of the triangle
x3 positive number: x-coordinate of the third point of the triangle
y3 positive number: y-coordinate of the third point of the triangle -
Image()
Examples
string path = @"http://mana-buch.de/149/cover.png";
Image(path);
path = @"C:\images\Logo.png";
Image(path, 5, 10);
Description
This function requires only three parameters: path, x, and y - where (x, y) is the position of the image.
Syntax
Image(path, [x], [y])
Parameters
path: string with the file path of the image you want to display or internet address
x (optional): positive number: x-coordinate of the first point of the image
y (optional): positive number: y-coordinate of the first point of the image -
Point()
Examples
Point(20, 40);
Description
Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second param is the vertical value for the point.
Syntax
Point(x, y)
Parameters
x positive number: x-coordinate of the point
y positive number: y-coordinate of the point -
Arc()
Examples
Arc(100, 100, 200, 250, 50, 80, 45, true);
Description
This function draws an arc on the screen. The first two parameters define the starting point of the arc's ellipse, the third and fourth parameter define the end point of the arc's ellipse. By defining width and height you can form the arc. The angle rotation parameter allows you to tilt the whole arc. You can decide if the arc's ellipse should be drawn clockwise from the start to the end point or not by setting the rotation parameter either true or false.
Syntax
Arc(x1, y1, x2, y2, w, h, angle rotation, clockwise);
Parameters
x1 positive number: x-coordinate of the arc's ellipse start-point
y1 positive number: y-coordinate of the arc's ellipse start-point
x2 positive number: x-coordinate of the arc's ellipse end-point
y2 positive number: y-coordinate of the arc's ellipse end-point
w positive number: width of the arc's ellipse
h positive number: height of the arc's ellipse
angle rotation positive number: tilt of arc's ellipse
clockwise true/false: determines direction of rotation; true equals clockwise -
Bezier()
Examples
Bezier(25, 20, 100, 180, 280, 12, 305, 350, true);
Description
Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the anchor point. After that there are three control points defined, which the curve will running trough. The last parameter determines if there will be a line between the first and the last point or not.
Syntax
Bezier(xStart, yStart, x1, y1, x2, y2, x3, y3, isClosed)
Parameters
xStart positive number: x-coordinate of the Bezier curve's start-point
yStart positive number: y-coordinate of the Bezier curve's start-point
x1 positive number: x-coordinate of first point the Bezier curve is running through
y1 positive number: y-coordinate of first point the Bezier curve is running through
x2 positive number: x-coordinate of second point the Bezier curve is running through
y2 positive number: y-coordinate of second point the Bezier curve is running through
x3 positive number: x-coordinate of third point the Bezier curve is running through
y3 positive number: y-coordinate of third point the Bezier curve is running through
isClosed true/false: determines whether start and last point are connected or not -
Text()
Examples
Text("Test", 25, 30, 20, 30);
Description
Draws text to the screen. Displays the information specified in the first parameter in the screen in the position specified by the x and y parameters. The size of the text field can be influenced by the optional parameters w and h.
Syntax
Text(text, x, y, [w], [h])
Parameters
text Text that is going to be displayed
x positive number: x-coordinate of the upper left corner of the text field
y positive number: y-coordinate of the upper left corner of the text field
w positive number: width of the text field; influences text alignment (optional)
h positive number: height of the text field (optional) -
Background()
Examples
Background(50)
Description
The Background() function sets the color used for the background of the window. The default background is white. Background resets all settings (Stroke color and width, TextFont etc.). The default color space is RGB, with each value in the range from 0 to 255. The alpha range by default is also 0 to 255. If a single string argument is provided, RGB and RGBA color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
Syntax
Background(value)
Background(x1, x2, x3)
Background(x1, x2, x3, alpha)
Background(colorString)
Parameters
value: any value between 0 and 255
x1 number: red value (depending on the current color mode)
x2 number: green value (depending on the current color mode)
x3 number: blue value (depending on the current color mode)
alpha number: opacity of the background relative to current color range (default is 0-255) (Optional)
colorString: colorString e.g. "Red" -
Fill()
Examples
Fill(51);
Rect(50,50,60,60);
Description
Sets the color used to fill shapes. For example, if you run Fill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. The default color space is RGB, with each value in the range from 0 to 255. The alpha range by default is also 0 to 255. If a single string argument is provided, RGB and RGBA color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
Syntax
Fill(value)
Fill(x1, x2, x3)
Fill(x1, x2, x3, alpha)
Fill(gray value, alpha)
Fill(colorString)
Parameters
value: any value between 0 and 255
x1 Number: red value relative to the current color range
x2 Number: green value relative to the current color range
x3 Number: blue value relative to the current color range
alpha number: (Optional)
gray number: a gray value
colorString: color string e.g. "Red" -
NoFill()
Examples
NoFill();
Rect(50, 50, 60, 60);
Description
Disables filling geometry. If both NoStroke() and NoFill() are called, nothing will be drawn to the screen.
Syntax
NoFill() -
Stroke()
Examples
StrokeWeight(4);
Stroke(51);
Rect(100, 100, 60, 60);
Description
Sets the color used to draw lines and borders around shapes. The default color space is RGB, with each value in the range from 0 to 255. The alpha range by default is also 0 to 255. If a single string argument is provided, RGB and RGBA color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
Syntax
Stroke(value)
Stroke(x1, x2, x3)
Stroke(x1, x2, x3, alpha)
Stroke(gray value, alpha)
Stroke(colorString)
Parameters
value: any value between 0 and 255
x1 Number: red value relative to the current color range
x2 Number: green value relative to the current color range
x3 Number: blue value relative to the current color range
alpha number: (Optional)
gray number: a gray value
colorString: color string e.g. "Red" -
NoStroke()
Examples
NoStroke();
Rect(50, 50, 60, 60);
Description
Disables drawing the stroke (outline). If both NoStroke() and NoFill() are called, nothing will be drawn to the screen.
Syntax
NoStroke() -
TextSize()
Examples
TextSize(13);
Text("Font Size 13", 10, 30);
TextSize(15);
Text("Font Size 15", 10, 60);
TextSize(17);
Text("Font Size 17", 10, 90);
Description
Sets/gets the current font size. This size will be used in all subsequent calls to the Text() function. Font size is measured in pixels.
Syntax
TextSize(size)
Parameters
size number: the size of the letters in units of pixels -
TextFont()
Examples
TextSize(12);
TextFont("Georgia");
Text("Georgia", 12, 30);
TextFont("Helvetica");
Text("Helvetica", 12, 60);
Description
Sets the current font that will be drawn with the Text() function.
Syntax
TextFont(textFont)
Parameters
textFont: the font -
TextColor()
Examples
TextColor("Red");
Text("Text Color", 10, 30);
Description
The TextColor() function changes the text color of the written text.
Syntax
TextColor(value)
TextColor(x1, x2, x3)
TextColor(x1, x2, x3, alpha)
TextColor(colorString)
Parameters
value: any value between 0 and 255
x1 number: red value (depending on the current color mode)
x2 number: green value (depending on the current color mode)
x3 number: blue value (depending on the current color mode)
alpha number: opacity of the background relative to current color range (default is 0-255) (Optional)
colorString: colorString e.g. "Red" -
Rotate()
Examples
Timer = Draw;
void Draw()
{
Background(128);
Translate(2,2);
Rotate(Radians(0.45));
Rect(Width/2, Height/2, 50, 50);
}
Description
Rotates a shape by the amount specified by the angle parameter. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect.
Syntax
Rotate(angle)
Parameters
angle number: the angle of rotation, specified degrees -
Translate()
Examples
Rect(40, 40, 55, 55);
Translate(30, 20);
Rect(50, 50, 55, 55);
Translate(14, 14);
Rect(60, 60, 55, 55);
Timer = Draw; var rectangle = Rect(0, 0, 55, 55); void Draw() { rectangle.Translate(1, 1); } -
StrokeWeight()
Examples
StrokeWeight(1);
Line(20, 20, 80, 20);
StrokeWeight(4);
Line(20, 40, 80, 40);
StrokeWeight(10);
Line(20, 70, 80, 70);
Description
Sets the width of the stroke used for lines, points and the border around shapes. All widths are set in units of pixels. Note that it is affected by any transformation or scaling that has been applied previously.
Syntax
StrokeWeight(weight)
Parameters
weight number: the weight of the stroke (in pixels) -
StrokeCap()
Examples
StrokeWeight(12.0);
StrokeCap(StrokeCaps.Flat);
Line(20, 10, 80, 10);
StrokeCap(StrokeCaps.Square);
Line(20, 30, 80, 30);
StrokeCap(StrokeCaps.Round);
Line(20, 50, 80, 50);
StrokeCap(StrokeCaps.Triangle);
Line(20, 70, 80, 70);
Description
Sets the style for rendering line endings. These ends are either rounded, squared or extended, each of which specified with the corresponding parameters: Flat, Square, Round, Triangle.
Syntax
StrokeCap(StrokeCaps.cap)
Parameters
cap: Flat, Square, Round, Triangle -
EllipseMode()
Examples
EllipseMode(EllipseModes.Corner);
Fill(255);
Ellipse(50, 50, 30, 30);
Description
Modifies the location from which ellipses are drawn by changing the way in which parameters given to Ellipse(), Circle() are interpreted. The default mode is Center, in which the first two parameters are interpreted as the shape's center point's x and y coordinates respectively, while the third and fourth parameters are its width and height. EllipseMode(Corner) interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.
Syntax
EllipseMode(EllipseModes.mode)
Parameters
mode: Center or Corner -
RectMode()
Examples
RectMode(RectModes.Corner);
Fill(255);
Rect(25,25,50,50);
Description
Modifies the location from which rectangles are drawn by changing the way in which parameters given to Rect() are interpreted. The default mode is Corner, which interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height. RectMode(RectModes.Corner) interprets the first two parameters as the location of one of the corners, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not necessary that the first corner be the upper left corner. RectMode(RectModes.Center) interprets the first two parameters as the shape's center point, while the third and fourth parameters are its width and height.
Syntax
RectMode(RectModes.mode)
Parameters
mode: Corner or Center -
PrintLn()
Examples
PrintLn("Hello World")
Description
The Println() function writes to the console area, the black rectangle at the bottom of the environment. This function is often helpful for looking at the data a program is producing. Each call to this function creates a new line of output.
Syntax
PrintLn()
Environment
Math
Mouse
Keyboard
Shapes
Settings
Transform
Description
Specifies an amount to displace objects within the display window.
The x parameter specifies left/right translation, the y parameter specifies up/down translation.
The new objects will be drawing at new 0,0. It is possible that the objects will overlap.
Syntax
Translate(x, y) Parameters
x number: left/right translation
y number: up/down translation
y number: up/down translation
Attributes
Misc
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Concept and ideas from Processing, initiated by Ben Fry and Casey Reas.