Ass­i­g­n­m­e­n­t­0­1

by Mengting Zhang

Student

NAME:MENGTING ZHANG

ID:MZHA8807

UNIT:IDEA9103 DESIGN PROGRAMMING

Design Brief & Inspiration

In this assignment, I plan to create some changes in terms of colors and positions. After I did some research, I was inspired by these two Golden Section images - Spiral Nautilis Shell and The Mathematics of the Golden Ratio, which show the delicate relationship between the Galaxy and golden section. Thus I decided to draw a golden section located in the Universe, where has many stars. Bascially,the "movement" behaves as changes on the color and position of background star and the golden ratio which can transform its color and direction.

Design Process

-Background Stars

At the first step of my plan, I plan to draw some points on a black background which indicate the stars on the university. But I want the star can random change its sizes and position, so it looks like more natural.

  • Show Sketch
/** @peep sketchcode */
void setup() {
  size(400,400);
  background(0);
  noLoop(); // set noloop condition for drawing stars;
}
 
void draw() {
   smooth();
   noStroke();
   float r1 = random (2,3);
   float r2 = random (2.5,3.5);
   float r3 = random (3,4);
   //set value to different radiums
   for (int y = 0; y <= height; y += random(20,40)) {
     for (int x = 0; x <= width; x += random(10,30)) { 
       // define three conditions of drawing stars, includes changes in size, color, location and quantity of stars;
       if (random(1) < 0.6) { //if the range of number is <0.6, then executive the first following command;
         ellipse(x, random(1,2)*y, r1,r1); 
         } else {
           if(0.6<= random(1)< 0.85){
             ellipse(random(1,1.5)*x,random(2,3)*y,r2,r2);
             }else{
               ellipse(random(1,2)*x, y, r3,r3);
               }
            }
        }
    }
}

Then I design to change the color, make it looks more colorful and beatuiful. And considering the spatial location, most of the stars are far away, it should looks like many small points. That means, if the location of stars are far from us, they should look smaller and darker; if the stars are nearby us, they should look bigger, brighter and clearer.

  • Show Sketch
/** @peep sketchcode */
float inrect = 180; // initial size for rectangle;
float angle = 0.986; // assign the value 0.986 to the variable 'angle';
 
void setup() {
  size(400,400);
  background(0);
  noLoop(); //
}
 
void draw() {
   smooth();
   noStroke();
   float r1 = random (2,3);
   float r2 = random (2.5,3.5);
   float r3 = random (3,4);
   //set value to different radiums
   for (int y = 0; y <= height; y += random(20,40)) {
     for (int x = 0; x <= width; x += random(10,30)) { 
       // define three conditions of drawing stars, includes changes in size, color, location and quantity of stars;
       if (random(1) < 0.6) { //if the range of number is <0.6, then executive the first following command;
         fill(random(#65E7F7),random(90,160));//set different colors and ocapcity to smaller stars;
         ellipse(x, random(1,2)*y, r1,r1); 
         } else {
           if(0.6<= random(1)< 0.85){
             fill(random(#FCC254),random(120,160));
             ellipse(random(1,1.5)*x,random(2,3)*y,r2,r2);
             }else{
               fill(random(#FCA254),random(120,190));
               ellipse(random(1,2)*x, y, r3,r3);
         }
      }
   }
}
}

-The Golden Section

After finishing drawing the background, I plan to add a golden section. Given the variable in background part will affect my next draw, so I write a new function, name 'Goldensection()' -- //drawGoldensection();

Inside this new function, I plan to use translate and rotate to show the ratio. I set a initial size and use loop function to make the rectangle automatically increases its quantity and becomes smaller than pervious one.

  • Show Sketch
/** @peep sketchcode */
float inrect = 180; // initial size for rectangle;
float angle = 0.986; // assign the value 0.986 to the variable 'angle';
 
void setup() {
  size(400,400);
  background(0);
  noLoop(); //
  drawGoldensection(); // sets a new function();
}
 
void drawGoldensection(){
  fill(255,10);
  strokeWeight(1.75); 
  stroke(255,180);
  translate(width/2, height/2); //set the centre position;
  rotate(-PI/2);
  for (int i = 0; i<100; i++) { //set the number of rectangle and loop condition;
    float size = inrect*pow(angle, i); // Set 'size' to angle^i, assign a variable value to 'size';
    rect(0, 0, size, size);// a regular change on size (smaller) without movement on central point;
    rotate(PI/36);// rotate angle;
    angle*=0.9999;
  }
}

Then I expect the golden ratio can change its direction and color while each time the image is refreshed.

  • Show Sketch
/** @peep sketchcode */
float inrect = 180; // initial size for rectangle;
float angle = 0.986; // assign the value 0.986 to the variable 'angle';
 
void setup() {
  size(400,400);
  background(0);
  noLoop(); //
  drawGoldensection(); 
}
 
void drawGoldensection(){
  int r = random(150,254);
  int g = random(150,254);
  int b = random(150,254);
  int o = random(90,180);
  //set different values for color and opacity;
  fill(r,g,b,random(10));
  strokeWeight(1.75); 
  stroke(r,g,b,o);
  translate(width/2, height/2); //set the centre position;
  rotate(random(-PI,PI)); //set the rotate range;
  for (int i = 0; i<100; i++) { //set the number of rectangle and loop condition;
    float size = inrect*pow(angle, i); // Set 'size' to angle^i, assign a variable value to 'size';
    rect(0, 0, size, size);// a regular change on size (smaller) without movement on central point;
    rotate(PI/36);
    angle*=0.9999;
  }
}

Finial Design

This is the finial work of my design, which combine the background stars and the golden ratio in one image. The finial work achieves:

  • Different items have their own movements;

  • No mutual influence on colors between different items;

  • Show Sketch
/** @peep sketchcode */
float inrect = 180; // initial size for rectangle;
float angle = 0.986; // assign the value 0.986 to the variable 'angle';
 
void setup() {
  size(400,400);
  background(0);
  noLoop(); //
}
 
void draw() {
   smooth();
   noStroke();
   float r1 = random (2,3);
   float r2 = random (2.5,3.5);
   float r3 = random (3,4);
   //set value to different radiums
   for (int y = 0; y <= height; y += random(20,40)) {
     for (int x = 0; x <= width; x += random(10,30)) { 
       // define three conditions of drawing stars, includes changes in size, color, location and quantity of stars;
       if (random(1) < 0.6) { //if the range of number is <0.6, then executive the first following command;
         fill(random(#65E7F7),random(90,160));//set different colors and ocapcity to smaller stars;
         ellipse(x, random(1,2)*y, r1,r1); 
         } else {
           if(0.6<= random(1)< 0.85){
             fill(random(#FCC254),random(120,160));
             ellipse(random(1,1.5)*x,random(2,3)*y,r2,r2);
             }else{
               fill(random(#FCA254),random(120,190));
               ellipse(random(1,2)*x, y, r3,r3);
         }
      }
   }
}
   drawGoldensection(); // sets a new function();
}
 
// draw golden section in a function();
void drawGoldensection(){
  int r = random(150,254);
  int g = random(150,254);
  int b = random(150,254);
  int o = random(90,180);
  //set different values for color and opacity;
  fill(r,g,b,random(10));
  strokeWeight(1.75); 
  stroke(r,g,b,o);
  translate(width/2, height/2); //set the centre position;
  rotate(random(-PI,PI)); //set the rotate range;
  for (int i = 0; i<100; i++) { //set the number of rectangle and loop condition;
    float size = inrect*pow(angle, i); // Set 'size' to angle^i, assign a variable value to 'size';
    rect(0, 0, size, size);// a regular change on size (smaller) without movement on central point;
    rotate(PI/36);
    angle*=0.9999;
  }
}

Reference

1.http://www.commercialfineart.com/william-neill-shop/william-neill-spiral-nautilus.html

2.http://thegoldenpathway.org/the-mathematics-of-the-golden-ratio-2/

Comments

Nobody has said anything yet.