Archive for October, 2008

Creative Computing 1 week 5

Wednesday, October 29th, 2008

ExamplePrograms.doc CC_wk5.ppt
Here are the slides and example programs for the latest creative computing lecture
Marco

PDF Creator    Send article as PDF to

Creative Computing 1 assignment example

Wednesday, October 29th, 2008

Here is an example of what I would like the creative computing assignment to look like. Notice particularly the interface for moving the image around.

www.doc.gold.ac.uk/~mas02mg/CC_assignment1/

Marco

PDF    Send article as PDF to

Rotorelief Gallery

Thursday, October 23rd, 2008

By Popular Demand!

Here is your gallery of Marcel Duchamp rotoreliefs from last weeks session. Some of these are really great. Take a look. There’s still one or two lingering in my email that came in late. I’ll add those later. In the meantime, feel free to comment below on which ones you like the best. My favourite is number 16, but, no, I think I prefer number 18…. er…

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
Page 11
Page 12
Page 13
Page 14
Page 15
Page 16
Page 17
Page 18
Page 19
Page 20
Page 21
Page 22

PDF    Send article as PDF to

CC112 materials on sound

Thursday, October 23rd, 2008

I’ve put up the slides and other materials I used in Wednesday’s lecture up on the web, available from my website. I hope that most people have by now sorted out installation of Sonia on at least some machine somewhere; ideally, you should all be able to install it either for a single sketch or systemwide on your laptops.
Enjoy!

PDF Printer    Send article as PDF to

Simple use of for loop with rotation

Tuesday, October 21st, 2008

Here’s a really easy example to help get you going. Make sure you read the comments properly. Then modify the patch by changing colours, drawing new objects, and hacking around. Try to spend an hour or so over the next week looking at this one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*
 
OK so I thought maybe some of these examples were pretty tough to understand.
 
So if you're looking for something simple, have a look at this.
 
This doesn't use any trigonometry (no sin, cos or tan stuff, and no PI), but has a very similar affect.
 
It uses a value I've called 'time' to keep things moving round. Have a play with it.
 
*/
 
 
float time = 0; /* This is going to function as a clock. We'll update it with a value every time a frame gets drawn*/
 
void setup() {
size(512,512);/* setup the size */
frameRate(25);/* This sets the current frameRate */
}
 
void draw() {/* this does the drawing once per frame */
  background(255); /* clear the screen with white */
  translate(width*0.5,height*0.5); /* translate all the drawing to the middle of the screen */
  noFill(); /*stop the computer filling in shapes*/
  time=time+1; /* update the value in the variable 'time'. This means that we add 1 to 'time' every frame */
  for (int i = 0;i < 20; i++) { /* this for loop organises the drawing. It will do the drawing 20 times (between 0 and 19)  */
  rotate(radians(time)); /* rotate the coordinate system a bit */
  rect(i,i,i*5,i*5); /* this is the actual drawing.
  This says 'Draw a line, starting from i,i (x and y location), and being of size i*5 in both width and depth
  because it's in a for loop, it gets 'called' (used) 20 times, with a different value for 'i' each time */
  }
}
PDF Printer    Send article as PDF to

Creative Practice Slides – Basic Concepts 3

Monday, October 20th, 2008

BasicConcepts3.pptx.zip Here’s the slides for basic concepts 3. Includes a description of PI and the for loop. Also has a nice picture of TV BUDDHA.

PDF    Send article as PDF to

more whitney

Monday, October 20th, 2008
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* more whitney */
 
float amp2 = 0;
float amp = 100; 
float phase = 0; 
int elements = 100;
 
void setup() {
  size(400,400);
  frameRate(25);
  background(255,255,255);
  smooth();
 
}
 
void draw() {
  phase = phase + .01;
  amp2 = amp2 + 0.02; 
  float spacing = TWO_PI/elements;
  fill(255,255,255,200);
  rect(0,0,width,height);
  noFill();
 
  translate(width*0.5,height*0.5);
  rotate(-HALF_PI);
  for (int i = 0; i < elements;i++) {
    strokeWeight(2);
    line(sin(spacing*i)*(cos(spacing*i*phase)*amp),(sin(spacing*i)*amp),cos(spacing*(i+1))*(sin(spacing*(i+1)*phase)*amp),(sin(spacing*i)*amp));
    rotate(phase*0.01); 
} 
}

..and this one which is a bit mental

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* try changing the trig with other values*/
 
float amp2 = 0;
float amp = 100; 
float phase = 0; 
int elements = 100;
 
void setup() {
  size(400,400);
  frameRate(25);
  background(255,255,255);
  smooth();
 
}
 
void draw() {
  phase = phase + .01;
  amp2 = amp2 + 0.02; 
  float spacing = TWO_PI/elements;
  fill(255,255,255,200);
  rect(0,0,width,height);
  noFill();
 
  translate(width*0.5,height*0.5);
  rotate(-HALF_PI);
  for (int i = 0; i < elements;i++) {
    strokeWeight(2);
    line(tan(spacing*i)*(cos(spacing*i*phase)*amp),(tan(spacing*i)*amp),cos(spacing*(i+1))*(tan(spacing*(i+1)*phase)*amp),(sin(spacing*i)*amp));
  } 
}
PDF    Send article as PDF to

Really cool Whitney style stuff

Monday, October 20th, 2008
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* more whitney stuff */
 
float amp2 = 0;
float amp = 100; 
float phase = 0; 
int elements = 1000;
 
void setup() {
  size(400,400);
  frameRate(25);
  background(255,255,255);
  smooth();
 
}
 
void draw() {
  phase = phase + .01;
  amp2 = amp2 + 0.02; 
  float spacing = TWO_PI/elements;
  fill(255,255,255,128);
  rect(0,0,width,height);
  noFill();
 
  translate(width*0.5,height*0.5);
  rotate(-HALF_PI);
  for (int i = 0; i < elements;i++) {
    strokeWeight(2);
    stroke(0);
    //stroke(i*(255*0.001));
    point(cos(spacing*i)*(sin(spacing*i*phase)*amp),(cos(spacing*i)*amp));
    //line(cos(spacing*i)*(sin(spacing*i*phase)*amp),(cos(spacing*i)*amp),sin(spacing*(i+1))*(cos(spacing*(i+1)*phase)*amp),(sin(spacing*i)*amp));
    rotate(phase*0.01); 
} 
}
PDF Printer    Send article as PDF to

More on PI and Circles

Monday, October 20th, 2008
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* This patch helps you to learn how to draw a circle thaty animates itself*/
 
float x = 0; /*this is a number we will uise to help draw stuff*/
float radius = 100;/* This is the radius i.e. the length from 0 */
int elements = 10; /* This is the number of elements to draw - it's also the number we use to divide the circle up */
 
void setup() { // setup the screen
  size(400,400); // make it a certain size
  frameRate(25); //set the frame rate
  background(255,255,255); //init the background
 
}
 
void draw() { //start drawing
  background(255,255,255); //clear the screen
  x = x + .01; //every frame, update x a little bit. try editing this
  float spacing = (x/elements)*TWO_PI; //work out how we will divide the circle using the elements
  translate(width*0.5,height*0.5); //translate everything to the centre
  for (int i = 0; i < elements;i++) { // do the loop
    //strokeWeight(i); // this might be fun
    stroke(0); // black 
    point(cos(spacing*i)*radius,sin(spacing*i)*radius); // draw the points
 
} 
}
Create PDF    Send article as PDF to

Using PI to draw circles

Monday, October 20th, 2008

Whitney used polar coordinates for most of his stuff. Remember, polar coordinates are expressed in radius and angle values rather than x and y (cartesian coordinates). You can convert between polar and cartesian by using cosine(for x values) and sine(for y values). Remember, after the conversion, you still have to specify the radius as a length value, as polar values are always relative to the length. Hmmm.

Here’s some examples to get you going

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* This patch is to show how you can use PI to divide space - for example so that we can draw shapes with equal sides easily
The tricky thing to understand is that we need to first divide the 'unit circle' (the circle we are drawing)
by the number of points we will have to draw the shape
 
so if we are using three points
 
we should divide the circle (TWO_PI radians)
 
by the number of points
 
and then multiply this value by the number of the point we are drawing (as the points will be drawn at equal distances within the circle radius)
 
This is how computers draw circles, as we can see when we increase the number of points.
 
*/
 
float radius = 100; // this is the size of shape
float phase = 0; // we don't use this yet, but it comes in handy in later examples.
int elements = 10;// this is the number of points. We are changing this dynamically later on, but dont have to.
 
void setup() {
 size(400,400);//size of the window
 frameRate(25);//updates per second
 background(255,255,255);//bg colour =  white
 smooth();//anti-alias the screen. We do this as it looks less jagged. Not necessary but nice looking
 
}
 
void draw() {
 background(255,255,255); // clear the screen
 elements = (mouseX/10);//set the number of elements to equal the mouseX position divided by 10 - this is pretty arbitrary so we can see the point (ha ha).
 translate(width*0.5,height*0.5);//move the coordinate system to the centre of the screen before we start drawing
 rotate(-HALF_PI);//rotate the co-ordinate system so that 0 is at the top (north) instead of pointing West. We don't need to do this at all, but it's nice.
 for (int i = 0; i < elements;i++) {//set up a loop to draw our points
  strokeWeight(10);//set the pen width to 10 pixels
  point(cos((TWO_PI/elements)*i)*radius,sin((TWO_PI/elements)*i)*radius);/*draw the points. We use some Trig here.
  The X position is equal to the cosine of i (the current point nunmber) multiplied by TWO_PI/number of elements.
  The Y position is equal to the sin of i (the current point number) multiplied by TWO_PI/number of elements.
  This is "Polar to Cartesian Conversion". We are converting Angle Values (expressed in Radians) into the x and y values we need for the processing drawing objects, and we're using cos and sin to do this.
  We are then multiplying by the radius. This sets the size of the object we are drawing.
  */
  strokeWeight(2);
  line(cos((TWO_PI/elements)*i)*radius,sin((TWO_PI/elements)*i)*radius,cos((TWO_PI/elements)*(i+1))*radius,sin((TWO_PI/elements)*(i+1))*radius);
  //the above code draws a line between the current point and the next point. Voila - we have a shape with equal sides.
 
 } 
}
PDF Printer    Send article as PDF to