Wednesday 17 December 2014

L&L - Me as a Reader: Opinions about "Ashes" (Book)

L&L - Me as a Reader: Opinions about "Ashes" (Book)


I haven't finish reading this book yet. However, I think this book is really exciting as it is a sci-fi and adventure book. It has a lot of interesting ideas and the story develops in a pace which is quite quick, and the plot line is very clear. There are also some vocabularies to learn from. It is not a book too easy to read for people like me (whose mother tongue is not English and do not have a long vocabulary list). I don't know if it is due to my lack of vocabulary or bad understanding or the book, I find the book a little difficult to understand. For me, some parts were not clear described, and it left me figuring out the details myself about what happened. But I think overall, it is very exciting to read.

Monday 15 December 2014

Language & Literature Visual Essay Reflection

Language & Literature Visual Essay Reflection


This is a visual essay on the duality and the reason Johnny (a character in the Outsiders) do such things. As it is a visual essay, we look at the images (pictures / drawings / paintings that help readers understand better), the text (quotes from book / people / movies / songs / poems / other books / & thesis), and the overall effect (which is how well the whole piece represents the thesis). I got a 6, an 8, and a 7 respectively, with an final grade of 7, which I am happy with.
_________________________________________________________________________________

Images

How were the images well chosen?

There are images of scenes that are not from the movie. It helps people understand the situation more when they have never read the book or seen the movie yet. Personally, I like the hearts with a high heart rate and the one on fire. These are images that are symbols. They support my thesis well as I am comparing a Johnny that is a nervous wreck, and a Johnny that is brave. I also like the dog a lot. One is timid and one is brave and running, when you put them together it explains a lot of my thesis.

How was the process of choosing these images?

Basically, I collected my quotes first. Then, I know what scenes, symbols and metaphors I am going to use. And then, I just go on internet and use keywords to search them up. It is quite simple actually. Paintings I think was a little hard to find as there is not as much paintings on something as photos. Also, paintings, unlike pictures, have more expression and feeling to it, so that part also has to fit what I want. It also take some time to find two similar dogs.
_________________________________________________________________________________

Text

How was the text well chosen?

I have got quotes from the book, from different people, and lyrics from songs. I think the quotes represents Johnny well, and more importantly, why is he like that. I think the quotes themselves are also quite meaningful.

How was the process of choosing these images?

I used goodreads to search for the quotes from different people. For the quotes in the book, I went through a pdf while searching "Johnny". Going through where quotes may be possible, then picking hem at last.

Improvement

If I were to improve on this part, I would try to choose more popular lyrics.


_________________________________________________________________________________

Visual Effect

Tuesday 9 December 2014

Processing: Creating the Solution

Processing: Creating the Solution

The above is my project and the comments include how much it matches my design brief, what were the things that I put in or edited, what changes I made, and description for some codes. The picture doesn't work in this because it has to be added to sketch and preloaded in which case I have no idea how to do that online. I will be posting my code below as I know that on the blog page it will look all messed up because it is too big... Just copy paste the code to a processing file and it should work fine, except for the image (just delete the line where it says image doesn't exist. However, the photo still won't work below as whoever is reading this will not have my jpeg file for the image, and it will not be in a sketch. Therefore, I am putting a screen shot of how the instruction page actually looks like when I play it on my Macbook.


THE CODE

// A lot of the codes are from the website.
//"party" is term used in instructions (which is the one with all random colours, mad is for the party circles, orange is for the party background
//If I changed something or type in a code, I will mention, if not, it means it is copied exactly.

ArrayList<Particle> pts;
boolean onPressed, showInstruction, orange, winter, autumn, spring, summer, mad, winterx, autumnx, springx, summerx; //this is like a varialbe, true or false
PFont f;                            //I added the orange boolean to the summerx
PFont fo;
PImage photo;
float x;
float z = 0;

//This is just the set up
void setup() {
  size(1280, 710);
  smooth();
  frameRate(50);
  rectMode(CENTER);
  pts = new ArrayList<Particle>();

//This made-up command is a boolean and will be given as a setup (only in the beginning), and when "showInstruction" is activated, the letters will be like this
  showInstruction = true;
//f is a made-up shortcut for the format and the look of the font
  f = createFont("Phosphate", 90, true);
  fo = createFont("Phosphate", 30, true); // I added this font myself.
}

//This is saying "This command is forever: if 'showInstruction' is activated, the image I named season appears, and letter 'click drag blablabla' will be shown as such a colour,
// and is centred blablabla and is the width* height* is for where the text will be put
void draw() {
  //First, you should use preview and open a photo, then, just copy-paste an image from the internet and change the size so it's like four photos, then go to sketch and add sketch and add your image, and use the code to make it display. This is also from funprogramming
  if (showInstruction) {
  photo = loadImage("season.jpeg");
  image(photo,x,0);
    fill(255,255,180);
    textAlign(CENTER, CENTER);
    textFont(f);
    textLeading(90);
    text("Season Blub Bowls" +"\n"+
      "Click & Drag "
      ,width*0.39, height*0.33);
    textFont(fo);
    textLeading(30);
    text("Then press 'a', 's', 'd', 'f', 'p' to change season" + "\n" +
      "a=Spring / s=Summer / d=Autumn / f=winter / p=party x 3"
      , width*0.39, height*0.61); //I changed the position and text.
  }

//Below this, a code says that is mouse is clicked, "onPressed" will be activated (true), here it says if it is true, this will happen: drawing circle, the background covers. This one is copied exactly.
  if (onPressed) {
    for (int i=0; i<10; i++) {
      Particle newP = new Particle(mouseX,mouseY, i+pts.size(), i+pts.size());
      pts.add(newP);
    }
    
        
  }
  
  //The is a boolean, when these booleans are true, they are activated and the background will change colour, and for the mad part, it will change strokes and stuff. 
//This is the code I took from funprogramming for the background of random colours with the shapes.
        if (orange){
            float x = 0;
  while (x < width) {

    float y = 0;
    while(y < height) {
      fill(random(0,130), 255, 255); // I only changed this part for this "if" sentence.
      ellipse(20 + x, 20 + y, 60, 60);
      y = y + 40;
    }    
    
    x = x + 40;
  }
  
  z = z + 0.02;
}
       
        if (spring){
        background(0,125,75); //I did this and the following 3 if sentences by myself. Some backgrounds are not used but it is an option for someone else to use a different colour, to take as reference.
        }
        
        if (winter){
         // background(115,95,255);
         background(150,215,255);
        }
        
        if (summer){
          //background(220,40,40);
         //background(255,115,0);
        background(255,105,30);
        }
        
        if (autumn){
          background(120,60,0); 
        }

//This is how the particles (which in this case are the circles), will be displayed and then when the size is small as zero, it gets removed.
  for (int i=0; i<pts.size (); i++) {
    Particle p = pts.get(i);
    p.update();
    p.display();
  }

  for (int i=pts.size ()-1; i>-1; i--) {
    Particle p = pts.get(i);
    if (p.dead) {
      pts.remove(i);
    }
  }
  
  
}





//Here is what I mentioned when mouse is clicked, mousePressed is true.
void mousePressed(){
  onPressed = true;
  if (showInstruction) {
  showInstruction = false;
  orange = true; // Added by me. It will start as the background with shapes of random colours, for "party"
mad = true; // Added by me. And it will start as the circles with all random colours.
}
}

// When the mouse goes from clicked to nothing, the onPress will not work, and will shut down
void mouseReleased() {
  onPressed = false;
}

//This part is if you press a key, then one specific boolean assigned to the key will be true, and the other ones will not be true. Further instructions in the bottoms states what happens when the booleans are true.
void keyPressed() {
  if (key == 'p') { //I made all of this...
    orange = true;
    spring = false;
    winter = false;
    summer = false;
    autumn = false;
    mad = true;
    springx = false;
    winterx = false;
    summerx = false;
    autumnx = false;
  }
  
  if (key == 'a') {
    spring = true;
    orange = false;
    winter = false;
    summer = false;
    autumn = false;
    springx = true;
    mad = false;
    winterx = false;
    summerx = false;
    autumnx = false;
  }
  
  if (key == 'f') {
    winter = true;
    spring = false;
    orange = false;
    summer = false;
    autumn = false;
    winterx = true;
    springx = false;
    mad = false;
    summerx = false;
    autumnx = false;
  }
  
  if (key == 's') {
    summer = true;
    spring = false;
    winter = false;
    autumn = false;
    orange = false;
    summerx = true;
    springx = false;
    winterx = false;
    autumnx = false;
    mad = false;
  }
  
  if (key == 'd') {
    autumn = true;
    spring = false;
    orange = false;
    winter = false;
    summer = false;
    autumnx = true;
    springx = false;
    mad = false;
    winterx = false;
    summerx = false;
  } //... until here
}





//This is the particles part. the particle(...) is how much they will move vertically and horrizontally, and how much they get smaller everytime.
class Particle {
  PVector loc, vel, acc;
  int lifeSpan, passedLife;
  boolean dead;
  float alpha, weight, weightRange, decay, xOffset, yOffset;
  color c; //here it mentiones that the particle will the fill as "c"

  Particle(float x, float y, float xOffset, float yOffset) {
    loc = new PVector(x, y);

    float randDegrees = random(360);
    vel = new PVector(cos(radians(randDegrees)), sin(radians(randDegrees)));
    vel.mult(random(5));

    acc = new PVector(0, 0);
    lifeSpan = int(random(30, 90));
    decay = random(0.75, 0.9);
    //Here I say what the value of c will be using booleans. (booleans - as I understand - is mainly used when you put a keypressed in the void keyPressed, but the result you want to see belong to somewhere else (e.g. void draw / particle)  
    if (mad) { //I added from here
      c = color(random(0,255), random(0,255), random(0,255));
    }      
    if (springx) {
      //c = color(random(10,95),random(90,255),random(0,75));
      c = color(random(45,130),random(120,255),random(0,75));

    }
    if (winterx) {
      //c = color(95,random(115,255),255);
      //c = color (random(0,106),random(170,230),random(220,255));
      c = color(random(95,225),random(150,255),255);
    }
    if (summerx) {
     //c = color(random(150,255), random(0,185), random(0,20));
     //c = color(random(200,255), random(,200), random(0,20));
     c = color(random(225,255),random(0,240),0);
    }
    if (autumnx) {
     c = color(random(120,255),random(60,128),0); 
    } //to here
    
    weightRange = random(3, 50);

    this.xOffset = xOffset;
    this.yOffset = yOffset;
  }


  void update() {
    if (passedLife>=lifeSpan) {
      dead = true;
    } else {
      passedLife++;
    }

    alpha = float(lifeSpan-passedLife)/lifeSpan * 70+50;
    weight = float(lifeSpan-passedLife)/lifeSpan * weightRange;

    acc.set(0, 0);

    float rn = (noise((loc.x+frameCount+xOffset)*0.01, (loc.y+frameCount+yOffset)*0.01)-0.5)*4*PI;
    float mag = noise((loc.y+frameCount)*0.01, (loc.x+frameCount)*0.01);
    PVector dir = new PVector(cos(rn), sin(rn));
    acc.add(dir);
    acc.mult(mag);

    float randDegrees = random(360);
    PVector randV = new PVector(cos(radians(randDegrees)), sin(radians(randDegrees)));
    randV.mult(0.5);
    acc.add(randV);

    vel.add(acc);
    vel.mult(decay);
    vel.limit(3);
    loc.add(vel);
  }

//This is to tell how a new circle comes out smaller each time.
  void display() {
    strokeWeight(weight+0.1);
    stroke(c);
    point(loc.x, loc.y);
  }
}

//The changes usually have little difference from the original design. The image starts too big, so it doesn't show the whole image. I decided I would let it the way it is as I do not know how to fix it and I thought I could let it look like a powerpoint. I also made spring the biggest because green is the best for our eyes.
//I also changed the colour of the background for summer. I changed it from red to orange. It was because I found that red would be too bright and would sting people's eye, and is not pleasant. If the red was darker and less stinging, it doesn't feel like a red for summer.
//In my original plan, I had a dark blue included for winter, but I took it away as I thought the colours for winter should look more lighter like white snow.
//I also took away the purple from autumn because I did not think it fits autumn or contrasts with the background very well.
//I also changed the keys to change the season colour. Instead of using the first letter of seasons, I made it asdf for spring -> summer -> autumn -> winter relatively. I did it like that as I thought that is the order of seasons most people follow.
//I made p for party instead of m for mad or r for random or c for crazy. It is because I thought that I should give it an occasion or time like the seasons, so I thought party party party would be good.
//And I changed the name / title of this programme with some different pronunciation just to make it sound more interesting.

//I think the changes are small and it is about what I planned it to be. I have instructions with a season-pictures background that show at the beginning and will be gone when you start clicking or pressing.
//Also, the colours are pretty similar (red, yellow, and orange for summer / the mad or party one is pretty crazy, but that colour is laggy. However that cannot be fixed / green for spring, purple and light blue for winter, and orange and brown for autumn) as mentioned in the planning drawings.
//The circles do move in random directions like floating, while getting smaller and smaller. They also have a random-with-limits colours, and the same circle stay the same colour the whole time. 

Processing: Evaluating

Processing: Evaluating


i. Describe detailed and relevant testing methods, which generate accurate data, to measure the success of the solution.
  • It is a very good, very cool project, it's great, it's awesome, it's nice it's super cool, it's interesting. It is so fun and is like a game.
  • The patterns and colours look very good and it is comfortable to look at.
  • However, the purple in for "winter" is too red for winter.
  • Also, the orange background for summer a little dim.
  • The party part might be too flashy for some people that are sensitive to light and would make them feel sick.
  • Maybe I should add some numbers for points every-time someone just finished dragging or clicking, to make it more like a game so it is more fun.

ii. Explain the success of the solution against the design specification.

(The following is a paragraph, just split up so sections can be viewed clearly)

I think my final product is quite satisfying. It is around how I hoped it was going to turn out, but it was better than my expectations, as I had struggles.

I was having struggles in figuring how to change colour of the small circles, and how to make a background overlap after a previous "particle". So the circles doesn't stay one by one from small to big (means like how this is). I also had struggles with importing images (which worked originally and shown in "Creating the Solution" and actually looks much better). I spend some time figuring out what the colour-range should be.

It turned out as I planned and as what I wanted. I think the there is a harmony between the colours and that they contrast great too. The colours also represents the seasons quite well (colour is very important for my project and I think I did well on picking them) which means it evokes emotions.

Talking of design specifications. It does have randomness with limitations, in the part of how the circles have different colours and sizes and go in different directions, but they are around the same size, and the same set of colours. It does evoke some emotions. It has all kinds of colours when you combine the four seasons together, it is very colourful. I think it is a good and fun thing just to doodle with and drag the mouse along the screen and see colourful shapes and background when you get bored. It is created using processing. And yes, it has instructions.

A few things is that the image doesn't show, even if it does, it was too big and not four equal images (but I found that it looks quite good). Also, the party part was laggy. But I was very happy to get the colours change by pressing keys. It gives a whole lot more interactiveness and variations, and makes it less boring. It does feel like that nature is kind of simplified and it looks pretty good. So generally, quite good.

iii. Describe how the solution could be improved.

The programme works and doesn't have something big to fix. However,
  1. I should figure out how to get the jpeg image to show on the website and so it works when I embed it or view it on open processing.
  2. I should figure out how to get the jpeg to be smaller so it fit nicely in the space.
  3. I should find out why the party part is so laggy, and see if it can be fixed.
  4. Maybe, I can add more options, like images of the seasons or images of different locations. It would be more interesting and less boring to have more features.
  5. For the circles in the winter part. I should lower the the number for the Red in RGB. I will change from random(95,225) to random(95,185).
  6. I should tune the orange for the summer background to be brighter.
  7. I should make the party part not have strokes that go bigger and smaller, and I should make the colour similar.
  8. I can try add number in the end when the bubbles are gone as a point, or it can be a negative number. Just to have some more purpose.

iv. Describe the impact of the solution on the client/target audience.


  • This unit and this project is a lot about learning from other people's work. 
  • I think sometimes to build a basic understanding first is necessary because taking other people's work and to understand and edit it is sometimes a challenging process (as there isn't much explanation for you),
  • but I find that it actually makes us remember how to do something firmly.
  • Learning from other people's work also mean that we are more likely going to come up with different results instead of similar ones, so a variety of products will come out.
  • I also like this method of learning because it kind of sets an example of how to do something instead of having to find the code from the reference or tutorials because a lot of things are there in one place.
  • Also, if you understand someone else's work already, then you don't have to start from blank or do all the step by yourself, you can just add on to the original work (code), which allow more time to focus on learning codes, the design (for me, picking the colours), and adding more to make the code better.
  • If we add on someone's work and someone add on ours and someone else's add on theirs, the code will become very good with all the knowledge from different people put in one place.
  • Therefore, I think using others work to learn is a good method to learn overall.