코딩으로 시드값이 따라 움직이는 이미지/애니매이션 만드는 방법이 궁금합니다.

Question

안녕하세요.

코딩 무엇인지 정도만 아는 코딩 문외한 디자이너입니다.

요즘 코딩으로 제작한 이미지 혹은 애니매이션이 눈에 자주 띄는데, 무엇부터 시작해야 구현할 수 있을지 막막합니다.

제가 만들고 싶은 이미지의 예시는 아래입니다.

https://www.instagram.com/p/CmPxERDrRCR/?igsh=anQwaTZtaTl0djE4

생성형 ai를 사용하거나 하나하나 도형을 만든 다음 픽셀 스타일로 변형한 것이 아니라,

코드를 짠 다음 시드값에 따라 이미지가 가변적으로 바뀌도록 (=코드만 만들어놓으면 수치만 다르게 하여 수많은 이미지를 생성할 수 있도록) 하는 방식으로 알고 있습니다.

더듬더듬 알아가려 해도 정보가 거의 없네요 ㅜㅜ무엇부터 손을 대야할지 알고 싶습니다.

읽어주셔서 감사합니다!

Answer 1

아 이제 제너러티브 아트 시작하실라면 p5.js먼저 배우시는거 추천드려요ㅎ

근데 p5.js가 자바스크립트 기반이라서 웹에서 바로 결과를 볼 수 있어서 처음 시작하시기에 더 좋을것 같네요

이제 p5.js 에디터 editor.p5js.org에 가시면 코드를 바로 작성하고 실행해볼 수 있답니다

기본적인 도형 그리기부터 시작해서 random() 함수로 무작위성을 주는 방법을 배우시면 됩니다

근데 처음에는 간단한 도형들로 패턴을 만드는 연습을 해보시는게 좋을텐데 원이나 사각형을 여러개 그리면서

위치나 크기를 랜덤하게 바꿔보시면 됩니다

이제 기초적인 수학 개념도 필요한데 삼각함수나 노이즈 함수를 이용하면 더 자연스러운 움직임을 만들 수 있죠

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

// 시드값 설정

randomSeed(42);

// 여러 개의 원을 랜덤한 위치에 그리기

for (let i = 0; i < 50; i++) {

let x = random(width);

let y = random(height);

let size = random(10, 30);

fill(random(255), random(255), random(255));

circle(x, y, size);

}

}

뭐 이런식으로 코드를 짤수 있겠습니다ㅎㅎ