 |
Author |
Topic: Quick Bits : STATIC FORM - 3 (Read 2600 times) |
|
arielm
|
Quick Bits : STATIC FORM - 3
« on: Mar 2nd, 2004, 11:18pm » |
|
SF3_001
Code:void setup() // this function will be called automatically by processing when the program starts
{
size(200, 200); // setting the size of the screen
}
void draw() // this function will be called automatically too, just after setup()
{
rect(100, 30, 90, 160);
}
// the "execution flow" will be as follow:
// 1) setup()
// 2) size(200, 200)
// 3) draw()
// 4) rect(10, 10, 90, 160); |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #1 on: Mar 2nd, 2004, 11:20pm » |
|
SF3_002
Code:void setup()
{
size(200, 200);
background(255); // sets the background color to white
}
void draw()
{
// calling the cross() function 4 times
// the "origin of the system" is by default at the top-left corner of the screen
cross(); // top-left corner of the cross is at 0,0
translate(50, 50); // the "origin of the system" is moved 50 points right, 50 points down
cross(); // top-left corner of the cross is at 50,50
translate(50, 50); // the "origin of the system" is moved 50 points right, 50 points down
cross(); // top-left corner of the cross is at 100,100
translate(50, 50); // the "origin of the system" is moved 50 points right, 50 points down
cross(); // top-left corner of the cross is at 150,150
}
void cross() // our user-defined function (we can name it as we like)
{
noStroke();
fill(255, 0, 0); // red
rect(0, 10, 30, 10);
rect(10, 0, 10, 30);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #2 on: Mar 2nd, 2004, 11:21pm » |
|
SF3_003
Code:// when drawing using functions, it's important to be able to draw a form from the center...
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
cross(); // center of the cross is at 0,0
translate(50, 50); // the "origin of the system" is moved 50 points right, 50 points down
cross(); // center of the cross is at 50,50
translate(50, 50); // the "origin of the system" is moved 50 points right, 50 points down
cross(); // center of the cross is at 100,100
translate(50, 50); // the "origin of the system" is moved 50 points right, 50 points down
cross(); // center of the cross is at 150,150
}
void cross()
{
noStroke();
fill(255, 0, 0);
rectMode(CENTER_DIAMETER); // rectangles will be drawn from the center
rect(0, 0, 30, 10);
rect(0, 0, 10, 30);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #3 on: Mar 2nd, 2004, 11:22pm » |
|
SF3_004
Code:// when creating user-defined functions, it's possible to add an arbitrary number of "parameters"
// that will act like variables within the body of the function
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
// when calling our function, we are "passing" 2 parameters that will affect
// the position of the cross
cross(0, 0); // center of the cross is at 0,0
cross(50, 50); // center of the cross is at 50,50
cross(100, 100); // center of the cross is at 100,100
cross(150, 150); // center of the cross is at 150,150
}
void cross(float x, float y) // we're using 2 parameters (we name them as we like)
{
noStroke();
fill(255, 0, 0);
rectMode(CENTER_DIAMETER);
// x and y are acting like variables that have been set from outside the function
rect(x, y, 30, 10);
rect(x, y, 10, 30);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #4 on: Mar 2nd, 2004, 11:24pm » |
|
SF3_005a
Code:// introducing additional parameters
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
// defining variables that hold color information
color red = color(255, 0, 0);
color blue = color(51, 153, 255);
color grey = color(128, 128, 128);
color green = color(153, 255, 51);
// we are passing a third parameter that will affect the size of the cross
// and a fourth parameter that will control the color of the cross
cross(0, 0, 1, red);
cross(50, 50, 3, blue);
cross(100, 100, 0.5, grey);
cross(150, 150, 5.5, green);
}
void cross(float x, float y, float sz, color col) // 2 new parameters have been added to the function
{
noStroke();
fill(col); // this is what controls the color of the cross
rectMode(CENTER_DIAMETER);
rect(x, y, 30 * sz, 10 * sz);
rect(x, y, 10 * sz, 30 * sz);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #5 on: Mar 2nd, 2004, 11:25pm » |
|
SF3_005b
Code:// producing exactly the same image as the previous example...
// when programming, it's possible to achieve the same results using different approaches!
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
fill(255, 0, 0); // red
cross(0, 0, 1);
fill(51, 153, 255); // blue
cross(50, 50, 3);
fill(128, 128, 128); // grey
cross(100, 100, 0.5);
fill(153, 255, 51); // green
cross(150, 150, 5.5);
}
void cross(float x, float y, float sz)
{
noStroke();
rectMode(CENTER_DIAMETER);
rect(x, y, 30 * sz, 10 * sz);
rect(x, y, 10 * sz, 30 * sz);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #6 on: Mar 2nd, 2004, 11:27pm » |
|
SF3_006a
Code:// using functions that use other functions for drawing...
// first, let's make 2 different shapes and examine them separately
void setup()
{
size(200, 200);
background(255);
fill(0, 0, 0); // all the drawings use black
}
void draw()
{
bubbles(50, 100);
tube(150, 100);
}
void tube(float x, float y)
{
noStroke();
rectMode(CENTER_DIAMETER);
ellipseMode(CENTER_RADIUS);
rect(x, y, 40, 100);
rect(x, y - 50, 60, 10);
ellipse(x, y + 50, 20, 20);
}
void bubbles(float x, float y)
{
noStroke();
ellipseMode(CENTER_RADIUS);
ellipse(x + 4, y - 24, 10, 10);
ellipse(x - 4, y, 9, 9);
ellipse(x + 4, y + 24, 8, 8);
ellipse(x - 4, y + 48, 7, 7);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #7 on: Mar 2nd, 2004, 11:27pm » |
|
SF3_006b
Code:// using functions that use other functions for drawing...
// now let's make a function that uses our 2 composite parts together
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
danger(50, 100);
danger(150, 100);
}
void danger(float x, float y)
{
fill(0, 0, 0); // black
tube(x, y);
fill(255, 255, 255); // white
bubbles(x, y);
}
void tube(float x, float y)
{
noStroke();
rectMode(CENTER_DIAMETER);
ellipseMode(CENTER_RADIUS);
rect(x, y, 40, 100);
rect(x, y - 50, 60, 10);
ellipse(x, y + 50, 20, 20);
}
void bubbles(float x, float y)
{
noStroke();
ellipseMode(CENTER_RADIUS);
ellipse(x + 4, y - 24, 10, 10);
ellipse(x - 4, y, 9, 9);
ellipse(x + 4, y + 24, 8, 8);
ellipse(x - 4, y + 48, 7, 7);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #8 on: Mar 2nd, 2004, 11:29pm » |
|
SF3_006c
Code:// using functions that use other functions for drawing...
// having a function that uses our 2 composite parts together
// + introducing scaling (using an additional parameter)
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
danger(50, 100, 13); // bigger
danger(150, 100, 5); // smaller
}
void danger(float x, float y, float sz)
{
fill(0, 0, 0); // black
tube(x, y, sz);
fill(255, 255, 255); // white
bubbles(x, y, sz);
}
void tube(float x, float y, float sz)
{
noStroke();
rectMode(CENTER_DIAMETER);
ellipseMode(CENTER_RADIUS);
rect(x, y, 4 * sz, 10 * sz);
rect(x, y - 5 * sz, 6 * sz, 1 * sz);
ellipse(x, y + 5 * sz, 2 * sz, 2 * sz);
}
void bubbles(float x, float y, float sz)
{
noStroke();
ellipseMode(CENTER_RADIUS);
ellipse(x + 0.4 * sz, y - 2.4 * sz, 1 * sz, 1 * sz);
ellipse(x - 0.4 * sz, y, 0.9 * sz, 0.9 * sz);
ellipse(x + 0.4 * sz, y + 2.4 * sz, 0.8 * sz, 0.8 * sz);
ellipse(x - 0.4 * sz, y + 4.8 * sz, 0.7 * sz, 0.7 * sz);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - 3
« Reply #9 on: Mar 2nd, 2004, 11:30pm » |
|
SF3_006d
Code:// using functions that use other functions for drawing...
// having a function that uses our 2 composite parts together
// + introducing matrix-based scaling
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
danger(50, 100, 1.3);
danger(150, 100, 0.5);
}
void danger(float x, float y, float sz)
{
fill(0, 0, 0); // black
push();
translate(x, y);
scale(sz);
tube();
pop();
fill(255, 255, 255); // white
push();
translate(x, y);
scale(sz);
bubbles();
pop();
}
void tube()
{
noStroke();
rectMode(CENTER_DIAMETER);
ellipseMode(CENTER_RADIUS);
rect(0, 0, 40, 100);
rect(0, - 50, 60, 10);
ellipse(0, 50, 20, 20);
}
void bubbles()
{
noStroke();
ellipseMode(CENTER_RADIUS);
ellipse(4, - 24, 10, 10);
ellipse(-4, 0, 9, 9);
ellipse(4, 24, 8, 8);
ellipse(-4, 48, 7, 7);
} |
|
|
Ariel Malka | www.chronotext.org
|
|
|
|
