🎓 2주차: 무작위성 (Randomness)

BamgasiJM·2025년 11월 2일

p5.js Art

목록 보기

13/67

Randomness의 개념

랜덤이란 무작위성, 비결정성, 예측불가능성을 의미합니다.
즉, "어떤 규칙도 없이 흩어지는 값"을 이야기하는 것이지요. 여러 방식으로 무작위의 정수, 실수를 특정 범위 안에서 추출하고 그것을 아트워크 제작에 사용하는 것이 이번 챕터의 주제입니다.

p5.js에서는 이런 함수들로 무작위성을 표현합니다.()안의 인수는 함수마다 정해져 있습니다.

random() → 완전한 균일 분포 (Uniform random)
randomGaussian() → 정규분포에 기반 무작위 분포
randomSeed() → 랜덤 시드 고정
shuffle(), randomChoice() → 배열을 섞거나 임의로 추출

🟦 1. 균등 분포 (Uniform Distribution)

function setup() {
  createCanvas(800, 400);
  background(16);
  noLoop();
}

function draw() {
  noStroke();
  for (let i = 0; i < 3000; i++) {
    fill(random(0, 255), random(0, 255), random(0, 255), random(70, 250));
    
    let x_pos = random(width);
    let y_pos= random(height);
    ellipse(x_pos, y_pos, 7, 7);
  }
}

이 코드에서는 모든 점이 같은 확률로 캔버스에 배치됩니다.

도형에 색을 채우기 위해 fill()을 사용합니다.

fill() 함수의 인수 r,g,b의 값에 0~255(8bit 기준으로 표현가능한 모든 색)를 넣고 인수 a값도 알파값에 변수를 주기 위해 랜덤 생성해서 넣습니다.

랜덤한 위치에서 생성되도록 x_pos와 y_pos에도 랜덤값을 넣습니다.

🟦 2. 가중치 기반 무작위 선택 (Weighted Random Choice)

function setup() {
  createCanvas(800, 600);
  background(23);
  noLoop();
}

function draw() {
  noStroke();
  for (let i = 0; i < 5000; i++) {
    let probability = random();
    let color_value;
    
    if (probability < 0.5) color_value = color(200, 200, 200);
    else if (probability < 0.7) color_value = color(10, 180, 170);
    else color_value = color(10, 90, 80);

    fill(color_value);
    ellipse(random(width), random(height), 7, 7);
  }
}

random() 함수로 0~1 사이의 실수를 얻고, 그 값을 probability 에 저장합니다. 그리고 color_value 변수를 생성합니다.

이제 if와 else if, else 를 사용해서 0~1 사이를 세 구획으로 나누고 우리가 얻은 랜덤값에 따라서 미리 정해놓은 color(r,g,b) 값을 부여합니다. 이 값은 color_value 변수에 매 회차마다 i 값이 증가할 때마다 fill(color_value) 메서드로 점들에 색이 칠해질 때 사용됩니다.

세 종류의 색깔 점들은 정해진 캔버스 크기 내에서 무작위 좌표(x, y)와 정해진 반지름으로 만들어집니다.

🟦 3. 랜덤한 정수 (Random Integer)

function setup() {
  createCanvas(800, 800);
  background(23);
  noLoop();
}

function draw() {
  // 색상 팔레트 정의 (불투명도 추가)
  let palette = [
    color(255, 240, 0, 180),
    color(255, 200, 0, 180),
    color(255, 160, 0, 180),
    color(255, 100, 0, 180),
    color(255, 50, 0, 180),
  ];

  noStroke();

  for (let i = 0; i < 2000; i++) {
    let idx = int(random(palette.length));
    fill(palette[idx]);

    // x, y를 10단위로 맞추기
    let x = int(random(width / 10)) * 10;
    let y = int(random(height / 10)) * 10;

    ellipse(x, y, 10, 10);
  }
}

여기서는 랜덤한 실수가 아닌 정수를 반환하도록 합니다.
random(a, b) → a 이상 b 미만의 실수 반환
int(random(a, b)) → a 이상 b 미만의 정수 반환 (소수점 아래 버림)
floor(random(a, b)) → 위와 동일하지만 항상 내림 처리
ceil(random(a, b)) → 올림 처리 (b가 포함될 수 있음)

이렇게 무작위 수가 반환되면 거기에 10을 곱해 1단위가 아니라 10단위로 수치를 다룰 수 있습니다. (10픽셀의 격자에 맞추어 도형 배치)

색을 채울 때에는 랜덤한 RGB 값 대신에 몇가지 색상 팔레트를 palette 라는 이름의 배열(list)에 저장합니다.

int(random(palette.length))는 0부터 palette.length - 1 사이의 정수를 반환하는 역할을 합니다. 리스트의 인덱스를 사용하는 방법입니다.

🟦 4. 가우시안 분포(Gaussian / Normal Distribution)

function setup() {
  createCanvas(800, 400);
  background(23);
  noLoop();
}

function draw() {
  noStroke();
  translate(width / 2, height / 2);

  for (let i = 0; i < 10000; i++) {
    let x_pos = randomGaussian(0, 60);
    let y_pos = randomGaussian(0, 60);
    fill(30, 180, 170, 90);
    ellipse(x_pos, y_pos, 6, 6);
  }
}

가우시안 분포 (종 모양의 정규 분포)를 이용해 중심 근처에 점들을 밀집해서 생성하는 방식입니다.

randomGaussian(mean, sd)
→ 평균(mean)을 중심으로, 표준편차(sd)에 따라 퍼지는 정규분포 랜덤 값을 생성합니다.
즉, 대부분의 점은 (0, 0) 근처에 몰리고, 가끔씩 멀리 떨어진 점이 생기게 됩니다.

translate(width / 2, height / 2)
→ 좌표계의 원점을 캔버스 중앙으로 이동시켜서, (0,0) 중심을 기준으로 분포하게 만듭니다.

이렇게 x_pos와 y_pos를 얻은 후 불투명도가 있는 색을 정한 후 w=6, h=6 크기의 원형을 순회하며 그립니다.

점들이 여러 "층"으로 퍼지는 깊이감을 내려면 아래와 같이 할 수 있습니다.

function setup() {
  createCanvas(1200, 1200);
  colorMode(HSB, 360, 100, 100, 100);
  background(5);
  noLoop();
  noStroke();
  translate(width / 2, height / 2);

  for (let layer = 0; layer < 5; layer++) {
    let sd = 25 + layer * 40;
    let alpha = 100 - layer * 15;
    let hue = (30 + layer * 60) % 360;

    fill(hue, 80, 100, alpha);

    for (let i = 0; i < 10000; i++) {
      let x_pos = randomGaussian(0, sd);
      let y_pos = randomGaussian(0, sd);
      ellipse(x_pos, y_pos, random(2, 5));
    }
  }
}

이 코드에서는 레이어를 5개 정하고, 반복문을 통해 레이어마다 어떤 변화를 줄 지 기술합니다.

표준편차 = 기준 표준편차 + 레이어 깊이에 따른 수치 증가
-> 더 넓게 퍼지도록 (30, 50, 70, 90, 110)

투명도 = 투명도 100에서 레이어 깊이에 따라 수치를 차감
-> 더 투명해지도록 (100, 90, 80, 70, 60)

색상 = 200을 기준으로 해서 레이어마다 다른 색성을 가지도록 360도를 순환
-> (200, 225, 250, 275, 300도)

그 후에 각 레이어마다 1500개의 점을 생성하는 반복문을 통해 정규분포에 따르는 X,Y 값을 얻어 정해진 사이즈로 원을 그립니다.

🟦 5. 랜덤 아트 종합 (Assorted random art)

function setup() {
  createCanvas(1200, 1200);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 5); // 어두운 배경
  noLoop();
  noStroke();
  
  // 캔버스를 4개의 구역으로 나누어 다양한 랜덤 패턴展示
  drawRandomWalk(300, 300);
  drawParticleSystem(900, 300);
  drawNoiseField(300, 900);
  drawGaussianClusters(900, 900);
}

// 1. 랜덤 워크 (Random Walk)
function drawRandomWalk(x, y) {
  push();
  translate(x, y);
  
  let posX = 0;
  let posY = 0;
  let hue = 200; // 파란색 계열
  
  for (let i = 0; i < 1000; i++) {
    // 각 걸음마다 색상 변화
    fill(hue, 80, 100, 80);
    
    // 랜덤한 방향으로 이동
    posX += random(-15, 15);
    posY += random(-15, 15);
    
    // 점점 커지는 원
    ellipse(posX, posY, i * 0.05 + 2);
    
    // 색상 변화
    hue = (hue + random(1, 3)) % 360;
  }
  pop();
}

// 2. 파티클 시스템 (Particle System)
function drawParticleSystem(x, y) {
  push();
  translate(x, y);
  
  for (let i = 0; i < 300; i++) {
    // 랜덤한 시작 위치
    let angle = random(TWO_PI);
    let distance = random(50, 150);
    let startX = cos(angle) * distance;
    let startY = sin(angle) * distance;
    
    let hue = random(0, 60); // 빨강-주황 계열
    let life = random(50, 100);
    
    // 파티클 궤적 시뮬레이션
    for (let j = 0; j < life; j++) {
      let alpha = map(j, 0, life, 100, 10); // 점점 희미해짐
      fill(hue, 90, 100, alpha);
      
      // 랜덤한 움직임
      startX += random(-3, 3);
      startY += random(-3, 3);
      
      ellipse(startX, startY, map(j, 0, life, 8, 2)); // 점점 작아짐
    }
  }
  pop();
}

// 3. 노이즈 필드 (Noise Field)
function drawNoiseField(x, y) {
  push();
  translate(x, y);
  
  let time = random(1000);
  
  for (let i = -200; i <= 200; i += 10) {
    for (let j = -200; j <= 200; j += 10) {
      // 퍼린 노이즈를 사용한 자연스러운 랜덤
      let noiseVal = noise(i * 0.05, j * 0.05, time);
      let size = map(noiseVal, 0, 1, 2, 7);
      let hue = map(noiseVal, 0, 1, 120, 280); // 초록-보라 계열
      
      fill(hue, 80, 100, 90);
      ellipse(i, j, size);
      
      // 노이즈를 이용한 회전 각도
      let angle = noiseVal * TWO_PI * 2;
      let length = size * 2;
      
      stroke(hue, 80, 100, 70);
      strokeWeight(2);
      line(i, j, i + cos(angle) * length, j + sin(angle) * length);
      noStroke();
    }
  }
  pop();
}

// 4. 가우시안 클러스터 (Gaussian Clusters)
function drawGaussianClusters(x, y) {
  push();
  translate(x, y);
  
  // 3개의 클러스터 생성
  for (let cluster = 0; cluster < 3; cluster++) {
    let clusterX = random(-200, 200);
    let clusterY = random(-200, 200);
    let hue = random(300, 360); // 분홍-보라 계열
    
    for (let i = 0; i < 500; i++) {
      // 정규분포를 따르는 위치
      let x_pos = randomGaussian(clusterX, 40);
      let y_pos = randomGaussian(clusterY, 40);
      
      // 거리에 따른 투명도 변화
      let distance = dist(x_pos, y_pos, clusterX, clusterY);
      let alpha = map(distance, 0, 100, 100, 20);
      
      // 거리에 따른 크기 변화
      let size = map(distance, 0, 100, 8, 2);
      
      fill(hue, 70, 100, alpha);
      ellipse(x_pos, y_pos, size);
    }
  }
  pop();
}

nannou

Cargo.toml:

[dependencies]
nannou = "0.19"
gif = "0.13"
image = "0.25"
nannou_egui = "0.19.0"
rand = "0.9.0"
noise = "0.9.0"
rand_distr = "0.5.1"

🟦 1. 균등 분포 (Uniform Distribution)

use nannou::prelude::*;
use rand::Rng; // rand 0.9.0 기준

fn main() {
    nannou::app(model).update(update).run();
}

struct Model;

fn model(app: &App) -> Model {
    app.new_window()
        .view(view)
        .size(400, 400)
        .title("Uniform Random Example")
        .build()
        .unwrap();
    Model
}

fn update(_app: &App, _model: &mut Model, _update: Update) {}

fn view(app: &App, _model: &Model, frame: Frame) {
    // 첫 번째 프레임만 그리도록
    if frame.nth() > 0 {
        return;
    }

    let draw = app.draw();
    draw.background().color(WHITE);

    let mut rng = rand::rng(); // thread_rng → rng
    for _ in 0..500 {
        let x = rng.random_range(-200.0..200.0);
        let y = rng.random_range(-200.0..200.0);
        let r = rng.random_range(0.0..1.0);
        let g = rng.random_range(0.0..1.0);
        let b = rng.random_range(0.0..1.0);

        draw.ellipse()
            .x_y(x, y)
            .w_h(8.0, 8.0)
            .rgba(r, g, b, 0.7);
    }

    draw.to_frame(app, &frame).unwrap();
}

🟦 2. 가중치 기반 무작위 선택 (Weighted Random Choice

use nannou::prelude::*;
use rand::Rng; // rand = "0.9.0"

fn main() {
    nannou::app(model).update(update).run();
}

struct Model;

fn model(app: &App) -> Model {
    app.new_window()
        .view(view)
        .size(400, 400)
        .title("Weighted Random Example")
        .build()
        .unwrap();
    Model
}

fn update(_app: &App, _model: &mut Model, _update: Update) {}

fn view(app: &App, _model: &Model, frame: Frame) {
    // 한 프레임만 렌더링
    if frame.nth() > 0 {
        return;
    }

    let draw = app.draw();
    draw.background().color(WHITE);

    let mut rng = rand::rng(); // ✅ 최신 API

    for _ in 0..400 {
        let r: f32 = rng.random(); // 0.0~1.0 사이 실수
        let color = if r < 0.7 {
            rgba(0.8, 0.2, 0.2, 0.7) // 70%
        } else if r < 0.9 {
            rgba(0.2, 0.4, 0.8, 0.7) // 20%
        } else {
            rgba(0.1, 0.8, 0.3, 0.7) // 10%
        };

        let x = rng.random_range(-200.0..200.0);
        let y = rng.random_range(-200.0..200.0);

        draw.ellipse()
            .x_y(x, y)
            .w_h(8.0, 8.0)
            .color(color);
    }

    draw.to_frame(app, &frame).unwrap();
}

🟦 4. 가우시안 분포(Gaussian / Normal Distribution)

use nannou::prelude::*;
use rand_distr::{Normal, Distribution};

fn main() {
    nannou::app(model).update(update).run();
}

struct Model;

fn model(app: &App) -> Model {
    app.new_window().view(view).size(400, 400).build().unwrap();
    Model
}

fn update(_app: &App, _model: &mut Model, _update: Update) {}

fn view(app: &App, _model: &Model, frame: Frame) {
    if frame.nth() > 0 {
        return;
    }
    let draw = app.draw();
    draw.background().color(WHITE);

    let normal = Normal::new(0.0, 60.0).unwrap();
    let mut rng = rand::rng();

    for _ in 0..1000 {
        let x: f32 = normal.sample(&mut rng);
        let y: f32 = normal.sample(&mut rng);
        draw.ellipse().x_y(x, y).w_h(6.0, 6.0).rgba(0.0, 0.0, 0.0, 0.4);
    }

    draw.to_frame(app, &frame).unwrap();
}