Silverback9

#야생으로

Creative Coding 독학 제291일 2025년01월12일(일)

오늘도 우리는~~^^*

Travelling Salesman 여행하는 외판원의 발품을 줄여줄 고민을 계속 해 볼게요~~^^*

근데요…

여행자의 심정을 살펴 코딩공부를 하게 되니까요…

자신의 사명을 위해 긴 여정에 오르는 많은 분들…그 분들의 고단한 발걸음에 경의를 표하고 싶어지네요…

공연 1 작품 감상하시며 아침을 여시고 계셔요~^^* 코딩공부 정리해서 돌아올게요~ 쓩~^^*

네~^^*

오늘은 우리 본격 코딩을 시작하는 첫 날이니까요~^^*

도시들을 캔버스에 건설하고~

도시 사이를 다니는 땅 길 또는 물 길 또는 하늘 길을 닦고~

어느 도시를 어느 도시보다 먼저 그리고 다음에 방문할 것인가? 이 결정을 무작위로 바꾸어가며 다 다녀볼게요.

네~^^* 그래요~^^* 컴퓨터는 눈이 없어서…모든 도시를 무작위로 다 서로 연결해서 직접 다녀 봐야 해요~^^* 우리 컴퓨터 화이팅~~^^*!!

하나. 도시들을 건설합시다!

var cities = [];
var totalCities = 3;

function setup() {
  createCanvas(400, 400);
  for( i = 0; i < totalCities; i++ ) {
    var v = createVector(random(width), random(height));
    cities[i] = v; 
  }
}
//다양한 좌표위치를 가진 벡터를 생성하여, 도시들을 담는 배열 cities[]에 저장하겠습니다.

function draw() {
  background(0);
  fill(255);
  for( i = 0; i < cities.length; i++ ) {
    ellipse(cities[i].x, cities[i].y, 8, 8);
  }
}
//도시들을 담는 배열 cities[]의 구성요소들의 위치좌표에 지름 8의 원을 그리겠습니다. 

플레이 버튼을 누를 때마다 새로운 곳에 새로운 도시가 건설되나요? 프로그램의 totalCities 값을 바꾸어 플레이 해 보시면 다양한 수의 도시를 건설해 보실 수 있겠지요~^^*?

둘. 땅 길 물 길 하늘 길을 닦읍시다!

function draw() {
   .
   .
   .
  stroke(255);
  strokeWeight(2);
  noFill();
  beginShape();
  for( i = 0; i < cities.length; i++ ) {
    vertex(cities[i].x, cities[i].y);
  }
  endShape();
}
//도시들의 위치좌표를 꼭지점으로 하여, 꼭지점들을 연결해 보겠습니다. 
//beginShape() - vertex() - endShape() 구조를 복습하고 가실게요~^^*   

플레이 버튼을 누를 때마다 새로운 곳 새로운 도시 그리고 그들을 연결하는 길이 만들어 지나요? 프로그램의 totalCities 변수 값을 바꾸어 플레이 해보셔도 재미있겠지요~^^*

셋. 도시들을 다니는 순서를 무작위로 바꾸어 다녀 봅시다!

(1) 먼저, 도시들의 정보를 맞바꾸는 함수 swap()을 만들게요.

(i) 도시 i에 담겨있는 정보를 임시 저장소 temp에 담고요.

(ii) 도시 j에 담겨있는 정보를 도시 i에 담을게요.

(iii) 그런 뒤, 도시 j에 temp에 저장된 정보를 담는 거예요.

그러면 이제~~^^*, 도시 i는 예전의 도시 j에 담겨있던 정보를 갖게 되고~~^^* 도시 j는 예전의 도시 i에 담겨있던 정보를 갖게 되겠네요~^^*

function swap( a, i, j) {
  var temp;
  temp = a[i];
  a[i] = a[j];
  a[j] = temp;
}

(2) 두 도시를 무작위로 선택하여 이 두 도시의 정보를 맞바꾸어 볼게요. 무한반복 함수인 draw()에서 swap()을 호출하면, 도시 정보 맞바꾸기가 무작위로 무한반복 되겠네요~^^*

function draw() {
   .
   .
   .
  var i = floor(random(cities.length));
  var j = floor(random(cities.length));
  swap(cities, i, j); 
}
//도시들을 담은 배열 cities[]의 구성원을 무작위로 두 개 선정하여, 서로의 정보를 맞바꾸겠습니다. 
//간혹 이 두 도시가 우연히 동일할 수도 있겠지만, 무작위 선택을 계속 무한반복 하기 때문에 큰 문제는 없을 것 같아요...

그러면 우리, 세 개의 도시가 무작위로 연결되는 것이 무한 반복하는 풍경을 감상하러 가 볼까요~^^*

우리 10개의 도시 도전해 볼까요?

네~^^* totalCities의 값을 조정하여 다양한 수의 도시들이 무작위로 연결되는 풍경을 그려보셔도 좋을 것 같습니다~^^*

오늘 저와 함께 두 도시를 맞바꾸는 함수 swap()을 만들어 주셔서 감사합니다~~^^*

무에서 유를 만들어 내는 것도 많은 창의성을 필요로 하지만~^^*

우리에게 이미 익숙한 것을 자신에게 맞는 새로운 방식으로 다시 표현한다는 것은~^^* 참 많은 창의성을 요구하는 것 같아요. 그리고, 그 힘든 작업을 해낸 것을 바라본다는 것은~^^* 정말 많은 놀라움을 경험하게 되구요!!!

Remake 작업도 함수 swap()를 통해 어떤 요소들을 어떤 요소들로 바꿀 것인가에 대한 고민을 실현하는 과정인 것 같기도 해요.

너무나 멋지게 remake된 작품을 보면, 원작의 위대함과 remake작품의 위대함을 동시에 체험하게 되는 것 같아서, 감동이 두 배 세 배가 되는 것 같아요.

어제 제가 엄청난 remake 공연 작품을 봤는데요. 동영상 자료가 업로드되면 나눔 드릴게요. Stay Tuned~~~^^* 관심을 가지고 지켜봐 주세요~~~^^*

자, 그럼, 우리~^^*

함수 swap()!!!!!의 힘으로!

보석반지를 레이저반지로 바꾼 여전사의 심정으로!

목소리를 다리로 바꾼 인어공주의 심정으로!

땅 위 도시도! 물 속 도시도! 전사가 되어! 인어가 되어! 씩씩하게 다녀보는 거예요!

고단한 Travelling Salesman! 소중한 보부상! 걱정하지 마세요!

열심히 코딩공부해서 최.적.경.로.를 만들어 드릴게요!

네~, 저와 함께 코딩공부 마음을 결연히 다져 주셔서 감사합니다~~^^*

일단, 내일은 우리 쉬면서 음악 함께 들으며 에너지 충전하고요~~^^*

화요일부터 다시 열심히!!!! O.K.~~^^*?

네~~^^* 좋아요~~^^* 고마워요~~^^*

오늘도 반가운 만남 기쁨 나누는 하루 보내시고요~^^*

뿌듯하고 벅찬 감동을 가슴에 품고 따뜻하게 코~~하셔요~~^^*

네~~^^* 꿈은 이루어 집니다~~^^*

댓글 남기기