All the useful Websites David mentioned on class:

1.Exploration about HTML:

W3.schools http://www.w3schools.com/

html.dog http://htmldog.com/


hypergurl.com http://www.hypergurl.com/easyhtml.html



2.Check the make-up(HTML,XHTML...) of Web document:

markup validation service http://validator.w3.org/


3.The elements of typographic style applied to Web:

element of typographic style http://webtypography.net/


4.Css resource guide:

zen garden http://www.csszengarden.com/


5.Everything related to grids:

the grid systerm http://www.thegridsystem.org/

gridr buildrrr http://www.swiss-miss.com/2008/12/gridr-buildrrr.html


6.Awesome web design and development:

irontoiron http://irontoiron.com/


6. Online Bookmark:

Delicious http://www.delicious.com/








Notes from class


Jump to: Variables | Size Variable | Translation Variables | Loops (Repetition) | Void Setup & Void Draw | Typography / uesful websites


January 11, 2011 Week 2


VARIABLES (Top)

int (data type) y (name) = 123 (value)

integer = whole number
float = decimal

int y = 0;
int x = 80;



SIZE VARIABLE (Top)

the width and height is just a variable that lets you change the original size code without having to change everything

size(480, 120);

line(0, 0, width, height);
line(width, 0, 0, height);
ellipse(width/2, height/2, 60, 60);

Example:
size_variable.png




TRANSLATION VARIABLES (Top)

int h = 20;
int y = 25;
int x = 25;

rect(x, y, 300, h);

x = x + 100;
rect(x, y+h, 300, h); adding variables with other variables without changing original code

x = x + 250;
rect(x, y + h*2, 300, h); multiplying variables without changing original code

  • i+= 20 increasing the value by 20 everytime
  • i<300 only allow lines(or shapes) to go x axis; 300
  • line(i, 40, i+60, 80); the value 40 and 80 are in charge of the height.

Example:




LOOPS (REPETITION) (Top)


1. The following is an example of a pattern created with each individual x and y coordinate values.

size(480,120);
smooth();
strokeWeight(8);


line(20,40,80,80);
line(80,40,140,80);
line(140,40,200,80);
line(200,40,260,80);
line(260,40,320,80);
line(320,40,380,80);
line(380,40,440,80);

Example:
Loops_repitition.png


2. The following is an example of a pattern created with a loop function; to create the same output as above.

size(480,120);
smooth();
strokeWeight(8);

for(int i=20; i<400; i+=60)
{line(i,40,i+60,80);}

Terms:
*int i = starts at 20
*i <400 = will be under 400 (< = relational operator)
*i+=60 = increasing in increments of 60

Example:
Loops_repitition.png

Additional Examples:

3. Repetitive lines with colours.
size(480,120);
smooth();
strokeWeight(8);
for(int i=20; i<400; i+=60)
{stroke(i,40,120);
line(i,40,i+60,80);}

Example:
Screen_shot_2011-01-25_at_11.24.00_AM.png

4. Repetitive bending lines.
size(480,120);
smooth();
strokeWeight(2);

for(int i=20; i<400; i+=8)
{line(i,0,i+i/2,80);

Example:


5.Repetitive Circles.
size(480,120);
background(0);
smooth();
noStroke();

for(int y=0; y<=height; y+=40){
for (int x=0; x<=width; x+=40){
fill(255,140);
ellipse(x,y,40,40);}}

Example:
Screen_shot_2011-01-30_at_7.10.37_PM.png


6. Repetitive Points.
size(250,250);

for(int y=20; y<=230; y+=4){
for(int x=20; x<=230; x+=4){
strokeWeight(2);
point(x,y);}}






January 18, 2011 Week 3




VOID SETUP & VOID DRAW (Top)

1.



void setup(){

size(480 ,120);
fill(0,102);
smooth();
noStroke();
}

void draw(){
ellipse(mouseX, mouseY, 9,9);
}

mouse x=)input in variable in processing


2.




void setup(){

size(480 ,120);
fill(0,102);
smooth();
noStroke();
}

void draw(){
background(204);
ellipse(mouseX, mouseY, 9,9);
}

mouse x=)input in variable in processing
putting in a background causes the colour to renew itself and only one circle is visible








3.



void setup(){
size(480,480);
smooth();
stroke(0,102);
}

void draw (){
float weight= dist(mouseX, mouseY, pmouseX, pmouseY);
strokeWeight(weight);
line(mouseX, mouseY, pmouseX, pmouseY);
}

(the faster your mouse moves, the thicker the line is)





4.




void setup(){

size(480,480);
smooth();
stroke(0,102);
}

void draw(){
float weight = dist(mouseX, mouseY, pmouseX, pmouseY);
strokeWeight(weight);
stroke(200,25,mouseX,102);
line(mouseX,mouseY, pmouseX, pmouseY);
}


(the faster your mouse moves, the thicker the line is. The colour changes based on where your mouse is)




5.




void setup(){
size(480,480);
smooth();
stroke(0,102);
}

void draw(){
float weight = dist(mouseX, mouseY, pmouseX, pmouseY);
strokeWeight(weight);
stroke(200,mouseY,mouseX,102);
line(mouseX,mouseY, pmouseX, pmouseY);
}





6.



float y=50.0;
float speed = 3.0;
float radius = 20.0;
int direction=1;

void setup(){
size(200,200);
smooth();
noStroke();
ellipseMode(RADIUS);
}

void draw(){
fill(0,30);
rect(0,0,width,height);
fill(255);
y+=speed*direction;

ellipse(75,y,radius, radius);
conditional (|| means "and")
if((y>height-radius) ||(y<radius)) {
direction = -direction;
}
}








7.


_2011-01-19_오전_11.05.15.png

float x,y; position
float dx,dy; change in the position

void setup () {
size(400,400);

x=width/2;
y=height/2;
set variables to change position
dx =-5;
dy =2;
}

void draw(){
x=x+dx;
y=y+dy;

if(x>width)x=0;
else if (x<0) x=width;
if(y>height)x=0;
else if (y<0) y=height;

fill(x,mouseY,random(30,200),80);
ellipse(x,y,50,50);

dx=random(-5,5);
dy=random(-5,5);
}
}



8.
_2011-01-21_오후_12.09.26.png (colour changing one)


void setup(){
size(250,250);
smooth();
strokeWeight(30);
}

void draw(){
background(204);
stroke(102);
line(40,0,70,height);

if(mousePressed){
stroke(0);
}else{
stroke(random(25,150));
}
line(0,70,width,50);
}

January 25, 2011 Week 4




TYPOGRAPHY (Top)

1)

font(loading, writing);

size (600,200);

PFont font; //declare variable

font=loadFont ("ACaslonPro-Bold-48.vlw");

textFont(font);

fill(0);
text("homework D;",0,40);

Example:



2)

PFont font;

void setup(){
size(600,200);
smooth();
font=loadFont("Baskerville-Bold-48.vlw");
textFont(font);
}

void draw(){
background(102);
textSize(36);
text("That's a spicy meatball.",25,60);
}

Example:




3)

overlapping


PFont font;

void setup(){
size(600,200);
smooth();
font=loadFont("Baskerville-Bold-48.vlw");
textFont(font);
}

void draw(){
background(102);
textSize(36);
fill(0,40);
text("randomtext.",25,60);
fill(255,40);
text("randomtext.",30,70);
}


Example:




4)

PFont font;
float x1=0;

void setup(){
size(400,200);
smooth();
font=loadFont("Baskerville-Bold-48.vlw");
textFont(font);
fill(0);
}

void draw(){
background(204);
textSize(36);
fill(0,140);
text("That's a spicy meatball.",x1,50);
x1+=1.0;
if(x1>width){
x1=-150;
}
}

Example:




5)

int x =0;

void draw(){
background(255);
rect(x,25,50,50);
}

void mouseMoved(){
x=x-5;

}