Silverback9

오늘은 Wolfram Rule [0~255]에 따라 그려지는 멋진 그림의 씨앗을 만들어 보겠습니다~^^*

네~^^* 제1세대를 만드는 거예요~^^*

태초에 씨앗 세포가 하나 있었는데~~^^*

그 세포가 세대를 거듭해 나가며 아주 멋진 풍경으로~~^^*

제1세대! 씨앗 세포를 표현하는 코드를 만들어 봅시다~~!!!

하나. p5.js 캔버스의 너비를 씨앗 세포의 너비로 나누어요.

그러면 씨앗 세포의 너비와 동일한 세포 공간이 화면 위에 한칸 한칸 한 줄로 주~욱 생겨나겠지요^^*

두울. 세포들의 총갯수를 2로 나누어 몫의 정수부분을 챙겨요.

세엣. 일련의 세포들 중 그 정수 번째의 세포 공간을 찾아 색칠을 해요.

색칠한 세포공간이 바로 씨앗 세포예요~~^^*

네~^^* 씨앗 세포가 세포 공간들 속 가운데에 심어지겠네요~^^*

let cells = []; //세포들의 배열입니다~
let w = 16; //세포 너비입니다~
let y = 0; //화면 제일 위에 그려볼게요~

function setup(){
    createCanvas(400, 400);
    
    let total = width / w; 
    //화면 너비를 세포 너비로 나눈 세포 총갯수를 변수 total에 저장합니다~.  
    
    for(let i = 0; i < total; i++) {   
        cells[i] = 0;
    //모든 세포에게 0을 저장합니다.    
         
    }
    
    cells[floor(total/2)] = 1;
    //세포 총갯수 total을 2로 나누고, 정수 부분만 취한 후, 세포들 중 그 정수번째의 세포에게 1을 저장합니다. 
    //한 가운데 있는 세포만 1의 값을 가지게 되겠네요~~
    
    background(255);
    //흰 색 도화지를 펼칩시다~~^^*
}

function draw(){
    for(i = 0; i < cells.length ; i++){
        
        let x = i * w;
        // 해당 세포의 순번 곱하기 너비가 x 좌표가 됩니다.
        // 모든 세포들에 대해~ 차례로~ x 좌표를 세포 너비만큼 이동한 효과~
        stroke(0);
        fill(255 - cells[i]*255);
        // 0을 저장한 세포는 fill(255 - 0*255 = 255) 즉 흰색으로 칠해지고~
        // 1을 저장한 세포는 fill(255 - 1*255 = 0) 즉 검은색으로 칠해지고~
        // 한가운데 검은 색의 씨앗 세포가 표현되겠네요
        
        square(x, y, w);
        //화면 첫째 줄(y = 0)에 가로세로 16 픽셀의 사각형이~
    }
}  
    

네~~ 이제 씨앗을 심으러 가 볼까요~~^^* 땅을 콕콕 팔 막대 하나, 물 뿌릴 양동이 하나, 씨앗 한 개를 챙겨서, 황무지로 나아가 봅시다~~^^*

우리가 심은 작은 씨앗 하나가 무럭무럭 자라서, 세대를 거듭해 나가며 멋진 숲이 되면 좋겠어요~^^*

피와 살을 가진 우리가, 0과 1의 세계에 사는 컴퓨터와 함께 만들어 갈 아름다운 숲!

그 씨앗을 오늘 저와 함께 심어 주셔서 감사합니다~^^*

오늘도 멋진 아침! 멋진 하루 보내시구요~^^*

내일 우리 또 만나서~~^^* Wolfram Rule [0 ~255]에 따라 이 하나의 씨앗이 싹 틔우는 과정을 함께 공부할까요~~^^*

넵~~!! 꿈은 이루어 집니다~~!!