iT邦幫忙

DAY 7
1

用程式描繪世界 - 閱讀The Nature of Code系列 第 7

[Day7] - 來畫個圖吧,練習Distribution只是順便~

  • 分享至 

  • xImage
  •  

這一節要做些練習來展現目前所學的成果啦,會從書上提供的習題開始,試著得到一些成就感,

習題如下:

Consider a simulation of paint splatter drawn as a collection of colored dots. Most of the paint clusters around a central location, but some dots do splatter out towards the edges. Can you use a normal distribution of random numbers to generate the locations of the dots? Can you also use a normal distribution of random numbers to generate a color palette?

習題就是要模擬墨水的噴濺,墨水會集中在中間,越接近邊界墨水會越少,這看起來就是normal distributioin啊! 立馬開始做作業!

上一篇的最後是一個X軸的normal distribution的展現,如果是墨水噴濺,圓形的呈現,我們分別需要XY兩個軸的數值都進行Normal Distribution,並將平均值(mean)設為螢幕的一半:

import java.util.*; //import java lib for Random class
Random xGenerator;
Random yGenerator;
float mean;
float deviation;
void setup(){
  size(600, 600);
  xGenerator = new Random();
  yGenerator = new Random();
  mean = 300;
  deviation = 60;
}

現在我們有了個個基本設定,再來是繪圖的部分,利用nextGaussian()常態分佈所產生出來的亂數值,加上標準差與平均計算出每次的坐標位置,有了坐標位置使用圓形來顯示噴濺的點,

void draw(){
  // 產生x軸與y軸位置
  float x = (float) xGenerator.nextGaussian() * deviation + mean;
  float y = (float) yGenerator.nextGaussian() * deviation + mean;
  ellipse(x, y, 30, 30);
}

會產生下圖:

感覺蠻醜的,而且都重疊在一起,看不出來密集程度,我在這邊稍稍做一點改變,調整背景,並將圓點加上透明度

void setup(){
  ...
  noStroke();
  background(255);
}
void draw(){
  ...
  fill(0, 30);
}

有趣多了,像是發霉的吐司....,但是還不滿意,因為真的太噁心了,習題最後叫我們加上顏色大概就是這個原因吧...

所以還需要一個random顏色的解決方案,這個就用uniform distribution解決吧(但如果想要讓他偏向某個色系的確可以使用normal distribution)。

圓形的顏色是由fill這個方法決定,但它顏色的使用方式預設是Gray或RGB,gray不考慮,RGB的話則需要三個亂數產生器,也太麻煩了吧!!! 所以我用HSB這樣就只要調整H(色相)就可以有五彩繽紛的顏色,使用HSB需要用colorMode(HSB, 100)設定,第二個參數代表的是值的範圍。

這邊我們繼續寫下去,正如我們剛剛假設的產生一個顏色的亂數

void setup(){
  background(255);
  colorMode(HSB, 100)
}
void draw(){
  ...
  fill( int(random(100)), 100, 100, int(random(50)) );
  ellipse(x, y, 10, 10);
}

順手也幫透明度加上了亂數,圓形大小也做了些調整,圖形如下:

看起來好多了~

可以試著調整平均數、標準差、原的半徑、distribution的方式,都會產生不一樣的結果,這也是樂趣之一。


上一篇
[Day6] - 常態分佈(Normal Distribution)
下一篇
[Day8] - 平滑移動 (Perlin Noise)
系列文
用程式描繪世界 - 閱讀The Nature of Code9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
otiann
iT邦新手 2 級 ‧ 2014-10-07 23:55:19

哈哈哈感覺超有趣啊!沒想到昨天的統計就是這樣用上了!酷!

0
altispec
iT邦新手 4 級 ‧ 2014-10-08 00:11:51

謝謝~但還是覺得寫程式比較好玩XD

我要留言

立即登入留言