Hello Processing

🍁 Happy November 🍵

View on GitHub

Introduction to Processing with Java

Objective

To familiarize one with the Processing environment and its basic functions, as well as to provide an introduction to Java programming concepts.

Part 1: Setting up Processing

1. Installation Download and install the Processing software from Processing Reference Open the Processing IDE and familiarize yourself with the interface.


Part 2: First Sketch

Let’s draw an ellipse!

👾Hint👾 Using documentation is the 🔑


💖 Code Answer 💖


Press the play button (or Ctrl+R) to run your sketch.

Detailed Answer You should see a window with a circle in the center of it. This is because the 
size(400, 400)
function sets the size of the window to be 400x400 pixels, the 
  background(200)
function sets the background color to a shade of gray, and the 
  ellipse(200, 200, 50, 50)
function draws a circle in the center of the window with a width and height of 50 pixels. 
Void
means the function will not return a value the () is where an argument for the function would go {} denotes everything that belongs to the function
Void Setup
Imagine you have a sketchbook. Before you start drawing, you might prepare your page, decide on the background color, or choose your tools. Once everything is set up, you start drawing, and maybe you keep drawing patterns over and over on the same page.

Preparing Your Sketchbook 
 void setup()

In Processing, the function 
 void setup()
This is like preparing your sketchbook. It runs once, right at the beginning when you first start your program. Inside void setup(), you can:

- Set the size of your canvas using the function 
size()
- Choose the background color with the function 
background()
- Initialize variables. - Load images, fonts, or sounds you want to use later. - Basically, any initial preparations you need before your main drawing begins.
Example 
  
  void setup() {
      size(400, 400);          // Set canvas size to 400 pixels by 400 pixels
      background(255, 0, 0);   // Set background color to red
    }
Void Draw 
 void draw()

Continuously Drawing on Your Canvas. The void draw() function is like the act of drawing on that prepared sketchbook page. But there's a twist! Whatever you put inside void draw() happens over and over again, almost like you're drawing, erasing, and redrawing repeatedly super fast (typically 60 times per second). This makes it perfect for animations, games, or any interactive programs where things change over time.

Inside void draw(), you can: - Draw shapes (like circles, rectangles, lines, etc.). - Check for user inputs (like mouse clicks or key presses). - Update positions of objects for animations. - Change colors, sizes, or any other properties of your drawings.

Example: 
    
    void draw() {
      background(220);         // Set a gray background every frame
      ellipse(mouseX, mouseY, 50, 50);  // Draw a circle at the mouse position
    }
Give the code example a try!
Here, the ellipse() function draws a circle. The 
  mouseX and mouseY
are special variables that always store the current position of the mouse. Since draw() is running over and over, the circle will appear to follow your mouse as you move it around the canvas!

In summary:

When you’re just starting, remember that it’s okay if things don’t make perfect sense right away. With time and practice, it’ll become second nature! And the most important thing is to have fun experimenting and creating with Processing.

Part 3. Create an Emoji

Create an emoji expressing some type of information: feelings, seasons, thoughts, etc. This may be an existing emoji or your own new emoji! Take a look here for some ideas: Emoji Reference

Step One 1. Set the canvas size, background color, and shape color:
meow


Step Two
Use geometry to create the face meow
Add shapes using the grid system meow
Step Three 3. Use Documentation to pick one new function to use in your assignment: Processing Documentation

Project Checklist

12.5 points per checkbox