My Boundary As Much As I Experienced

크리에이티브 코딩 랩 137.5의 전시를 위해 p5.js로 진자운동으로 씬이 바뀌는 애니메이션을 구현했다.https://truth-in-pendulum.vercel.app/ 이 작품으로 모두의 연구소 강남점에서 2024. 07. 19. - 2024. 07. 27. 까지 전시한다.다른 분들의 재밌는 작품들도 많으니 구경해볼 사람들은 잠깐 들러봐도 좋겠다.(그나저나 포스터 깔쌈하게 잘 만들지 않았나? 내가 만들었다 히히)  0.  작품 컨셉내 작품은 펜들럼이 정지하면 그 안의 인물의 내밀하고 시꺼먼 속이 보이는(?) 컨셉의 애니메이션이다.원래 '펜들럼 안의 희노애락'을 컨셉으로 하려 했는데 '희노애락'은 이제 너무 전형적인 컨셉인거 같아서 변경했다.가면 갈수록 추악한 분위기로 바뀌는 더 딥해지는 컨셉으로....

게임을 구현한다는건 언제나 복잡한 과제인거 같다.모든 task를 절차적으로 하기보단 모듈화하여 적재적소에 활용하는 능력이 매우 중요하다는 것을 느꼈고,이를 p5.js에서 어떻게 사용하는지를 알 수 있는 좋은 튜토리얼이었다. let cols; let rows;let size = 25;let board = [];let food; let head; let dir; // head의 진행방향let length = 1;let gameOver = false;function setup() { createCanvas(400, 400); frameRate(5); // 너무 빠르지 않게 프레임을 낮춰줌 cols = width/size; rows = height/size; for (let i=0; i cols-1 |..

크리에이티브 코딩 모임인 137.5에서 pendulum을 주제로 작업물을 만들어야하는데 "어쩌지.." 하다가기술적으로 어려운 것을 구현하기보다 특이한 컨셉으로 승부하자! 라는 느낌으로 작업물을 만들었다.Truth in Pendulum이라고 해야되나? 마법 진자 거울로 어떤 사람을 비추면 그 사람의 실제 마음 속을 비출 수 있다...라는 요상한 컨셉의 작업을 만드려고 한다. 이제1. 렌즈를 떨어뜨리고 가속도를 붙이는 과정도 보여주기2. 실제 마법렌즈같이 꾸미기3. 렌즈가 감속하여 정중앙에 멈췄을 때 렌즈에 클로즈업되면서 렌즈 속 세계로 들어가기?4. 들어간 세계에서 또 다시 마법렌즈를 사용하여 다른 감정을 보기 등을 구현하려 한다.... 설명이 잘 전달될지 모르겠다. 상상을 위해 아래 그렸던 컨셉 아트들도..

블러가 있는 이미지에서 선명해지는 것을 구현한 함수를 만들었다. preload의 사용법, 만든 이미지의 width/height값을 사용하는 법, filter함수를 사용하는 법 등을 배웠다. 이제 선명한 이미지가 어느정도 blur된 채로 유지할 수 있는 함수도 만들어놔야겠다.이런 필터 함수들은 최종적으로 만들고 싶은 결과물에 쓰기 위해서 만들고 있다.// IMAGESlet img;let blurAmount = 20; // 초기 블러 강도 (0에서 20까지)function preload() { img = loadImage("asset/mayoiga.jpg"); // 이미지 파일 경로}function setup() { createCanvas(img.width, img.height); imageMode(C..

재밌어 보이는 튜토리얼들을 따라해보고 올릴 예정이다. 추후 여러 튜토리얼끼리 조합하는 것도 해볼 수 있겠다.// 이번 코드에 쓰일 모듈class Cell { constructor(x0, y0, r, angle){ this.r = r; this.angle = angle; // 시작 x, y 좌표 this.x0 = x0; this.y0 = y0; } update(){ this.x = this.r*cos(this.angle); this.y = this.r*sin(this.angle); this.angle += 0.05; // 어김없이 angle을 바꿀 때마다 cos, sin값이 바뀌며 회전한다. } display(){ // 아래 주석 해제하면 ..

각도와 사인 함수의 반환값라디안 단위의 각도: 사인 함수는 입력된 각도를 라디안 단위로 받아들인다. 1 라디안은 약 57.3도이다.사인 값: 주어진 각도에 따라 사인 값은 다음과 같이 변한다:sin⁡(0)=0sin(0)=0sin⁡(𝜋2)=1sin(2π​)=1sin⁡(𝜋)=0sin(π)=0sin⁡(3𝜋2)=−1sin(23π​)=−1sin⁡(2𝜋)=0sin(2π)=0 let angle;// angleVelocitylet angleV = 0;// angleAccelerationlet angleA = 0.001;let bob;let len;let gravity = 1;function setup() { createCanvas(600, 800); origin = createVector(300, 0); ..

벡터란 무엇일까...? 이번에 공부해봤지만 잘 모르겠다.(이과들만 배우는 과목이었나, 기하와 벡터가? 교육과정도 다 까묵음) 하여튼 이번 Nature of Code에서 벡터를 이해하기 위해 여러가지 영상을 봤는데그나마 가장 이해 잘 되는 영상은 아래였다. (그나마)https://www.youtube.com/watch?v=ArgTeYVuJUo&t=297s  벡터가 뭔가요-? !벡터는 크기와 방향을 갖는거라고 한다. 사실 이렇게만 말하면 너무 추상적이다.물리학이나 순수 수학이나 컴퓨터 과학 모두에서 벡터를 되게 각자의 방식으로 정의하는거 같다.이렇게 방대한 개념을 다 이해하기는 힘들거 같고, 컴퓨터 과학에서 벡터를 어떻게 쓰는지만 알아보았다.대강 Origin 좌표(대게 0,0)에서 임의의 점(예를 들어 3,..

펄린 노이즈(Perlin Noise)란?펄린 노이즈(Perlin Noise)는 컴퓨터 그래픽스와 애니메이션에서 자연스러운 텍스처와 패턴을 생성하기 위해 사용되는 알고리즘이다. 켄 펄린(Ken Perlin)이 개발한 이 기법은 랜덤한 값을 기반으로 하지만, 부드럽고 연속적인 변화를 가지도록 설계되어 구름, 산맥, 물결 등의 자연 현상을 시뮬레이션하는 데 유용하다. 펄린 노이즈는 각기 다른 해상도의 노이즈를 합성하여 복잡하고 디테일한 결과를 얻는 프랙탈 노이즈 생성에도 자주 사용된다. p5.js에서의 펄린 노이즈p5.js에선 noise함수를 이용하여 펄린 노이즈를 만들 수 있다. 안에 좌표가 될 숫자값을 하나 넣어줘야한다. 그리고 p5.js의 기본적인 사용성 중 하나인데, draw함수는 1초에 60프레임으로..

내가 요새 듣는 강의인 Nature of Code는 자바스크립트로 인터랙티브 코딩을 배우는 강의이다. 이 NoC는 20년 전에 먼저 책으로 나왔는데, Java의 Processing을 기반으로 되어있는 책이었다고 한다.그러나 감사하게도 2020년대에 The Coding Train이란 유튜버가 자바스크립트의 p5.js로 강의를 리뉴얼하였고,덕분에 내가 편하게 들을 수 있는 것이다. 인터랙티브한 프로덕트들, 특히 게임을 만들기 위한 첫걸음이라고 생각한다. 홧팅~ https://thecodingtrain.com/tracks/the-nature-of-code-2 The Coding TrainAll aboard the Coding Train with Daniel Shiffman, a YouTube channel d..