Error
Errors:
View the Full Reference.!
Processing Documentation
Shapes
Rectangles
// Draws a rectangle with the top left at (x, y) rect(x, y, width, height);
Ellipses and Circles
// Draws an ellipse // `x` is the coordinate of the left side // `y` is the coordinate of the top side ellipse(x, y, width, height); // To draw a circle, just make width and height // the same value, which is the diameter ellipse(x, y, diameter, diameter)
Lines
// Draws a line from (x1, y1) to (x2, y2) line(x1, y1, x2, y2);
Text
// Set the font for the next text you draw textFont(fontName); // Set the font size for the next text you draw textSize(size); // Draws "Hello" on the screen at (x, y) text("Hello", x, y);
Points
// Draws a point at the given coordinates point(x, y);
Triangles
// Draws a triangle // You must pass 3 coordinates for each point triangle(x1, y1, x2, y2, x3, y3);
Color
Fill Colors
// Set the whole background color with the given // red, green, blue values (r, g, b) background(r, g, b);
// Set the fill color for the next shape you draw // with the given red, green, blue values (r, g, b) fill(r, g, b);
// Remove the fill color for the next shape you draw noFill(r, g, b);
Outline Colors
// Set the outline color for the next shape you draw // with the given red, green, blue values (r, g, b) stroke(r, g, b);
// Remove the outline for the next shape you draw noStroke(r, g, b);
Animation
// Defining the `draw` function like this will // run the code inside the function repeatedly draw = function() { // Your code here will repeat }
Interaction
Mouse
// current x-coordinate of the mouse mouseX // current y-coordinate of the mouse mouseY // Draw a 10x10 square where the mouse is rect(mouseX, mouseY, 10, 10)
// Handle mouse events // Define one of these functions mouseClicked = function() { // Code here runs when the mouse is clicked // (This is a full click when you release the button) } mousePressed = function() { // Code here runs when the mouse is pressed // This is before your hand lifts up off the button } mouseReleased = function() { // Code here runs when the mouse is released // This is when your hand lifts up off the button } mouseMoved = function() { // Code here runs when the mouse is moved } mouseDragged = function() { // Code here runs when the mouse is dragged }
Keyboard
// Value for which key is being pressed right now key key.toString() // Returns a string with the value of the key key.code // Returns the numeric key code // Boolean for whether any key is currently being pressed keyIsPressed // Example if (keyIsPressed) { // Do something because a key is being pressed }
// Handle keyboard events // Define one of these functions keyPressed = function() { // Code here runs when the key is pressed // (This is a when you first touch the key) } keyReleased = function() { // Code here runs when the key is released // (This is when you release your finger from the key) }
Numbers
Canvas
// Get the width of the screen width // Get the height of the screen height // Draw an ellipse that's the half the width // and half the height of the screen ellipse(0, 0, width / 2, height / 2);
Random
// Get a random number between 0 and `num` random(num); // Get a random x coordinate on the screen var x = random(width) // Get a random y coordinate on the screen var y = random(height) // Draw a circle with diameter 10 at that random spot ellipse(x, y, 10, 10) // Set the background to a random color // Each r/g/b value can go up to 255 background(random(255), random(255), random(255))
Slides and Notes
No slides available for this video
Collaborate on this sandbox program!
Admin Only. Not visible to customers
A collaborative program is a program you can work on with a partner or group of people. The program shows up in all of your sandbox pages, and when any of you save code, it will save it for each person.
Current Collaborators:
Embed Your Code On an HTML Page
Want to use your CodeHS code outside of CodeHS? Use this embed code to get started.
How to Use
Version 1: On Your Computer
- Create a file called
codehs.html
on your desktop - Put the html below into the codehs.html file and save it
- Now double click the file to open it in a web browser
Version 2: Online
- Create a file called
codehs.html
on your desktop - Put the html below into the codehs.html file and save it
- Upload this file to the internet
- Visit your web page
Note this only works on single files currently.
About
Processing.js