A lightweight open-source graphics library created by a Java instructor for high school students taking AP Computer Science. It makes Java game development accessible to students who are programming for the first time, and is actively maintained by Techlab Education. There is a getting started guide to help you get Java, Eclipse (a popular IDE), and APCS graphics set up on your computer. You can also read the curriculum that we use for teaching with APCS graphics.
We would love to hear how you are using APCS graphics. Email [email protected] to start a conversation!
All graphics functionality is abstracted to static methods, so there are no mysterious classes to extend or rigid class hierarchies to conform to. You can quickly visualize a simulation of a bouncing ball, recreate the viral game Flappy Bird, or build a clone of agar.io.
// A bouncing ball simulation
int x = 50, y = 50, dy = 0;
while (true) {
Window.out.background("white");
// Draw the ball.
Window.out.color("red");
Window.out.circle(x, y, 20);
// Move the ball.
x = x + 5;
y = y + dy;
dy = dy + 1;
// Bounce the ball if it hits the ground.
if (y > 480) {
y = 480;
dy = dy * -9 / 10;
}
// Complete a frame of the animation.
Window.frame();
}The Window.size method sets the dimensions of the window.
Window.size(width, height)Calling Window.size is optional - performing any other drawing command will automatically create a window of the default size (500 x 500).
The APCS library has methods for drawing common shapes like circles, rectangles, ovals, squares, lines, polygons, and text. These methods are organized under the Window.out class.
Calling any
Window.outmethod will open the output window if it is not yet open.
The color of the shape being drawn is determined by the window's current drawing color, which is initially white. To change the drawing color, use the Window.out.color method. You can either use a String color (e.g. Window.out.color("red")) or an RGB value to specify the color.
Window.out.color(colorName)
Window.out.color(red, green, blue)The 500 most popular colors are included in the window library - to add additional colors, use Window.addColor.
Window.addColor(colorName, red, green, blue)
In the control flow lab, students use mouse clicks and bounding boxes to select the color in an interactive drawing application.
Window.out.circle draws a circle centered at the position (x, y) with the given radius.
Window.out.circle(x, y, radius)
// A class to describe a single ball.
public class Ball {
int x, y, dx, dy;
public Ball() { ... }
public void draw() { ... }
public void move() { ... }
}
// Create a list of Ball objects.
Ball[] list = new Ball[100];
for (int i = 0 ; i < 100 ; i++) {
list[i] = new Ball();
}
while (true) {
Window.out.background("white");
// Draw and move each ball.
for (Ball b : list) {
b.draw();
b.move();
}
Window.frame();
}Window.out.square draws a square centered at the position (x, y) with the given side length.
Window.out.square(x, y, length)
Conway's game of life is a simulation devised by the mathematician John Horton Conway, where a universe of cells lives and dies according to a simple set of rules:
The Underpopulation Rule: A living cell with fewer than two live neighbors dies.
The Survival Rule: A living cell with two or three live neighbors survives to the next generation.
The Overpopulation Rule: A living cell with more than three neighbors dies.
The Reproduction Rule: A dead cell with exactly 3 neighbors comes to life in the next generation.
Window.out.rectangle draws a rectangle centered at the position (x, y) with the given width and height.
Window.out.rectangle(x, y, width, height)
One of the first challenges in the Flappy Bird lab is calculating the positions and sizes of the pipe rectangles.
Window.out.oval draws an oval centered at the position (x, y) with the given width and height.
Window.out.oval(x, y, width, height)
We start the Flappy Bird lab by drawing a simple oval to represent the bird, and first implementing the physics behind the bird's motion.
Window.out.line draws a line between the starting position (x1, y1) and the ending position (x2, y2).
Window.out.line(x1, y1, x2, y2)Window.out.image draws an image with the given (x, y) coordinate at the top left corner.
Window.out.line(x1, y1, x2, y2)Window.out.background sets the background of the window to the color specified by the string name or RGB value. This method erases everything that has been drawn on the window and replaces it with the given color. Setting the background will also change the current drawing color to that color.
Window.out.background(colorName)
Window.out.background(red, green, blue)
int x = 250, y = 250,
dx = 4, dy = 3;
while (true) {
// Draw the background first.
Window.out.background("white");
// Change the color to the ball's color, then draw it.
Window.out.color("red");
Window.out.circle(x, y, 10);
// Move the ball.
x = x + dx;
y = y + dy;
// Check for collisions.
if (x > 490) { ... }
if (x < 10) { ... }
if (y > 490) { ... }
if (y < 10) { ... }
// Draw one frame.
Window.frame();
}Animations are created by showing still images called frames in rapid succession. The movies you see in a theater have 24 frames per second - that is, every second your brain is seeing twenty-four slightly different images, and stitching them together to give the illusion of motion.
The easiest way to create animations with code is to endlessly loop a block of instructions that draws a single frame. Your computer can perform drawing instructions in less than a millisecond, so we need to insert a small pause between each repetition to give our brains enough time to process the frame.
The easiest way to insert that pause is with the Window.frame method, which can optionally take in the number of milliseconds to wait for. The default delay between frames is 33 milliseconds, to achieve a frame rate of around 30 frames per second (fps).
Window.frame()
Window.frame(milliseconds)You can insert a manual delay into the program with Window.sleep which takes an integer number of milliseconds to wait for.
Window.sleep( milliseconds )The Window.frame method starts double buffering the window. After the first call to Window.frame, the visual state of the window is frozen, and all subsequent drawing commands are performed on a background window that is not shown. Once the Window.frame method is called again, the background window's contents are copied and frozen on the visible window, and all subsequent drawings are again done on the background. This process eliminates flicker by ensuring a frame is fully rendered before displaying it on the screen, and adjusts the delay time between frames by the time taken to render the frame.
// Setup...
while (true) {
// Draw one frame...
Window.frame();
}You can set the frame rate (the number of frames displayed each second) with the Window.setFrameRate method. Setting the frame rate will automatically calculate the number of milliseconds to wait when Window.frame is called with no arguments.
Window.setFrameRate(rate)The methods for getting input from the mouse are organized under the Window.mouse class.
Window.mouse.getX and Window.mouse.getY return the x and y position of the mouse, respectively.
Window.mouse.getX()
Window.mouse.getY()
Window.mouse.clicked returns true if the mouse is clicked, and false otherwise.
Window.mouse.clicked()The methods for getting keyboard input are organized under the Window.key class.
Window.key.pressed()
Window.key.pressed( char )
Window.key.pressed( string )Window.key.released()
Window.key.released( char )
Window.key.released( string )Window.key.typed( char )
Window.key.typed( string )
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent