On the down side. I’m behind on my processing because I needed to catch up on Math, which I haven’t taken since the 10th grade. In the last 4 weeks I have gone through 3 notebooks and for the first time in my life I have carpel tunnels in my right wrist./

Gotta say though I am psyched to be in school. My first test is tomorrow. If I do well a new P5 post will be up soon.

Miss it here.

With frosty aloufness,
Brian Sabbeth

Using an Array:
There are a couple things to remember when we declare, create and assign an array.
1) Arrays can be any datatype including objects.
2) They are of fixed size.
3) You always have the steps 1)declare 2) create and 3) assign.

An array declaration is written as follows:
type declaration + ["empty brackets"] + the array name.
example
int[]myArray; //declaration

You would then create the array by following the declaration with new operator + type+ ["the size of the array"] ;
example
int[] myArray = new int [100];//creation
The keyword new is what allocates space in the computers memory to store the array’s data.

After the array is created then values can be assgned to it:
int[] myArray = new int[3]; // declare and create
myArray [0] = 3; //assign value
myArray[1] = 2; //assign value
myArray[2] = 1;//assign value
Each element of the array is individually referred to by specifying its index, starting with [0].
______________________________________________________

Using Loops to Fill Arrays
A for loop can be used to store data inside of an array and to access array elements. A for loop or even a while loop can be used very effectively,I’m going to stick with the for loop for brevity’s sake.
Example from Processing, a Programmers Handbook
int[] data = {19,40,75,76,77};
for (int i = 0; i<data.length; i++){
line(data[i], 0, data[i],100);
}
______________________________________________________

Shaking Schiffman’s Snake(hahahaha)
Program a trail that will follow the mouse by using 2 arrays, one to store the horizontal and one to store the verticle mouse locations.

Step 1
Declare 2 arrays that will hold the last 120 mouseX and mouseY positions.
int [] xpos = new int[120];
int [] ypos = new int[120];

Step 2
In the setup() initialize the arrays using a for loop.
for (int i = 0; i < xpos.length; i++){
xpos [i] = 0;
ypos [i] = 0;
}
}

Step 3
Shifting the Array Values:

for (int i = 0; i < xpos.length - 1; i++){
xpos[i] = xpos [i+1];
ypos[i] = ypos [i+1];
}

Step 4
Drawing the new location:
xpos[xpos.length -1] = mouseX;
ypos[ypos.length -1] = mouseY;

Step 5
Draw Everything:

for (int i = 0; i < xpos.length; i++){
noStroke();
fill(255 - i*5);
ellipse(xpos[i], ypos[i], i-120,i-120);
}
}
View the Sketch at my open processing page. http://openprocessing.org/visuals/?visualID=11994

This part of the code is right out of Getting Started with Processing
Code

JitterBug[] bugs = new JitterBug[33];;

void setup(){

size(480, 120);
background(0);
smooth();
for (int i = 0; i float x = random(width);
float y = random(height);
int r = i+ 2;
bugs[i] = new JitterBug(x,y,r);
}

}

void draw(){
for(int i = 0; i bugs[i].move();
bugs[i].display();
}
}

The JitterBug class is exactly the same as it was in the Object Oriented Programming tutorial that I posted last week.
I will post more notes on this this evening(specifically on how the array works). For now if anyone sees this you can goto my last exercise on arrays here and download the notes Another thing to note is that I am adjusting this blog a bit so if there is any weirdness let a brotha know.

Word to your moms, I came to drop bombs.

variable
int x ;

array
int[] x;

With an array you can make unlimited variable values with one line of code.

int[] x = new int [10000];

Arrays can me made from all P5 datatypes.

PImage[] = new PImage[70];

STEPS TO MAKE AN ARRAY:
1. Declare the array and define the data-type ( int[] x)
2. Create the array with the keyword “new” and define its length ( int[] x = new int[20])
3. Assign values to each element.

Example:
int[] x; //declare the array

void setup(){
size(200,200);
x = new int [2]; // create the array\\
x[0]=12; n // assign the first value\\
x[1] = 2; //assign the second value\\
}

Code:
int num = 160;
int x[] = new int[num];
int y[] = new int[num];

void setup(){
size(240,240);
frameRate(120);
smooth();
noStroke();
}

void draw(){
background(0);
for (int i = x.length-1; i>0; i–){
//for (int i = x.length-1; i>0; i–){
x[i]= x[i-1];
y[i]= y[i-1];
}
x[0] =mouseX;
y[0] = mouseY;
for(int i = 0; i fill(random(0,i*4), 1*2, i*2);
rect(x[i], y[i], random(0,10),random(0,10));
}
}
* the framerate is turned down to 60 in order to prevent problemos’

}
The Jitterbug class’s methods are joined to the object through the dot(.)operator.
void draw(){
bug.move();
bug.display();

}
JITTERBUG CLASS
Block
class JitterBug{
float x;
float y;
int diameter;
float speed = 2.5;
Constructor
JitterBug (float tempX, float tempY, int tempDiameter){
x = tempX;
y = tempY;
diameter = tempDiameter;
}
Methods called from draw(move, display, rndColor).
void move(){
x += random(-speed, speed);
y += random(-speed, speed);
x = constrain(x,0,width);
y = constrain(y,0,height);
}
Sets the color, position and size of the ellipse
void display(){
fill(rndColor(), rndColor(), rndColor());
ellipse(x,y,diameter, diameter);
}

the rndColor method calculates the color and returns its value to the display method
float rndColor(){
float newColor = random(0,255);
return newColor;
}
}

Hasta La Vista.
Senor Briano

Iteration:
The act of repeating a process usually with the aim of approaching a desired goal or target or result.
Nesting:
Nesting one structure within another compounds the effect of a loop. If you have a loop that draws 9 points (runs 9 times) and nest another loop within it that also draws 9 points you get 9 points x 9 points = 81 points .

Example:
for(loop){ does something 9 times
* * for(loop){ does something 9 times
does something 81 times;
}
}

In the above case for each single time the outer loop runs it will run the inner loop 9 times. In other words the inner loop runs a complete cycle for each single iteration of the outer loop structure.

Code

fill(255,76,0);
stroke(0);
smooth();
for (int y = 0; y<=100; y+=10){
for (int x = 0; x<=100; x+=10){
fill((x+y) *1.4);
rect(x, y, 10, 10);
stroke( (x+y) *1.4, 0, 0, 140 );
line(-125,-125,x,y);
}
}

Heres the code from the top sketch:
void setup(){
size(300,300);
background (0);
stroke(0);
noFill();
}

void draw(){

for (float x = 0; x < width; x+=10){
for (float y = 0; y< width; y+=10){
stroke(251,150,130);
fill(0,0,random(1,255));
if (mouseX <= x+10/2 && mouseX >=x || mouseY<= y+20/2 && mouseY>y){
fill(0,random(1,255),0);
}
rect(x,y,10,10);
}
}
}

My synopsis of Getting Started with Processing’s explanation of return values is that a function will make a specific calculation and then return the value of that calculation to the main program, or the part of the program that calls it. Also a function that returns a value can be and is frequently used as a parameter in another function .
Example
point(random(width), random(height));
The point’s parameters come from the returned random value (random is a function).

Its done this way–(from Getting Started with Processing Example 8-8):
void setup(){
float yourWeight = 132;
float marsWeight = calculateMars(yourWeight);
println(marsWeight);
}
//the important thing here is the datatype float which returns a floating-point value as told by the last line in the function return newWeight;

float calculateMars(float w){
float newWeight = w* 0.38;
return newWeight;
}
// My current weight on mars is 100.7. My weight on mars should be 93.1

size(490, 120);
smooth();
}
void draw (){
background(04);
randomSeed(0);

for (int i = 35; i

int reds = int(random(0,102));
int greens = int (random(100,202));
int blues = int (random(0,102));
float scalar = (random(.225, 1.0));

owl(i,110, reds, greens, blues, scalar);
}
}

void owl(int x, int y, int r, int g, int b, float s){
pushMatrix();
translate(x,y);
scale(s);
stroke(r, g, b);
strokeWeight (70);
line(0,-35,0,-65);// body
noStroke();
fill(255);
ellipse(-17.5, -65,35,35);
ellipse(17.5, -65,35,35);
arc(0,-65,70,70, 0, PI);
fill(0);
ellipse(-14, -65,8,8);
ellipse(14, -65,8,8);
quad(0,-58,4,-51,0,-44,-4,-51);

popMatrix();
}

Code(straight out of the book with no modification just so I could test whats happening to the above sketch):

void setup(){
size (720,480);
smooth();
strokeWeight(2);
ellipseMode(RADIUS);
}

void draw(){
drawRobot(120,420,110,140);
drawRobot(270, 460, 260, 95);
drawRobot(420, 310, 80, 10);
drawRobot(570, 300, 180, 45);

}

void drawRobot(int x, int y, int bodyHeight, int neckHeight){
int radius = 45;
int ny = y – bodyHeight – neckHeight – radius;
//neck
stroke(102);
line(x+2, y-bodyHeight, x+2, ny);
line(x+12, y-bodyHeight, x+12, ny);
line(x+22, y-bodyHeight, x+22, ny);
//Antennae
line(x+12, ny, x-18, ny-43);
line(x+12, ny, x+42, ny-99);
line(x+12, ny, x+78, ny+15);
//Body
fill(102);
ellipse(x,y-33,33,33);
fill(0);
rect(x-45, y-bodyHeight, 90, bodyHeight-33);
fill(102);
rect(x-45, y-bodyHeight+17, 90, 6);
//head
fill(0);
ellipse(x+12, ny, radius, radius);
fill(255);
ellipse(x+24, ny-6, 14, 14);
fill(0);
fill(153);
ellipse(x, ny-8, 5, 5);
ellipse(x+30, ny-26, 4, 4);
ellipse(x+41, ny+6, 5, 5);

}

Will post code to this in a bit:

/*we can make circular motion when using sin() and cos() together. cos() values
provide the x-coordinates and sin() values are used for the y-coordinates.
To change the radius of the motion you multiply sin() & cos() by the scalar
variable. */
float angle = 0.1;
float offset = 160;
float scalar = 30;
//fucking with speed gets nutty
float speed = .25;

void setup(){
size(320,320);
smooth();
background(0);
}
void draw(){
float x = offset + cos(angle)* scalar;
float y = offset + sin(angle)* scalar;
angle+= speed;
fill(random(9),random(247),random(0));
ellipse(x,y,10,10);
if((x>300)&&(y>300)){
scalar = -speed;
}else{
scalar+=speed;
}
}

Code:
float speed = 2.5;
int diameter = 20;
float x;
float y;

void setup(){
size(240,120);
smooth();
x=width/2;
y=height/2;
background(30);
}
//Re-maps a number from one range to another. In the example above, the number ’25′ is converted from a value in the range 0..100 into a value that ranges from the left edge (0) to the right edge (width) of the screen.

//Numbers outside the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful.

void draw(){

x+= random (-speed,speed);
y+= random (-speed, speed);

//constrains value to not exceed a maximum and minimum value
// constrain (value, min, max)
x = constrain(x,0,width);
y = constrain(y,0,height);
fill (217,242,random(73));
ellipse(x,y,diameter, diameter);
}

void setup(){
size(220,220);
background(0);
smooth();
}
void draw(){
float targetX = mouseX;
float targetY = mouseY;
float weight = dist(mouseX, mouseY, pmouseX, pmouseY);

x+=(targetX-x)*easing;
y+=(targetY-y)*easing;

if (mousePressed==true){
fill(random(255),random(255),0);
}else{
fill(0,random(255),random(255));
}
if(weight<40){
ellipse(x,y,8+(weight*easing)+3,8+(weight*easing)+3);
}else{
ellipse(x-3,y-3,8,8);
}
println(weight);
}

This sketch also uses the mousePressed statement. I call it a statement rather than an event because it's called from an if statement. It seems that key-presses(char) work the same way. Another new thing in this tut is easing:
float easing = .05;
y+=(targetY-y)*easing;
This calculation is extremely useful for smoothing out the way the circles follow the mouse. The value Y keeps getting closer to the targetY (mouseY). The lower the value of Y the slower the circle creeps up to the mouse.

See page 57 of Getting Started with Processing for an easing diagram

Heres Mr P5 Robot Updated again

ROBOT TWO

Code
size(480,480);
background(0);
smooth();
noStroke();
for (int i=0; i<=height; i+=40){
for (int j = 0; j<=width; j+=40){
fill(55, 0,random(255));
ellipse(j,i,40,40);

}
}

int x = 160; //coordinate x
int y = 420; // coordinate y
int bodyHeight = 110; //neck
int neckHeight = 140; //body
int radius = 45;//head radius;

int ny = y-bodyHeight – neckHeight – radius;//neckY;

smooth();
strokeWeight(2);

ellipseMode(RADIUS);

//neck
stroke(102);
line(x+2, y-bodyHeight, x+2, ny);
line(x+12, y-bodyHeight, x+12, ny);
line(x+22, y-bodyHeight, x+22, ny);

//antenna
stroke(255);
line(x+12, ny, x-18, ny-43);
line(x+12, ny, x+42, ny-99);
line(x+12, ny, x+78, ny+15);

//body
stroke(255);
strokeWeight(1);
fill (102);
ellipse(x,y, 33,33);
fill(0);
rect(x-45, y-bodyHeight, 90, bodyHeight);
fill(102);
rect(x-45, y-bodyHeight+17, 90,20);

//head
fill(0);
stroke(255);

ellipse(x+12, ny, radius, radius);
fill(255);
ellipse(x+24, ny-6, 14, 14);
fill(0);
ellipse(x+24, ny-6, 3, 3);

fill(153);
ellipse(x, ny-8, 5, 5);
ellipse(x+30, ny-26, 4, 4);
ellipse(x+41, ny+6, 3, 3);

This is an improvement on the last robot exercise. Instead of using straight shapes The tut uses variables to define things like body height, neck height, x and y coordinates and so on.

On a more personal note I cannot stress enough how great the P5 books are.

Here’s a short & personal cheat sheet with whatever shape stuff I know so far:
// line (x1,y1,x2,y2,)
// rect (x,y, w,h)
//ellipse(x,y,w,h)
//quad(x1,y1,x2,y2,x2,y3,x4,y4)
//triangle(x1, y1,x2, y2, x3, y3);
//arc(x,y,width,height, start, stop);

Stroke Control:
strokeWeight(1);//obvious
//changes the way that the lines are joined;
strokeJoin(ROUND);
strokeJoin(BEVEL);
//changes the way the lines are drawn at their beginning and end;
strokeCap(SQUARE);
strokeCap(ROUND);

USING VERTEX():

size(480,180);
//start the shape
beginShape();
//x & y coordinates of each point the shape will be drawn through
vertex(180,82);
vertex(207,36);
vertex(214, 63);
vertex(407, 11);
vertex(412,30);
vertex(219, 82);
vertex(226, 109);
//shape complete
endShape(CLOSE);

More from “GettingStarted With Processing”
So Far up to Chapter 3 and love it. It’s so simple and easy to understand so far. Hopefully chapter 4 will carry on in this spirit. To give myself the benefit of learning as much as possible here is the P5 Robot:

Handeling color simply in P5 is pretty neat. What I think is super neat is that you can set your own custom color range using colorMode(). This is prettty sweet for RGB color because having 4 channels with a value range from 0 to 255 seems like a bitch when you compare it to having 4 channels with a range of 0 to 100; So thanks P5 for that one.

Code:
void setup(){
size (200,200);
background(0);
smooth();
}

int a = 10;
float b = random(a);
float c = b*100;
float d = c/50;

void draw(){
colorMode(RGB,100,200,1000);
stroke(255);

fill (b,c,d,a);
float e = random (100);
ellipse(width/2,height/2,e,e);
}

Basically just messing around with some randomness with the circles. There is a significant difference between the alpha value’s in this post and the alpha value’s that are running when compile the sketches on my comp(gotta look into this more).

HSB & colorMode Hue, Saturation, Brightness. Hue: intensity; Saturation: degree of purity; Brightness: relation to light and dark. colorMode (mode, range1, range2, range3)

Color mode changes how P5 interprets color data when changed to HSB. A good idea to follow is when your in HSB set the hue values range from 0-360 and the saturation and brightness range from 0-100.
To set it:
colorMode(HSB, 360, 100,100);

Code:
void draw() {
colorMode(HSB);
for(int i=0; i<100;i++){
stroke(i*2.5, 255, 255);
line(i,0,i,100);
}
}

Explains floats. My quick summary of what a float is:
A datatype for a number with a decimal point. In yesterday’s post I used float as a datatype.
float a = random(255);
float b = 1;
float c = b++;

I believe that this was incorrect. I should have used int, the datatype for integers.
float a = random(255);
int b = 1;
int c = b++;

This may seem nit-picky but thats how its gonna have to be! And now on to the learning!

Code:
void setup() {
size(480, 120);
smooth();
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}

Coming from a background in AS3 its a pretty easy adjustment. The differences seem to be as follows:

1) void: is declared in the beginning of the function.

2) The built in draw() function is similar to AS3′s enterframe() method and easily handles shapes.

It was easy to modify:

Code

void setup(){
size(600,120);
smooth();
}
void draw()
{
frameRate(30);
if (mousePressed){
fill(255);
ellipse (mouseX, mouseY, 80, 80);
}else{
fill(255);
rect (mouseX, mouseY, 80, 80);
}
}

___________________________________________________________________
In my version, the only thing to note is that the we are drawing the shapes within each of the if statements (inside of the {then} part of the statement).

Finally here's something a little different:

___________________________________________________________________
Code

void setup() {
size(480, 120);
smooth();
background(0xff0000);
frameRate(10);

}

void draw(){
float a = random(255);
float b = 1;
float c = b++;

stroke(255);
fill(c,b,a);

rect(a,a,a,a);

ellipse(c,c,c,c);

}

<script type=”application/processing”>//Info: http://processingjs.org/reference

//your code goes here.

</script>

The above sketch is what comes with the plugin. Below is a simple sketch I made.

I’m starting at the very beginning, whether I think its redundant or not. I’m sure that this will improve my general programming skills. I want to be a digital artist. I want to be good. But mostly, I want to know what I am doing backwards and forwards. I should let anyone that reads this know, I do know a fair amount of AS3 as well as HTML and CSS.

In the immortal words of Al Bundy…”Let’s rock!”