Today:

• 3d!
• Layers of Abstraction in computing
• Binary
• Java

Processing in 3D

There are more rendering modes in Processing. The default renderer is P2D. There is also P3D, PDF and SVG. To use a non-default mode you specify it in the size() function.

example

void setup(){
  size(200,200,P3D)  
}

Different renderers have different libraries under the hood in Processing. This is used for the Java library to change color, shapes, text and more. They run at different speeds and have somewhat different use-cases and features.

Use the P3D render mode for drawing in 3D, and for potentially even in 2D if you need a particular effect that is only available using P3D such as texturing or lighting.

As you can see in this image, the x and y work as we’ve observed so far. We now add a 3rd dimension, z, which increases moving toward you and decreases moving away.

To work in 3D space you must use translate() and add a 3rd argument

translate(x, y, z);

Example 1 - a square moving toward you

//from Processing.org
float x,y,z;

void setup() {
  size(200,200,P3D);
  x = width/2;
  y = height/2;
  z = 0;
}

void draw() {
  translate(x,y,z);
  rectMode(CENTER);
  rect(0,0,100,100);

  z++; // The rectangle moves forward as z increments.
}

We can rotate around axes

size(200, 200, P3D);
background(100);
rectMode(CENTER);
fill(51);
stroke(255);

translate(100, 100, 0);
rotateZ(PI/8); //try rotating around X or Y axis
rect(0, 0, 100, 100);

There are 3d basic shapes available, as well as lighting

void setup() {
  size(200, 200, P3D);
}

void draw() {
  background(0);
  translate(100, 100, 0);
  if (mousePressed) {
    lights();
  }
  noStroke();
  fill(255);
  sphere(50);
}

There are 4 kinds of lighting

• ambientLight()
• directionalLight()
• spotLight()
• pointLight()

In addition to lighting we also have access to change the view of the scene, which is called the camera. We can zoom in, rotate and scale. This isn’t an actual camera, but it’s more like we are directing a camera to take a view of a particular virtual scene.

An example with the Camera

void setup() {
  size(640, 360, P3D);
}

void draw() {
  background(0);
  lights();
  camera(mouseX, height/2, (height/2) / tan(PI/6), width/2, height/2, 0, 0, 1, 0);
  translate(width/2, height/2, -100);
  stroke(255);
  box(200);
}

Resources

Much more information can be found at the P3D tutorial page

Computing

Parts of computing

• you need an editor, compiler and linker
• an IDE (Integrated Development Library) combines all 3
• the end product is that software results in hardware doing something

Writing software - behind the scenes

1. write source code
2. compile source code into object code
3. link the compiled code to libraries needed to build the code
4. run it and test it

Abstraction - layers of computing

Binary - Base 2

Adding in Binary - a wooden mechanical ‘computer’ - video

In mathematics and digital electronics, a binary number is a number expressed in the base-2 numeral system or binary numeral system, which uses only two symbols: typically 0 (zero) and 1 (one).

Binary lets us use a system of logic. Truth and False. On and off.

Counting in binary

Optional cute video: Binary for Kids - video

Bits and Bytes

The length of a binary number is the amount of 1’s and 0’s it has. In other words, the number of digits is called the length.

Common bit-lengths of binary numbers include bits, nibbles, and bytes

Each 1 or 0 in a binary number is called a bit.

The byte is a unit of digital information that most commonly consists of eight bits, representing a binary number. Historically, the byte was the number of bits used to encode a single character of text in a computer.

A byte can hold values from 0 to 255.

Java!

void setup(){
  size(500, 500);
}

void draw(){
  background(64);
  ellipse(mouseX, mouseY, 20, 20);
}

BECOMES:

import processing.core.PApplet;

public class MySketch extends PApplet {

	public void settings() {
		size(500, 500);
	}

	public void draw(){
		background(64);
		ellipse(mouseX, mouseY, 20, 20);
	}
  
	public static void main(String[] passedArgs) {
		String[] appletArgs = new String[] { "MySketch" };
		PApplet.main(appletArgs);
    }
}

This works because Processing is written in Java. So the Processing editor can take your Processing code and make a few minor adjustments, such as putting it inside a class inside a .java file, to create valid Java code. Then it compiles and runs that Java code, exactly how we’ve been compiling and running our Java code in these tutorials.

example from Happy Coding

Final Project

Our assignments so far have been fairly restrictive. For your final project, I want to open up the field for you to create a project of your choice. The project should use skills and tools we developed this semester. You may create a new project, or build off of another program from earlier in the semester. Your final project could be a tool, game, visualization, animation, interactive artwork or other software project.

So far in this course we have covered:

• variables and types
• loops
• conditionals
• functions
• arrays
• the debugging process
• classes and objects
• history of computation and binary and machine code
• algorithms
• 3D Space, translation, rotation
• lighting and 3d objects
• working with libraries: live capture, video and sound
• manipulating the pixel array
• working with images
• Strings and fonts

Consider these elements in the creation of your own work for the final project.

Your final project should have a separate document page with the following

1. Final Project title
2. 1 paragraph description
3. 1 page about your project
   • What was your approach or strategy did you take in creating your project?
   • How does someone use your software?
   • What libraries, tools or other resources did you use, if any?
   • Notes about challenges when working on the projects. What barriers did you run into and how did you solve it?
4. Include your weekly log files.
5. Include at least 3 screenshots of your project running, including opening screen, while the program is running, and potentially a final page. Add your help page or any other pages.

Your code must:

• be clear and organized
• use comments to make sections and particular parts of your code clear
• work without bugs
• work properly in fullscreen

Your final project design must:

• Be a compelling and interesting program made with code
• Properly cite any code that you found and used online
• Create a compelling interactive work synthesizing both concept and technical execution
• Have an info page, which could be on a landing page/start page, or be a separate page
• Have clear indicated instructions for interaction (visual keys or a help/info page)
• Have a way to reset and start the sketch over again

Final Project proposal

Review the requirements for your final project.

1. Post a proposal for your final project. What is the concept? What tools or resources will you use? Give specifics. Respond to any questions.

Write your first weekly log file

For the first weekly log file, write the following:

1. Write out in pseudocode the flow of your program. If it helps, draw a flowchart that shows your software and any interactivity. What happens first? What happens next, and in what order? Where do branching choices occur?
2. What questions do you have? What are you concerned about?
3. How will you get started?