Let's say we want to make that program that generates a world of monkeys. Your program could generate a thousand Monkey objects, each with a height value between 200 and 300 (as this is a world of monkeys that have heights between 200 and 300 pixels).

var randomHeight = random(200, 300);

Does this accurately depict the heights of real-world beings? Think of a crowded sidewalk in New York City. Pick any person off the street and it may appear that their height is random. Nevertheless, it’s not the kind of random that random() produces. People’s heights are not uniformly distributed; there are a great deal more people of average height than there are very tall or very short ones. To simulate nature, we may want it to be more likely that our monkeys are of average height (250 pixels), yet still allow them to be, on occasion, very short or very tall.

       표준편차의 이해: http://bcho.tistory.com/972

A distribution of values that cluster around an average (referred to as the “mean”) is known as a “normal” distribution. It is also called the Gaussian distribution (named for mathematician Carl Friedrich Gauss) or, if you are French, the Laplacian distribution (named for Pierre-Simon Laplace). Both mathematicians were working concurrently in the early nineteenth century on defining such a distribution.

When you graph the distribution, you get something that looks like the following, informally known as a bell curve:

A standard bell curve

The curve is generated by a mathematical function that defines the probability of any given value occurring as a function of the mean (often written as μ, the Greek letter mu) and standard deviation (σ, the Greek letter sigma).

The mean is pretty easy to understand. In the case of our height values between 200 and 300, you probably have an intuitive sense of the mean (i.e. average) as 250. However, what if I were to say that the standard deviation is 3 or 15? What does this mean for the numbers? Looking at graphs can give us a hint. The graph above shows us the distribution with a very low standard deviation, where the majority of the values cluster closely around the mean. The graph below shows us a higher standard deviation, where the values are more evenly spread out from the average:

A bell curve with a higher standard deviation

The numbers work out as follows: Given a population, 68% of the members of that population will have values in the range of one standard deviation from the mean, 98% within two standard deviations, and 99.7% within three standard deviations. Given a standard deviation of 5 pixels, only 0.3% of the monkey heights will be less than 235 pixels (three standard deviations below the mean of 250) or greater than 265 pixels (three standard deviations above the mean of 250).

Calculating Mean and Standard Deviation

Consider a class of ten students who receive the following scores (out of 100) on a test:

85, 82, 88, 86, 85, 93, 98, 40, 73, 83

The mean is the average: 81.3

The standard deviation is calculated as the square root of the average of the squares of deviations around the mean. In other words, take the difference from the mean for each person and square it (variance). Calculate the average of all these values and take the square root as the standard deviation.

The standard deviation is the square root of the average variance: 15.13

Luckily for us, to use a normal distribution of random numbers in a program here, we don't have to do any of these calculations ourselves. Instead, we can make use of the Randomobject provided by ProcessingJS.

To use Random, we must first instantiate a new Random object, passing in 1 as the parameter. We call that variable "generator" because what we've created can be basically thought of as a random number generator.

var generator = new Random(1);

If we want to produce a random number with a normal (or Gaussian) distribution each time we run through draw(), it’s as easy as calling the function nextGaussian().

var num = generator.nextGaussian();
println(num);

So, now, what are we supposed to do with this value? What if we wanted to use it, for example, to assign the x-position of a shape we draw on screen?

The nextGaussian() function returns a normal distribution of random numbers with the following parameters: a mean of zero and a standard deviation of one. Let’s say we want a mean of 200 (the center horizontal pixel in a window of width 400) and a standard deviation of 60 pixels. We can adjust the value to our parameters by multiplying it by the standard deviation and adding the mean.

var standardDeviation = 60;
var mean = 200;
var x = standardDeviation * num + mean;

Now, we can create our program that draws semi-transparent circles according to a normal distribution. The darkest spot will be near the center, where most of the values cluster, but every so often circles are drawn farther to the right or left of the center.

// Adapted from Dan Shiffman, natureofcode.com

var generator = new Random(1);

<코드>

var draw = function() {

    // The nextGaussian() function returns a normal distribution of random numbers with the following parameters: a mean of zero and a standard deviation of one

    var num = generator.nextGaussian();

    var standardDeviation = 60;

    var mean = 200;

    // Multiply by the standard deviation and add the mean.

    var x = standardDeviation * num + mean;

    noStroke();

    fill(214, 159, 214, 10);

    ellipse(x, 200, 16, 16);

};

    <출력>

<코드>

var generator = new Random(1);

var standardDeviation = 2;

var mean = 0;

var Walker = function() {

    this.x = width/2;

    this.y = height/2;

};

Walker.prototype.display = function() {

    strokeWeight(3);

    stroke(0, 0, 0);

    point(this.x, this.y);

};

// Randomly move up, down, left, right, or stay in one place

Walker.prototype.walk = function() {

    var xStepSize = standardDeviation * generator.nextGaussian() + mean;

    var yStepSize = standardDeviation * generator.nextGaussian() + mean;

    this.x += xStepSize;

    this.y += yStepSize;

};

var w = new Walker();

var draw = function() {

    w.walk();

    w.display();

};

<출력>

2# 잘못된 코드

var generator = new Random(1);

var standardDeviation = 2;

var mean = 0;

var num = generator.nextGaussian();

var Walker = function() {

    this.x = width/2;

    this.y = height/2;

};

Walker.prototype.display = function() {

    strokeWeight(3);

    stroke(0, 0, 0);

    point(this.x, this.y);

};

// Randomly move up, down, left, right, or stay in one place

Walker.prototype.walk = function() {

    var xStepSize = standardDeviation*num + mean;

    var yStepSize = standardDeviation*num + mean;

    this.x += xStepSize;

    this.y += yStepSize;

};

var w = new Walker();

var draw = function() {

    w.walk();

    w.display();

};

<출력>

3#절충형

var generator = new Random(1);

var standardDeviation = 2;

var mean = 0;

var Walker = function() {

    this.x = width/2;

    this.y = height/2;

};

Walker.prototype.display = function() {

    strokeWeight(3);

    stroke(0, 0, 0);

    point(this.x, this.y);

};

// Randomly move up, down, left, right, or stay in one place

Walker.prototype.walk = function() {

    var num = generator.nextGaussian();

    var xStepSize = standardDeviation * num + mean;

    var yStepSize = standardDeviation * generator.nextGaussian() + mean;

    this.x += xStepSize;

    this.y += yStepSize;

};

var w = new Walker();

var draw = function() {

    w.walk();

    w.display();

};

<출력>

<^^>

<< 칸아카데미의 Advenced JS를 학습한 내용입니다. 칸선생님 감사합니다. by 해인>>

The Random Walker Object

Let's review a bit of object-oriented programming (OOP) first by building a Walker object. This will be only a cursory review. If you have never worked with OOP before, you should go through the section on Object-Oriented JavaScript.

An object in JavaScript is a data type that has both properties and functionality attached to it, via its prototype. We are looking to design a Walker object that both keeps track of its data (where it exists on the screen) and has the capability to perform certain actions (such as draw itself or take a step).

In order to create instances of Walkers, we need to define a Walker object. We'll use that object as the cookie cutter, and each new Walker instance are the cookies.

Let's begin by defining the Walker object type. The Walker only needs two pieces of data—a number for its x-location and one for its y-location. We'll set those in its constructor function, setting them to the center of the canvas.

var Walker = function() {
    this.x = width/2;
    this.y = height/2;
};

In addition to keeping track of its x and y, our Walker object will also have methods that we can call on it. The first will be a method that allows the object to display itself as a black dot. Remember that we add methods to an object in JavaScript by attaching them to the object's prototype.

Walker.prototype.display = function() {
    stroke(0, 0, 0);
    point(this.x, this.y);
};

The second method directs the Walker object to take a step. Now, this is where things get a bit more interesting. Remember that floor on which we were taking random steps? Well, now we can use our canvas in that same capacity. There are four possible steps. A step to the right can be simulated by incrementing x (x++); to the left by decrementing x (x--); forward by going down a pixel (y++); and backward by going up a pixel (y--). How do we pick from these four choices? Earlier we stated that we could flip two coins. In ProcessingJS, however, when we want to randomly choose from a list of options, we can pick a random number using random().

Walker.prototype.walk = function() {
    var choice = floor(random(4));
};

The above line of code picks a random floating point number between 0 and 4 and converts it to a whole number by using floor(), with a result of 0, 1, 2, or 3. Technically speaking, the highest number will never be 4.0, but rather 3.999999999 (with as many 9s as there are decimal places); since floor() returns the closest whole number that is lesser or equal, the highest result we can get is 3. Next, we take the appropriate step (left, right, up, or down) depending on which random number was picked.

Walker.prototype.walk = function() {
    var choice = floor(random(4));
    if (choice === 0) {
        this.x++;
    } else if (choice === 1) {
        this.x--;
    } else if (choice === 2) {
        this.y++;
    } else {
        this.y--;
    } 
};

Now that we've written the class, it's time to make an actual Walker object in our program. Assuming we are looking to model a single random walk, we declare and initialize one global variable of type Walker, by calling the constructor function with the new operator.

var w = new Walker();

Now, to make the walker actually do something, we define the draw() function, and tell the walker to take a step and draw itself each time that's called:

var draw = function() {
    w.walk();
    w.display();
};

Since we don't call background() in the draw function, we can see the trail of the random walk on our canvas:

<코드>

var Walker = function() {

    this.x = width / 2;

    this.y = height / 2;

};

Walker.prototype.display = function() {

    stroke(0, 34, 255);

    point(this.x, this.y);

};

Walker.prototype.walk = function() {

    var num = floor(random(4));

    if (num === 0) {

        this.x++;

    } else if (num === 1) {

        this.x--;

    } else if (num === 2) {

        this.y++;

    } else {

        this.y--;

    }

};

var guy = new Walker();

draw = function() {

    guy.display();

    guy.walk();

};

해인이의 과학이야기 : 분자식의 이해(2)

https://www.youtube.com/watch?v=tg9QoyP3isw

                                                                 update 2015-9-39

Today, I learned Biology again. My dad showed me some great new videos about Biology today in youtube, since I have almost finished most stuff on KA.
The lecture was about the structure of DNA, my personal favorite.
The lesson showed me some great new stuff and cut of some worries that were on my mind. I will tell you some stuff as well.
Francis Crick and James Watson - The famous duo who first made the model of a double helix DNA, the first inspiration was by a chemist named Rosalind Franklin. She discovered how the DNA sort of looked like when testing a strand of DNA with X - Ray crystallography, it looked like an X shape with an ellipse black background.
These are the Data - Proofs that Crick and Watson used for their famous double - helix model :

#1 - By looking at the X shape of the DNA Molecule, we could highly assume that it is a double helix - like so : XXXXXXX (Look at the pattern, do you see the double helix when you flip it in 90 degrees?)

#2 - When Crick examined the DNA with X - Ray crystallography, he discovered that when you flip it to 180 degrees, a frequent pattern was discovered.
This generally proves that the DNA strands - They are non - parallel to each other.
Example :
----> ->> <----
----> ->> <----
But :
----> ->> <----
<---- ->> ---->

The second one describes a pattern to you, doesn't it?

#3 - There is something called "Chargaff's law" (or the least I think it is, maybe it's rule.....  which says: The % of Adenine is equal to the % of Thymine, and the % of Cytosine is equal to the % of Guanine.

#4 - That time, there was a 'Fight' over the four arrangements - the new one was the Keto and Amino arrangements and the "betting" original ones were the Enol and Amide arrangements.
(To be honest, I really didn't diddle with those arrangements a lot, sorry about that.)
As a result, the new arrangements has won the game. Which gave the Crick and Watson duo a better 'chance' to prove that the DNA was shaped like a double helix.

Those are the Proofs of how the famous double helix DNA molecule model was formed!
Now, for my critical part - You do remember that I said "The lesson showed me some great new stuff and cut of some worries that were on my mind!" right?
Well, I'll tell you those "Stuff" that disabled my mind frequently. And I also hope you won't be in the same situation I had.
The problem's name is called " 5` to 3` errors " and the answer was pretty easy then I thought. here it is:

Error 1 - We all know when DNA is replicating, the 5` end and 3` end pairs splits from each other, then the RNA primase starts the leading strand and the lagging strand and then DNA polymerase and then ligase... you know the rest, don't ya?
Well, the thing is, I didn't know how could you prove that why did the 5` matched with the 3` and why is there no such thing as 3` or 1` or maybe 2` ends.
Because my intuition of replication of DNA's exampling DNA model was quite "Horrible - graphic"ed, I had to ask a lot of question that times and then.
Proof: Look back at Data proof number 2, you can know that the backbone(Sugar and Phosphate) is Non - Parallel to each other.
That proves that the starting and ending strand is gonna be different!

Error 2 - Look at the picture with the sky - blue backbones and the Nitrogenous pairs, do you see it? I do.
Well, if you look at the "Backbones" that I just said, the place that holds the base pairs A, T, C, G. that place is the 1` place. Now all you have to do is count clockwise! then you can see the pattern!
Note: The 5` end is a bit below where the big yellow P is placing.

There you go! That's all of the stuff I learned today, and I will come back with some more "Refreshing" news! :
By Jane Kim  <<해인이가>>

,