Coding/P5.JS

< P5.JS > 기말 작품 아이디어 스케치와 최종 작품

기말 작품 아이디어 스케치 #00 : Nature 에 대한 것 사전적 정의 자연, 본질, 근원, 본성 Nature 에 대한 고민, 생각 Nature -> 본성 -> 인간 -> 성향 -> 직관적인 성향 같은 뜻임에도 다른 표현방식의 제시로 한가지 표현 방식에만 주목하게 하는 ‘틀짜기 효과’처럼, 인간이 가지는 직관적 사고(보여지는 것에만 의존하는 성향)를 글자와 다양한 사물로 표현해보면 어떤 시각적 모습으로 표현 할 수 있을까? #01 : 아이디어 스케치 1 1-1. 스케치 마치 창문으로 세상 밖의 사물을 볼 수 있듯이, 글자 ‘N’ 으로 보여지는 것과 보여지지 않는 것을 분리하기 위해 표현한다. 글자가 아닌 공간을 클릭하면 마우스 커서 위치에서 파티클이 떨어진다. 글자를 클릭하여 움직일 수 있다. #02..

< P5.JS > Particle system

Particle System_Nature Of Code #01 : Particle System_Nature Of Code #4.1 ## 4.1 강의 개요 4.1의 강좌의 Description 을 보면, Mover 클래스를 Particle 클래스로 클래스의 이름을 변환하고, 추가로 객체 파티클의 수명을 더한다. 마지막으로 이 수명이 더해진 파티클을 배열을 활용하여 여러 개의 객체를 만드는 것으로 보여진다. ## 새롭게 알게 된 부분 객체의 무한한 생성 draw() 함수안에서 객체를 생성해주면, draw() 함수는 프로그램이 실행되는 동안 반복해서 실행이 되니, 객체를 무한히 생성할 수 있다. 배열들은 투명해지면서 없어진 것처럼 보이지만, 실제로 없어진 것이 아니라 투명해진 것이기 때문에 계속 생성하면 과부..

< P5.JS > 중간창작

프로그램적 오류가 만들어 내는 일상의 반복 #01 : 지난 과제 회고하기_이해가 높아진 부분 [회고_과정] The Nature of Code_Vector #08 : Interactivity with Acceleration 저널링을 하는 과정 중, 발생한 궁금증에 대해 이해가 높아진 부분 저널링 중 파티클이 마우스를 따라오게 하는 예제에서, update() 부분의 정규화 원리를 이해하는데에 어려움이 있었음. update() { this.mouse = createVector(mouseX, mouseY); this.dir = this.mouse.sub(this.pos); this.dir.normalize(); // 왜 벡터 정규화를 시키는 것일까? this.dir.mult(0.5); // 왜 정규화를 시킨 값..

< P5.js > Kadenze_Session2_Vector / Forces

Kadenze_Session2_Vector / Forces #01 : Newton's Laws of Motion_뉴턴의 운동법칙 Force(힘) 은 질량을 지닌 물체를 가속하는 벡터 물리량이다. 제 1의 법칙 ( 관성의 법칙 ) 날아가는 화살이 공기저항을 받지않는다면, 같은 방향으로 속도가 변하지 않고 계속 날아갈 수 있듯이, 정지하고 있는 물체는 항상 정지, 운동하는 물체는 항상 같은 속력과 방향으로 운동하려는 것. 힘이 없거나, 물체에 가해지는 힘이 서로 상쇄된다면 즉, 알짜 힘이 0이되면 물체의 속도는 일정하게 유지된다는 것을 ‘평형(epuilibrium)’ 이라고 함 *알짜힘은 물체에 가해지는 모든 힘들의 벡터(속력,방향)를 합하여 계산한 것. F = MA / 힘은 질량 곱하기 가속. A = F/..

< P5.JS > The Nature of Code_Vector

The Nature of Code_Vector #01 : Vector의 정의와 작동원리 이해하기 Vector 란 무엇인가 정확히는 유클리드 벡터라고 하며, 크기와 방향을 가진 물리량을 가르키는 말이다. 벡터는 크기(화살의 길이)와 방향(화살의 방향)을 모두 가졌기 때문에 화살표로 표현 할 수 있다. 배경은 유클리드 공간, 좌표계 공간이다. 유클리드 공간은 평면과 공간에 대해 일반화 한 것으로, 우리가 살아가는 3차원 공간, 평면, 수직선 등 다차원 공간까지 표현 할 수 있다. 마야나 언리얼엔진 같은 프로그램에서 좌표계로 표현한 공간을 생각하면 쉽게 이해할 수 있다. 벡터는 컴퓨터 그래픽, 물리 시뮬레이션에서 핵심적인 역할을 하고 있다고 한다. 프로그래밍에서 볼 수 있는 배열 요소 std :: vector..

< P5.JS > 1. P5.JS의 OOP ( Object - Oriented Programming )

1. OOP ( Object – Oriented Programming ) 란 ? OOP는 객체지향 언어를 뜻한다. 자바스크립트는 프로토타입 기반 ( Prototype – based ) 의 객체지향 언어다. P5.JS도 자바스크립트 기반의 라이브러리이기 때문에, 객체의 관점으로 프로그래밍한다. 프로토타입 기반은 클래스가 필요 없는 ( Class-free ) 방식이다. 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형으로 하여 이것을 복제하는 과정을 통해 사용 할 수 있다. 객체지향 프로그래밍이란, 코딩하는 방식, 방법론 중 하나이다. 예를 들어 컴퓨터가 있으면 이 컴퓨터란 무엇인지, 이 컴퓨터가 수행할 수 있는 일은 무엇인지 정의하고 이것으로 프로그래밍 하는 방법이라고 생각된다. 즉, 상위..

< P5.JS > 10 print_코드 분석으로 작동 원리 이해와 재해석

- 초기 코드 분석 - 좀 더 쉽고, 단순하게 코드 분석해보기 10 print의 개요 - 화면의 좌측 상단부터 우측 하단의 끝까지, 순차적으로 50%의 확률로 서로 다른 방향의 대각선을 그리는 것을 반복하는 프로그램이다. // 프로그램에서 사용되어질 좌표값 x, y 변수와 이동거리 변수, 확률 변수 선언과 초기화. function setup() { // 프로그램의 화면 사이즈와 색상, 선의 색상을 초기화한다. } function draw() { // 1/2 확률로 서로 다른 방향의 대각선을 그리는 조건문을 수행한다. // 대각선을 그리고 좌측에서 상단까지 순차적으로 이동하기 위해 x좌표값을 나타내는 변수 x에 이동거리 변수 w를 더한다. // 한 줄의 대각선 그리기를 마치면, 하단의 좌측으로 이동하기 위..