Processing
Processing is a developer that offers free software built with the purpose of teaching non-programmers the basics of visual computer programming. Ideal for those wanting to experiment with electronic arts and new media. As of now, you can code in three different languages:- Processing (Java), p5.js (JavaScript) and Processing.py (Python)
Java is a high-level, object-orientated programming language, this means the instruction you write does not look like the way spoken language is written and consider the shape first before giving it colour or movement.
If you’d like to integrate your coding projects onto the web, have a play around with p5.js. As JavaScript, is the language used to add animation and various protocols on HTML sites. Despite having a similar name, Java and JavaScript are entirely different languages.
Python is a high-level, general-purpose programming language, therefore the way it is written differs from spoken language. However, the name of the functions is much simpler to understand than the name of the functions of Java. The majority of Machine Learning based code is written in Python.
Processing is a developer that offers free software built with the purpose of teaching non-programmers the basics of visual computer programming. Ideal for those wanting to experiment with electronic arts and new media. As of now, you can code in three different languages:- Processing (Java), p5.js (JavaScript) and Processing.py (Python)
Java is a high-level, object-orientated programming language, this means the instruction you write does not look like the way spoken language is written and consider the shape first before giving it colour or movement.
If you’d like to integrate your coding projects onto the web, have a play around with p5.js. As JavaScript, is the language used to add animation and various protocols on HTML sites. Despite having a similar name, Java and JavaScript are entirely different languages.
Python is a high-level, general-purpose programming language, therefore the way it is written differs from spoken language. However, the name of the functions is much simpler to understand than the name of the functions of Java. The majority of Machine Learning based code is written in Python.
In this post, we will be predominately focusing on Processing (Java) and how we can use ChatGPT to accelerate our project build. As I am not an expert nor fluent in the language, I’m merely a person wanting to find a way to make my projects palpable with the least amount of time learning.
- Think Like a Coder
- An Introduction to Java Structure
- Building Your First Project
- Build Your project using ChatGPT
Need inspiration?
Creative Applications Network is a paid membership community for creative practitioners working with interactive media
Open Processing is a creative coding community focusing on Open Source sharing
Deconbatch is a personal blog full of creative coding examples
1. Think Like a Coder
Coding is not scary, the language and structure themselves are very simple. The most challenging aspect is shifting your way of thinking from abstract to analytical.
For example - Draw a Circle
Abstract thinking: imagine a doughnut, hold the pencil and draw the shape of a doughnut.
Analytical thinking: on a white piece of paper, using a pencil with a black lead, starts at 0 degrees, and move your hand clockwise 360 degrees, the radius of the circle is 3cm.
With analytical thinking, it forces you to move away from the convention of using metaphors or similies to descript an event, to becoming more concise and direct with your language use. Every detail has to be thought of and explained in simple terms.
If you want a ball to move from point A to point B. Here are some of the variables that may affect the path of travel:-
This method of thinking is vital when working with programming languages whether it syntax based like Processing or visual-based like Max. It is also useful for later on when we are writing prompts for ChatGPT to build our Processing projects.
Coding is not scary, the language and structure themselves are very simple. The most challenging aspect is shifting your way of thinking from abstract to analytical.
For example - Draw a Circle
Abstract thinking: imagine a doughnut, hold the pencil and draw the shape of a doughnut.
Analytical thinking: on a white piece of paper, using a pencil with a black lead, starts at 0 degrees, and move your hand clockwise 360 degrees, the radius of the circle is 3cm.
With analytical thinking, it forces you to move away from the convention of using metaphors or similies to descript an event, to becoming more concise and direct with your language use. Every detail has to be thought of and explained in simple terms.
If you want a ball to move from point A to point B. Here are some of the variables that may affect the path of travel:-
- The speed at which the ball is released
- Distance between A & B
- Time it takes for the ball to arrive at point B
- Terrain surface, is it grass? or gravel? As friction can affects the speed
- Is there an incline?
- Is it a straight or curved path?
This method of thinking is vital when working with programming languages whether it syntax based like Processing or visual-based like Max. It is also useful for later on when we are writing prompts for ChatGPT to build our Processing projects.
2.
An Introduction to Java Structure
Processing has an incredible amount of resources and documentation on its website. You don’t have to know everything. You just have to understand the basics.
A quick outline of how to structure Java.
This line is a code that describes an object
> This object has a red colour
> This object is a size of x cm
>> If the cursor moves to the right, it increases the size of the object by y amount;
>> if the cursor moves to the left, it decreases the size of the object by z amount
End of object
Key: > is the amount of indentation
{ } is your main object
( ) is your attributes of the object
Draw an object {
The shape is a circle (radius r);
The fill colour (red);
}
Note: this is not the right syntax for Java, I’m writing it out in this way to explain the concept.
For additional resources and inspiration for your first project, check out Processing Tutorials and Library here
Processing has an incredible amount of resources and documentation on its website. You don’t have to know everything. You just have to understand the basics.
A quick outline of how to structure Java.
- Order of code - the coded object at the top of the page is the bottom layer of your project. Then you build it up by adding more lines of code.
- Off-side rule - the indentation of code matters. When working in blocks of code with multiple objects, the indentation denotes the step of the process.
This line is a code that describes an object
> This object has a red colour
> This object is a size of x cm
>> If the cursor moves to the right, it increases the size of the object by y amount;
>> if the cursor moves to the left, it decreases the size of the object by z amount
End of object
Key: > is the amount of indentation
- Every open brackets has a closing bracket. Different brackets have different purposes.
{ } is your main object
( ) is your attributes of the object
Draw an object {
The shape is a circle (radius r);
The fill colour (red);
}
Note: this is not the right syntax for Java, I’m writing it out in this way to explain the concept.
- End your syntax with ; it signifies the end of your instruction for that variable.
- The codes at the top of the page outside the brackets are definited values or keys that can be used or mentioned later in the process.
For additional resources and inspiration for your first project, check out Processing Tutorials and Library here
3.
Building Your First Project
Let’s gooooooo! This example draws a line when the cursor moves from one position to another.
void setup() {
size(200, 200);
strokeWeight(8);
}
void draw() {
background(204);
line(mouseX, mouseY, pmouseX, pmouseY);
}
This code is from the Interactivity section written by Casey Reas and Ben Fry from Processing: A Programming Handbook for Visual Designers and Artists, Second Edition,
Levelling up
https://processing.org/examples/continuouslines.html
More project examples here >> https://processing.org/examples
Let’s gooooooo! This example draws a line when the cursor moves from one position to another.
void setup() {
size(200, 200);
strokeWeight(8);
}
void draw() {
background(204);
line(mouseX, mouseY, pmouseX, pmouseY);
}
- void setup ( ) is on your canvas; what’s the background dimension for your objects to appear on? size(x pixels, y pixels) And how thick is your brush?
- void draw ( ) what object or shape do you want to be on your canvas?
- line(mouseX, mouseY, pmouseX, pmouseY) the starting point of your cursor (x,y coordinates) and the previous point of your cursor (x, y, coordinates).
- Run your project
This code is from the Interactivity section written by Casey Reas and Ben Fry from Processing: A Programming Handbook for Visual Designers and Artists, Second Edition,
Levelling up
https://processing.org/examples/continuouslines.html
More project examples here >> https://processing.org/examples
4. Build Your Project using ChatGPT
ChatGPT is an Artificial Intelligence chatbot developed by OpenAI that uses supervised and reinforcement learning techniques. The chatbot can be used as a search engine or an assistant in developing your Java-based project.
It can write code snippets for you and not the full programme due to the character limitation on the free version.
Hot Tips ︎:
- Think analytically
- Clear and concise statement
- Don’t forget to mention the coding language you need and the software you’re running it on
When creating a project there are two key elements - the input and the output.
Input: How do you want it to start?
Output: What do you want it to do?
The difficult part is figuring out what action/s you want to include to achieve your output.
Let’s use our previous example as a prompt - “draws a line when the cursor moves from one position to another” to make a drawing pad.
In ChatGPT:
Create this in Java for Processing by drawing a line when the cursor moves from one position to another.
ChatGPT interpreted this as an example code in Java for Processing that will draw a line whenever the cursor moves.
This makes a continuous line drawing instead of what we made earlier.
Next, we are going to add the ability to erase all of the lines by pressing the spacebar
To this code, add the ability to remove the line when the spacebar is pressed.
The line is no longer drawing, therefore we need to clarify how the line starts.
Improve this code, when the mouse is pressed and held the line is drawn. When the mouse is released the line stops drawing.
But then, ChatGPT forgot our spacebar code! So don’t forget to tell it to add it back.
In the end, the additional code didn’t work at all! :(
This happened because we were relying on ChatGPT to have common sense but what it lacked was us being more descriptive with what we wanted.
Here’s the failed code :( ︎
ChatGPT is an Artificial Intelligence chatbot developed by OpenAI that uses supervised and reinforcement learning techniques. The chatbot can be used as a search engine or an assistant in developing your Java-based project.
It can write code snippets for you and not the full programme due to the character limitation on the free version.
Hot Tips ︎:
- Think analytically
- Clear and concise statement
- Don’t forget to mention the coding language you need and the software you’re running it on
When creating a project there are two key elements - the input and the output.
Input: How do you want it to start?
Output: What do you want it to do?
The difficult part is figuring out what action/s you want to include to achieve your output.
Let’s use our previous example as a prompt - “draws a line when the cursor moves from one position to another” to make a drawing pad.
In ChatGPT:
Create this in Java for Processing by drawing a line when the cursor moves from one position to another.
ChatGPT interpreted this as an example code in Java for Processing that will draw a line whenever the cursor moves.
This makes a continuous line drawing instead of what we made earlier.
Next, we are going to add the ability to erase all of the lines by pressing the spacebar
To this code, add the ability to remove the line when the spacebar is pressed.
The line is no longer drawing, therefore we need to clarify how the line starts.
Improve this code, when the mouse is pressed and held the line is drawn. When the mouse is released the line stops drawing.
But then, ChatGPT forgot our spacebar code! So don’t forget to tell it to add it back.
In the end, the additional code didn’t work at all! :(
This happened because we were relying on ChatGPT to have common sense but what it lacked was us being more descriptive with what we wanted.
Here’s the failed code :( ︎
Here’s the improved prompt
Create a project for Processing using Java to make a drawing pad where the mouse point creates a line and when a spacebar is pressed the line is cleared. The drawing pad is 500 by 500 pixels with a white background and the line is in black with a stroke weight of 8 pixels.
GitHub Link for the code ︎
Instead of using five steps to build the project, this prompt worked the first time as it stated what you wanted to make, how you want to create and what it should look like.
Last example of interactivity
Create a Java project for Processing that is interactive allowing 3D particles to grow, and increase in number, on a black background. To grow, press 'a' to stop growth release 'a', to increase in number press 's' to decrease press 'd', to randomise the colours of the particles press 'f', and add the ability to move the particles using the mouse pad to the code.
GitHub Link for the code ︎
Create a project for Processing using Java to make a drawing pad where the mouse point creates a line and when a spacebar is pressed the line is cleared. The drawing pad is 500 by 500 pixels with a white background and the line is in black with a stroke weight of 8 pixels.
GitHub Link for the code ︎
Instead of using five steps to build the project, this prompt worked the first time as it stated what you wanted to make, how you want to create and what it should look like.
Last example of interactivity
Create a Java project for Processing that is interactive allowing 3D particles to grow, and increase in number, on a black background. To grow, press 'a' to stop growth release 'a', to increase in number press 's' to decrease press 'd', to randomise the colours of the particles press 'f', and add the ability to move the particles using the mouse pad to the code.
GitHub Link for the code ︎