/* basic processing experiments as a part of “Computational Art & Design (2010)” instructed by Philippe Pasquier at SIAT, SFU.
coded and commented by Suk Kyoung Choi.
*/
// Draw two lines that intersect in a single point.
size(200,200); //screen size 200×200
line(10,100,190,100); //line from point (10,100) to point (190,100)
line(100,10,100,190); //line from point (100,10) to point (100,190)
_____________________________________
// Draw three parallel lines.
size(200,200); //screen size 200×200
line(10,10,190,10); //line from point (10,10) to (190,10)
line(10,100,190,100); //line from point (10,100) to (190,100)
line(10,190,190,190); //line from point (10,190) to (190,190)
_____________________________________
// Draw three ellipses in various sizes.
size(200,200); //screen size 200×200
background (255); //background color
//draw circle upper left corner
fill(0); //color black
ellipse(10,10,10,10); //position (10,10) and size 10×10 diameter ellipse
//draw ellipse longer y-axis
fill(0); //color black
ellipse(60,70,33,70); //position (60,70) and size 33×70 diameter ellipse
//draw ellipse longer x-axis
fill(0); //color black
ellipse(145,80,40,15); //position (145,80) and size 40×15 diameter ellipse
_____________________________________
// Control the length of two lines with one variable.
void setup() { //initialize processing with default values
size(400, 400); //screen size 400×400
background(255); //background color
strokeWeight(1); //stroke thickness
smooth(); //antialising
stroke(242,204,47,55); //stroke color fill dandelion
}
void draw() { //the draw function is what creates all output for the sketch (per frame)
/* dandelion monster
first line point at (100,200) and the othe point varies by mouse position
second line point at (250,250) and the other point varies by mouse position
*/
line(100, 200, mouseX, mouseY);
line(250, 250, mouseX, mouseY);
}
_____________________________________
// Control the position and size of two rectangles with two variables.
void setup() { //initialize processing with default values
size(400, 400); //screen size
noStroke(); //no strokes on the shapes
rectMode(CENTER); //rectangle origin position at center
}
void draw() {
//the draw function is what creates all output for the sketch (per frame)
background(255); //clear background color on each refresh
int x = 100; //define integer x equal to 100
int y = 200; //define integer y equal to 200
//pink grapefruit
fill(255, 33, 220, 55); //color pink grapefruit
rect(x, x, x, x); //position (x,x), and size x by x rectangle
//avocado
fill(25, 204, 55, 55); //color avocado
rect(y,y,y,y); //position (y,y), and size y by y rectangle
}
_____________________________________
// Control the properties of three shapes with two variables
int p = 100; //define integer p equal to 100
color violet = color(200,10,133,55);
//define “violet” by RGB color 200,10,133, and 55 alpha channel
void setup() { //initialize processing with default values
size(400,400); //screen size
background(255); //background color
noStroke(); //no strokes around the shape
}
void draw() {
//the draw function is what creates all output for the sketch (per frame)
fill(violet); //fill color “violet”
ellipse(p+50,p+50,10,10);
//position (p+50,p+50), and size 10×10 diameter ellipse
fill(violet); //fill color “violet”
rect(p+100,p+100,25, 40);
//position (p+100,p+100), and size 25×40 rectangle
fill(violet); //fill color “violet”
ellipse(350,350,p,p);
//position (350,350), and size is pxp diameter ellipse
}
_____________________________________
// Create a simple, regular pattern with eight lines.
void setup() { //initialize processing with default values
size(90,90); //screen size
background(255); //background color
}
void draw() {
//the draw function is what creates all output for the sketch (per frame)
//draw eight vertical lines (70 pixels long) moving over by 10 pixels each line
line(10, 10, 10, 80);
line(20, 10, 20, 80);
line(30, 10, 30, 80);
line(40, 10, 40, 80);
line(50, 10, 50, 80);
line(60, 10, 60, 80);
line(70, 10, 70, 80);
line(80, 10, 80, 80);
}
_____________________________________
// Program your pattern from Assignment 1-07 using while().
void setup() { //initialize processing with default values
size(90,90); //screen size
background (255); //background color
}
void draw() { //the draw function is what creates all output for the sketch (per frame)
int i=1; //define integer i equal to 1
while(i < 9) { //while i is smaller than 9
line(i*10, 10, i*10, 80); //draw line position varies (i*10,10) to (i*10,80)
i++; //increment i by 1
}
}
_____________________________________
// Draw a layered form with three new loops
void setup() { // initialize processing with default values
background(255); //background color
size(300,300); //screen size
noLoop(); //stop draw from repeating
smooth(); //antialiasing
noStroke(); //no strokes around the shapes
}
void draw() { //the draw function is what creates all output for the sketch (per frame)
//1st loop: picolo
int s=1; //define integer s equall to 1
while (s < 5){ //while s is smaller than 5
fill (10,120,150,10); //color picolo
rect (s, s, 50, 50); //rectangle position (1,1) and size 50×50
rect (s+50, s+50, 60, 60); //another rectangle position (51,51) and size 60×60
rect (s+110, s+110, 70, 70); //another rectangle position (111,111) and size 70×70
rect (s+180, s+180, 80, 80); //another rectangle position (181,181) and size 80×80
s++; //increment s by 1
}
//2nd loop: cherry blossom
int b=1; //define integer b equall to 1
while (b < 5) { //while b is smaller than 5
fill(255,22,133,55); //color cherry blossom
ellipse(random(300), random(300), 30, 30);
//ellipse random position in 300×300, and size 30×30 in diameter
b++; //increment b by 1
}
//3rd loop: lilac
int p=1; //define integer p equall to 1
while (p<5){ //while p is smaller than 5
fill (13,13,220,20); //color lilac
ellipse(random(300),random(300), 50,50);
//ellipse random position in 300×300, and size 30×30 in diameter
p++; //increment p by 1
}
}
void mousePressed(){ //when mouse gets pressed
loop (); //loops draw
}
void mouseReleased(){ //when mouse gets released
noLoop(); //stop looping draw
}
_____________________________________
//Redo “control the position and size of two rectangles with two variables” using mouse X and mouse Y as the variables.
void setup(){ // initialize processing with default values
size(400, 400); //screen size
noStroke(); //no strokes around the shapes
rectMode(CENTER); //sets rectangles origin to their center point
}
void draw(){ //the draw function is what creates all output for the sketch (per frame)
background(255); //refresh background color every frame
//grapefruit
fill(255, 33, 220, 55); //color grapefruit
rect(mouseX, height/2, mouseY/2, mouseY/2);
//rectangle position varies by mouseX and height/2, and size varies by mouseY/2 and mouseY/2
//avocado
fill(25, 204, 55, 55); //color avocado
int inverseX = width-mouseX; //define integer inverseX equalls to width-mouseX
int inverseY = height-mouseY; //define integer inverseY equalls to width-mouseY
rect(inverseX, height/2, inverseY/2, inverseY/2);
//rectangle position varies by inverseX and height/2, and size varies by inverseY/2 and inverseY/2
}
_____________________________________
// Draw three visual elements that each move in relation to the mouse in a different way.
void setup() { // initialize processing with default values
size(400, 400); //screen size
noStroke(); //no strokes around the shapes
rectMode(CENTER); //sets rectangles origin to their center point
}
void draw() {//the draw function is what creates all output for the sketch (per frame)
background(255); //clear background color on each refresh
//carrot
fill(255,126,23,55); //color carrot
rect(50,50,mouseX/4,mouseY/4);
//rectanle position (50,50); size varies by mouseX/4 and mouseY/4
//lilac
fill(133,126,255,55); //color lilac
rect(mouseX+25,mouseY+25,50,50);
//rectanle position varies to mouseX+25 and mouseY+25; size 50×50
//zucchini
fill(13,200,13,55); //color zucchini
rect (mouseX-50,mouseY-50,mouseX/2,mouseY/2);
//rectanle position varies to mouseX-50 and mouseY-50; size varies by mouseX/2 and mouseY/2
}
_____________________________________
// Draw three concentric circles that each change in size in relation to the mouse in a different way.
void setup(){
size (400,400);
noStroke();
}
void draw(){
//clear screen on each refresh
background(255);
//pumpkin
fill(255,122,35,55);
ellipse(200,200,mouseX,mouseY);
//cucumber
fill(35,200,35,55);
ellipse(200,200,mouseX-50,mouseY-50);
//acorn
fill(33,120,250,55);
ellipse(200,200,mouseX-100,mouseY-100);
}
_____________________________________
//Move a visual element across the screen. Prevent it from disappearing off the edge.
int diam = 45; // width of the circle
float xpos, ypos; // starting position of shape
float xspeed = 3.3; // speed of the shape
float yspeed = 3.6; // speed of the shape
int xdirection = 1; // left or Right
int ydirection = 1; // top to Bottom
void setup() { // initialize processing with default values
size(400,400); //screen size
noStroke(); //no strokes around the shape
frameRate(80); //sets the the number of draw commands per second
smooth(); //antialiasing
//starting at the middle of the screen
xpos = width/2;
ypos = height/2;
}
void draw() {//the draw function is what creates all output for the sketch (per frame)
background(0); //refresh background color every frame
// lilac ball
fill(122,23,222); //color the purple ball
ellipse(xpos+diam/4, ypos+diam/4, diam, diam);
//define its position and size using its x and y positions, and its diameter
// update the position of the shape
xpos = xpos + ( xspeed * xdirection );
ypos = ypos + ( yspeed * ydirection );
// change the direction when the ball hits the boundaries
if (xpos > width-diam/2 || xpos < 0) {
xdirection= xdirection*-1;
}
if (ypos > height-diam/2 || ypos < 0) {
ydirection= ydirection*-1;
}
}
_____________________________________
// Draw a visual element that moves in relation to the mouse.
// Using if/else, draw another visual element that moves in relation to the mouse in a different way, but only if the mouse button is pressed.
void setup() { // initialize processing with default values
size(400, 400); //screen size
background(255); //background color
noStroke(); //no strokes around the shapes
}
void draw() { //the draw function is what creates all output for the sketch (per frame)
background(255); //refresh background color every frame
if(mouseX>0 || mouseY>0) { //if mouseX or mouse Y position is larger than (0,0)
fill (222,200,22,88); //color the olive
/* ellipse position relates to mouseX and mouseY
and varies the size to mouseX+50 by mouseY+50 */
ellipse (mouseX,mouseY,mouseX+50, mouseY+50);
}
else { //if mouseX or mouseY is (0,0) or smaller (off the screen)
fill (222,200,22,88); //olive color
ellipse(0, 0, 50, 50); //position at (0,0) and size 50×50 diameter ellipse
}
if (mousePressed) { //if mouse gets pressed
fill (122,12,255,100); //color purple martini
rect(250,250,150,150); //rectangle postion at (250,250) and size 150 x 150
}
else { //if mouse doesn’t get pressed
fill (255,12,12,88); //color pimemto
rect(100,100,50,50); //rectangle position at (100,100) and size 50 x 50
}
}
_____________________________________
// Draw a visual element that only moves in relation to the mouse if the cursor is in the upper half of the window.
void setup() { // initialize processing with default values
size(400, 400); // screen size
background(255); //background color
noStroke(); //no strokes around the shapes
}
void draw() { //the draw function is what creates all output for the sketch (per frame)
background(255); //refresh background color every frame
if(mouseY<height/2) { //if mouseY position is above the middle horizontal line
/* ellipse position relates to mouseX and mouseY position
and size varies between mouseX+50 by mouse Y+50 */
ellipse (mouseX,mouseY,mouseX+50, mouseY+50);
fill (220,13,220,88); //fill mothership color
}
else { //when the mouseY position is not above the middle horizontal line
/* position constrains on midle vertical line and Y vaaries by mouse position
and size is 10×10 diameter ellipse */
ellipse(width/2, mouseY, 10, 10);
fill(26,220,122,88); //fill green pea color
}
}
_____________________________________
// Develop a kinetic image of a ball that bounces off the edges of the window.
// Make it respond to mouse movement.
int diam = 45; // width of the circle
float xpos, ypos; // starting position of shape
float xspeed = 3.3; // speed of the shape
float yspeed = 3.6; // speed of the shape
int xdirection = 1; // left or Right
int ydirection = 1; // top to Bottom
void setup() { // initialize processing with default values
size(400,400); // screen size
noStroke(); //no strokes around the shapes
frameRate(100); //sets the the number of draw commands per second
smooth(); // antialiasing
//starting at the middle of the screen
xpos = width/2;
ypos = height/2;
}
void draw() { //the draw function is what creates all output for the sketch (per frame)
background(255); //screen color
// lilac ball
fill(mouseX+50,mouseX+50,122); //ball color
ellipse(xpos+diam/4, ypos+diam/4, mouseX, mouseY);
/*ball position relate to xpos/diam and ypos/diam,
and the size relates to the position of mouse X and Y.*/
// update the position of the shape
xpos = xpos + ( xspeed * xdirection );
ypos = ypos + ( yspeed * ydirection );
// change the direction of x and y when the ball’s origin point hits the boundaries
if (xpos > width-diam/2 || xpos < 0) {
xdirection= xdirection*-1;
}
if (ypos > height-diam/2 || ypos < 0) {
ydirection= ydirection*-1;
}
}
Suk Kyoung Choi 