Logo

Developer learning path

News
Processing

Creating shapes and lines in Processing

Introduction to Processing
What is Processing? History and background of Processing How to download and install Processing The Processing interface and features
Basic programming concepts
Introduction to programming language Basic elements of a Processing program Variables and data types Conditional statements and loops Functions and methods
Graphics programming with Processing
Basic drawing functions Creating shapes and lines Manipulating colors and gradients Image manipulation with Processing Animation and interactivity
Advanced graphics programming
3D graphics programming with Processing Working with shaders Physicsbased animation with Processing Audio and sound programming with Processing
Data visualization with Processing
Introduction to data visualization Reading and manipulating data with Processing Basic charting and graphing techniques Advanced data visualization techniques Building interactive data visualizations
Creating interactive applications with Processing
Designing interactive interfaces Handling user input and events Communicating with other software and devices Building standalone applications and mobile apps
Optimization and best practices
Debugging and error handling Performance optimization techniques Memory management Collaborating with others Best practices and tips for Processing development.

Creating shapes and lines

32

#description

Processing is an open-source programming language and development environment that is widely used for creating computer graphics and interactive media applications. In this course, you will learn how to use Processing to create lines and shapes in your projects.

To create lines, you can use the line() function in Processing. The line() function takes four parameters that define the starting and ending positions of the line.

For example, the following code creates a line that starts at (20, 40) and ends at (80, 100):

 
                    
line(20, 40, 80, 100);

You can also set the width and color of the line using the strokeWeight() and stroke() functions respectively.

For example, to create a red line with a thickness of 2 pixels, you would use the following code:

 
                    
stroke(255, 0, 0); // set stroke color to red
strokeWeight(2);   // set stroke thickness to 2 pixels
line(20, 40, 80, 100);

To create shapes, you can use one of several functions in Processing, depending on the shape you want to create. For example, the rect() function creates a rectangle shape, and the ellipse() function creates a circular or elliptical shape.

The rect() function takes four parameters that define the position and size of the rectangle.

For example, the following code creates a rectangle that starts at (50, 50) and is 100 pixels wide and 50 pixels high:

 
                    
rect(50, 50, 100, 50);

Similarly, the ellipse() function takes four parameters that define the position and size of the ellipse.

For example, the following code creates a circular shape with a diameter of 80 pixels at position (100, 100):

 
                    
ellipse(100, 100, 80, 80);

You can also set the fill color of the shape using the fill() function.

For example, to create a red rectangle with no stroke, you would use the following code:

 
                    
fill(255, 0, 0);  // set fill color to red
noStroke();       // disable stroke
rect(50, 50, 100, 50);

Overall, creating shapes and lines in Processing is a fundamental part of creating computer graphics and interactive media applications. With the knowledge gained in this course, you will be able to create a variety of shapes and lines to enhance your projects.

March 27, 2023

If you don't quite understand a paragraph in the lecture, just click on it and you can ask questions about it.

If you don't understand the whole question, click on the buttons below to get a new version of the explanation, practical examples, or to critique the question itself.