august 14 notes

August 14 notes

Minim libraries for using sound
Tritonin libraires will be future for sound in processing

toxi.code or toxilibs (look at google code).


Object oriented programming

An extension of the way to work. If you use functions you are starting to use object oriented programming.

Attributes and then stept.

Instantiate object – choose instance variables. Push matrix and pop matrix inside the class so you can draw lots of them. Variable in object-speak is an attribute. Can change attributes over time like a variable and find owh what they bcome.


Underscore is to separate variable that has already been defined. So it’s an instance of the variable and easier to figure out what you used because it’s similar without being the same, which you can’t use the same variable for 2 different thing.

To be really good you would encapsulate those values. Below is good code form for programming with many classes. Not usual for processing sketches which should be fast and simple.

void setX(_x) {
 x = _x; 
}

void get() {
 y = _y; 
}

Private variables are not available outside of something.


Peter showed an example of using laptop microphone to read into the cube tower and change the stacking order so it pops. Then he did a spectral analysis.

Objects makes it easier to use more than one object. Showed array of cube towers that react to his voice in different ways. Efficient and fast. Frequency spectrum. Has same basic idea.

Making arrays of objects. Go to people example.

CubeTower[] towers;

Class name[] array instance name. use plural for name of array so you remember what it is when you see it again.

When you create an object variable you make a space in memory for it. Like an empty box. First you create a name for it.

For an array, you make more of them. So name array and make a variable for it. Then you fill each empty box with some stuff.

Person[] people;
people = new Person[4];

pushMatrix and popMatrix is within the object class to draw but not within draw in this case.


For next week read dan shifmann’s class chapter 8 about object oriented programming and chapter 9 and do the examples.




Ben Fry book Visualizing Data uses processing for all the examples so if you want to do lots of rollover types of things get that book and look at how he does the examples. The book is not about processing but still makes a good reference work.

augusst 13 notes

August 13 notes


Think of loading data as columns (with headers) into objects. Put those object names into classes. function has set of inputs with set of outputs. Object describes a broad range of attributes and then function inside the class (called a method) that uses the attributes to do something.

sometimes first row has names for the columns. You can start at row 2 to use the data without the column heads. Attributes would be the column heads. Jason could have called his class Player because it is the thing that draws the players.

splitToken takes a string chops up into pieces based on a character. Jason’s table has both tab separated and tab separated columns. How did he solve that? splitToken can separate by more than one data type. WHITESPACE in his code made any number of spacebar spaces as space.

His object “Player” creates a lot of variables. His array fills the objects with data. The dot in the

Class Dog }
int length;
int color;
String breed;
}

Dog fido = new Dog(13, 0x00ff00, “terrier”);
int myLenght = fido.length     //the dot is important because it pulls up the attributes. 

records[totalRebounds].TR ...
 

Jason used variable int startingEntry = 0;
It increments each time you press the mouse. Use variable instead of number because it’s hard to understand without a name or because it has to …

Jason’s code is literal. Doesn’t look at minimum and maximum. Can not iterate through a set of data and adjust through …

With delicate variables audio signal or particle need to calibrate the data can use library from noisepages.com that has onscreen sliders for calibrating data ranges to calibrate the ranges to get number feed back and use those numbers in the code.

Look for prototyping article on Peter’s site. There is article for prototyping application to work out what to do with lighting based on the sound. Crosses and numbers in video are only used in the calibration but turned off for the performance.

For centering the text need to find the length of the string and then center that.
Processinghacks.com for good cheats and tricks for processing




Fonts are lame in processing and everybody knows it. There are workarounds but none of them really work very well.

Vertext by Michael Chang was a library for creating type as shapes in processing but it is now gone from the link on the processing site.

Now use NextText library

Geomerative also does font importing. Look at examples. They interpreted the geometry data embedded in the font file. Has its own set of classes dealing with shapes


Scott mapped his itunes library into 3d space with dots.

ProXML undocumented but he used it to import his data. Now he can design the space and can creates all disks and each time it draws it moves them toward the x y coordinates that they are going to. Used easing to get it to move naturally.

x += (destx - x) * easing;
y += (destx - y) * easing;
z += (destx - z) * easing;
 

to make sphere use photoshop sprite and use pointSprite in openGL (extention maybe 2.0) image command in processing creates a rectangle and pasts an image on that rectangle. Point spirtes make the rectangle a point and positions the sprite to that. Only works with high end processors.

Could brute force figure where the camera is and always face the disk toward the camera.

Can use a spacing algorithm for layout to position things on the screen.



Array out of bounds error will always be [] index number. To troubleshoot look for the place where the problem is and work backward to find the broken part.

For array with 4 elements. Programming counts from 0. if you do length array.lenght
Object.attribute

Array has 4 items in it but it counts them.

To turn into index number need to do something.
In this case it is array.length-1

Set of classes exist
Arrays in processing work because of how they work in java. Packages called java.util in java has set of utility classes including data structures. It changes. Processing can use up to / including java 5. java numbers don’t go sequentially. Java 1, 1.1 1.2, 1.3, 1.4 (same as 2), 5, 6, 7se, openTDK. Is backwards compatible language. Processing targeted 1.3 and 1.4 as targer language. Any mac guaranteed to have 1.4. good compatible version.

.0143 supports jave 5 but not after those. Not stable yet. But can use 1.4 and 5 syntax and most libraries are built on version 1.4, which is java 2.1.4 does most of the things that people need. Almost nothing you need in 5, 6, or 7.
Code from java books should easily drop into processing and work. Processing compiles the language.

Java compiles code for the processor for the virtual machine that can run anywhere. Has to be compiled but processing does it.

Processing goes through an interpreter then compiler. It interprets all the drawing commands into java code then compiles.

How to get xml files online

proXML
simpleML

swivel.com is good for data

check the.echonest.com for music visualization api’s.

here is a video made by a mad hacker that is 4k in size.

How to do:
Peter showed particle animation using gradient fills. Not designed to always face front. How to do it?

Need open gl import to do this thing. Need to be able to talk to openGL so make a n obkect PGraphicsOpenGL


Here are the things you need to get to make openGL work for

import javax.media.opengl.*
import processing.opengl.*;

PGraphicsOpenGL pg1;
GL gl;

void setup() {
  size (1024,768,OPENGL);
}

void draw() 
{
 pgl = (PGraphicsOpenGL) g; 
 gl = pgl.begin();
 

 //makes blending based on alpha values
 gl.glDisable(GL.GL_DEPTH_TEST);  // don't know why works - disables depth test fixes glitch
 gl.glEnable(GL.GL_BLEND);   //makes the blend
 gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE);   //chooses blend mode 
}

Look for this book
openGL red book and orange book – massive. Some are documented on openGL.org. look for openGL and not directX ot HLSL do this on the 3d card for efficiency in processing.

Navigating knowledge – pick out what is important and let people do those. Otherwise it is overwhelming.



Chap 17 is brush up of what we already did

Read chap 18 – data input with examples and rss, yahoo libraries. Has rollover function.

Look in chapter 19 for syncing ML, client server stuff, and stuff like that.

July 31 notes

Put data folder into sketch folder. Put font into data folder.

Tools > create font
Do not check all characters box or all the funky characters will be embedded in the file.
Processing fonts are all bitmaps, created in processing

textFont(myCentury, 100);

= (font name, size);

2 arguments for text

text("Whoo. Fonts.", 50, 150);

numbers are x and y coordinates.


P3D runs without any extra stuff in a browser
OPENGL will run after asking for use of the graphics card that the user has to authorize.



Create text file
CSV coma separated values
TSC tab separated values
Rows are separated by carriage returns.

unn


June 13 39%
July 16 19%
August 29 1%



Strint[] value = to call for a text file and name the file

Split cuts the rows up into columns. It goes into an array command.




Find datasources at manyeyes.
Or cencus buread, Ben Fry’s site, visualizing data,



FIND DATA
USE YOUR OWN DATA
TRY TO VISUALIZE IT.

July 30 Processing notes

Processing class July 30 2008

Rigorous drawing stuff

do this:
BREAK DOWN COMPLICATED PROBLEMS INTO SIMPLE PROBLEMS.


How processing drawslings:
It takes a pen width and draws and then can take a different one and makes the next. Just like you might change a pen when drawing on paper.


TYPE CONSTANTS IN ALL CAPS, LIKE

strokeCap (SQUARE);

string is a collection of things

String dog = "Fido";
String dog2 = "Woofy";
String dog3 = "Charlie";
String dog4 = "Blue";
String dog5 = "Killer";
println(dog + "," + dog2 + "," + dog3 + "," + dog4);

or can do this

String[] dogs = {"Fido", " Woofy ", " Charlie ", " Blue " " Killer "}

Array = list, collection
To call it use      []
So all   []   is an array.

groceryItems[]    = list  (collection) of grocery items
groceryItems[ stuffToBuyAtGroceryToday =

1. milk
2. eggs
3. apples

{milk, eggs, apples}      or, stuff between curly brackets are items on the list.

Now need a way to refer to these items in the list
Can refer to them by number
Look at #3 on the grocery items list
Or

stuffToBuyAtGroceryToday[2]         //in this case code counts from 0

Now use a short name

buyStuff.length      //dot 

colors

#201E12
#7382AD
#7C595F
#D66753
#CDDD74
#26738F
#978988
#86B742



Can use noise to generate random information. Is maybe more useful than random. Why????
Tron has use of noise to make data visual. Random is boring to look at. noise used to make octaves of randomness. Randomizes in an organic way. Perlin noise makes continuous slopes within the screen example shown. Semi continuous random information. Bands. Is a set of pre-calculated vectors. Good for generating clouds and smoke.

Using Translate

//can use translate to make something happen relative to another point
//subtle randomization can go a long way
//can make it look organic
//non-subtle randomization can look synthetic

pushMatrix and popMatrix are beginning and ending a translation. All the rest you don’t need to know.

Translate moves the 0,0 point from top left corner. All coordinates are relative to 0,0. translate allows you to move the 0,0 origin point to somewhere on the screen, or where ever you want it to be.

On 7a example, it looks like the square is rotating but actually the whole thing is rotating.


To rotate from the center of the square, instead of starting at 0,0; the corner of the square, make the start point -1/2width, -1/2height.

pushMatrix and popMatrix starts a new set of translations for each thing. pushMatrix starts the translation and popMatrix ends the rotation. There is a matrix behind the scenes that runs the whole thing.

0, 0 coordinate is top left. Is also how each shape is translated. Will rotate around top left corner. How to make it rotate around its center? Make with and height half of width and height. To use variables, see example 7b.

Size(200,200);              //defaults to java 2d
Size(20,200,P3D);       //is jave 3-d. is real 3-d that runs on the graphics card. Can be flakey
or
Size(20,200,OPENGL);        //.    GOGL. Will run in a browser but not well, otherwise is really true 3-d. can do things that run fast and look really good. Can copy and paste code to get good glow effects. Uses graphics card to make the effects. 

Open GL library can be loaded into the sketch> import library menu button.

processing notes July 17

For working with 3-d models

Core.jar
Is all the stuff under reference > language


Libraries
(obj loader) use for loading object files into processing.

(pro-midi) has some problems. Input and output to midi. Not written from scratch.

If you want stuff: write it yourself. See the site for more user-created libraries. Use any java code you want.

Use: import javax(where java libraries live).audio.mid(path)


Library is a collection of classes organized in a particular way. They are shared. Best ones get added to processing website. Some get implemented into core.

Core libraries don’t need to be removed if you don’t use anything. It just ignores them.


Sketchup----open source modeling program




lib
Design by numbers john Maida at mit group made
DBN simplified syntax and drawing, logo-style drawing
Book: design by numbers

But later people wanted to do more; motion, video, sound
That’s where Processing came from
Focused on making code as simple as possible. Should run into things that you can not do in the program.





Keith Peters book about flash has explanation of bitwise operators that makes sense!!! Don’t know which one.


Concatenation code:
You can add strings like this:

  println(myRed + ", " + myGreen + ", " + myBlue);

the

+

adds multiple characters.
Most numbers and characters can be typed without using entity codes, etc.
Characters = single quote
strings = double quote

black bar at the bottom of processing window is the console.




Variables in processing are containers. Like a little box. What’s in it can change. It has to have a type and a name. once it has those 2 things you can change it as often as you like. Really big program its easy to reuse variable names by accident. To avoid problems variables have both a type and a scope.

Within its function and within its class. If in setup you can use it in setup.
Within a function can only use it in that function. Then it forgets it ever existed.

 
Int mySize = 200;
Size (mySize, mySize);

If any 2 functions need to use it, put it above the setup and they will all have access to it. Don’t make variables in draw. If you do it a lot it will slow the program down. If you load an image in draw it will redraw the image over and over as it cycles through frames.

When creating processing sketch it creates a class. When your code gets too full of other stuff objects can be created as classes.

These are operators 
num = num+1   is same as      num++

num +=      

If then statements


Need to use if with else if you want to be compliant. Statement needs to be true or false statement.

Width and height are reserved keywords that processing knows.

Logical operator uses double symbols, like

     &&    or   ||

Better video support possible in the coming 6-12 months hopefully.




The For Loop


It’s all about counting.

1. Start with a number. 0
2. add 1
3. stop when you get to 10

for (int i= 0; i<10; i++ ) {

}

for (int i= 0; i < listLength; i + + ) {
    (spaces added to because blogger wouldn't post)
}

For loop is good when you repeat yourself efficiently.

Array is for storing lists of stuff. Java list is called array.

int[] circles = {
  170,113,78,30,13};

[] indicates array
/*Length of an array is the number of elements in the list*/

If you work with an image of 400 x 300 would be 120,000 pix. With video take that number x the frame rate per second x number of seconds in the video. So for loop will make better code.


Tricky thing – array has a number of slots. Numbers start at 0 and end –say 4, array has 5 elements.

myList.length-1 will tell the last slot because the array starts numbering at 0. the out of bounds exception is a mistake with the array length. Reference on processing site has details of what you can do with arrays.

int[] circles = {
  170,113,78,30,13};
size(400,400);
background(150);
noStroke();
smooth();

for (int j=0;j<4;j++) {

  for (int i=0;i < circles.length; i++){
    fill(random(0,255), random(0,255), random(0,255));
    ellipse ((width/4)*j,(height/4)*j,circles[i],circles[i]);
  }
}

Loop inside the loop allows the first loop of several concentric circles to be repeated several times.



For 4 pix x 3 pix image :

for (int i=0, i<4; i++)

translation matrix
keeps track of complex math

rotate and translate commands

pop and push matrices
there is a matrix of where all stuff. Push and pop allow you to move stuff relative to where I had previously been.

See 7b

What is hard- where starts at 0. rotates around 0. position is x-y but rotation always restarts at 0.