본문 바로가기
728x90
반응형

Processing9

7. 마우스에 반응하는 패턴 만들기 EXERCISE 02A FROM MOUSE  지난 시간에 그려놓은 패턴에 사용된 명령어 중에서몇몇 상수들을 조정해보고, 변수로 만들어서 변화를 가져볼게요. 코드를 먼저 불러올게요. size(600, 600);background(125);noStroke(); //반복for (int i = 0; i      먼저 간격을 조정해 볼 거예요. 사각형의 두께가 좀 두껍죠.그럼 그 간격은 width  옆에 "100"이라는 아이예요.그리고 그 아래 height 옆에 "100"이라는 아이고요.이걸 좀 줄여주면 아마도 사각형 두께가 얇아질 거 같죠?     for (int i = 0; i       자, 사각형의 두께가 얇아졌죠?그럼 이제 저 간격도 좀 얇게 해 볼까요?      for (int i =.. 2024. 10. 17.
6. 면 그리기 EXERCISE 02 FORWARD INTERACTION 기본적으로 사각형을 그리고,사각형으로 패턴을 만들어볼 거예요.가로와 세로 길이에 대한 프로세싱 샘플을 참조했어요.width and height   1. 사각형을 그린다2. 외곽선을 없앤다3. 내부 색을 칠한다4. 가로 세로 직사각형을 반복한다5. 반복을 적용해서 쉽게 그린다6. 변수를 바꿔보며 변화를 느낀다      1. 사각형 그리기먼저, 사각형 (직사각형)을 그려볼게요.가로는 [화면의 길이]를 적용할 것이고, 세로는 100px로 할게요.순서는 다음과 같아요. 1. 화면 사이즈를 정한다2. 배경색을 정한다3. 사각형을 그린다 순서대로 코드를 써보면size(600,600);              //화면 사이즈background(125);    .. 2024. 8. 6.
5. 반복 EXERCISE 01A DISCOVERY OF PATTERN  이전 편에서 만든 그림이에요. 장황한 코드로부터 규칙을 발견하고 이를 반복문으로 구현해볼 거예요.  1. 규칙 찾기먼저 점들의 위치값에서 규칙을 찾아봅시다   point(width/2   +20  ,height/2   +20);   point(width/2   -20  ,height/2   +20);   point(width/2   -20  ,height/2   -20);  point(width/2   +20  ,height/2   -20);  point(width/2   +40  ,height/2   +40);   point(width/2   -40  ,height/2   +40);   point(width/2   -40  ,height/2.. 2024. 8. 6.
4. 점과 선 그리기 EXERCISE 01 POINT TO LINE 모든 그림 혹은 도형 혹은 입체, 모두 점, 선, 면으로 이루어져 있다고 했죠.가장 기초가 되는 것부터 익혀놔야 다양한 응용이 가능해집니다.그래서 오늘은 점을 그리고, 선을 그리는 작업을 해보려고 해요.    프로세싱에서 점은 point라고 하고, 선은 line이라고 해요.  점을 그리는 문법은 다음과 같습니다. point(x, y, z)    기본적인  x값, y값, z값 혹은 x, y 두 개의 값만 입력해도 됩니다.실수형 float 타입이 적용되어 있습니다.      잠깐 큰 형식을 한 번 볼게요. void setup(){   } void draw(){ } 크게 보면 이렇게 두 가지로 나누어지는데, 보통 가장 기본적인 포맷이라고 보면 돼요.먼저, setu.. 2024. 8. 6.
3. 프로세싱 드로잉을 위한 기초 프로세싱 드로잉을 위한 레퍼런스 찾는 방법  점, 선, 면은 도형의 가장 기초가 되는 요소이다. 면은 선으로 이뤄져 있고, 선은 점의 연장으로 만들어진다. 이러한 기본적인 특성을 이해하면, 다양한 활용이 가능해진다. 모든 미술작품, 예술작품, 픽셀아트, 애니메이션, 설치미술에 이르기까지 점, 선, 면을 다루지 않는 것이 없다. 모든 비주얼의 시작과 끝인 셈이다. 우리는 쉽게 포토샵, 일러스트, 3d 프로그램들을 사용하면서 캐릭터를 만들고, 웹페이지를 디자인하고, 애니메이션 키를 잡고, 창작물을 만들어낸다. 하지만 단 한 번도 점, 선, 면의 의미를 헤아리면서 뭔가를 만들어내진 않았다. 어찌하다 보니 그림을 그리는 것보다 프로그램으로 브러시를 다루는 게 편하고, 수정하기 쉽고, 저장하기도 쉬워진 것이라 자.. 2024. 8. 6.
Tips. 프로세싱 작업을 블로그에 게시하는 방법 2편 프로세싱 결과물을 블로그에 게시하기 1편은 프로세싱 언어로 작성한 코드를 그대로 복붙하여 이용하는 방법이었습니다.2편은 자바스크립트 언어로 변환 작성한 코드를 이용하는 방법입니다.        #1 프로세싱으로 작업한 인터랙티브 이미지를 블로그에 올릴 수 없을까 라는 고민에서 시작일반적인 이미지 즉, jpg, png, gif 와 같이 정지된 작업물 혹은 움짤 정도는 블로그에 올리기에도 괜찮아요 하지만 마우스에 반응하는 이미지는 일반 블로그에 올리기가 쉬워보이지 않네요 웹을 다룰 줄 안다면야 자신의 웹호스팅을 통해서 html 파일을 작성하여 올릴 수 있을거예요  #2 어떻게 하면 블로그에 프로세싱이 동작하도록 올릴 수 있을까프로세싱은 자바기반 혹은 자바스크립트를 활용하는 언어예요 블로그에 프로세싱을 게시하.. 2023. 5. 30.
Tips. 프로세싱 작업을 블로그에 게시하는 방법 1편 프로세싱 결과물을 블로그에 게시하는 방법  1. prosessing.js 스크립트 넣기2. 스크립트 안에 코딩하기3. html에서 canvas 사용 확인하기      #1 프로세싱을 웹에 게시하는 방법은 여러가지가 있어요openprocssing.org 사이트를 통해 웹에서 직접 코딩하고 저장하여 자동으로 게시되는 방법이죠 이는 다양한 모드를 제공합니다. P5js, Html/CSS/JS, Pjs 모두 지원해요 모드를 선택한 후 해당 언어를 사용해서 게시 가능해요 해당 사이트내에서 자신의 채널을 가질 수 있지만, 일반 블로그 처럼 활용하기는 어렵죠 p5js.org 사이트에서도 웹에서 직접 코딩하여 저장하고 게시하는 방법도 있어요 이는 위의 경우처럼 다양한 모드를 지원하지는 않고, 해당 언어를 사용해야 하죠 .. 2023. 5. 30.
2. 프로세싱 준비 프로세싱 준비하기 1. Processing 검색 2. 프로그램 다운로드 페이지 3. window 64bit 용 다운로드 4. 압축풀기 5. 드라이브/ 루트에 넣기 6. Processing.exe 실행 7. 실행화면 확인 1. 구글에 processing 검색, 최상단 주소 클릭 Processing.org 2. 다운로드 프로그램 3. processing 4.0beta 7 for windows 64bit (22/3/4) 다운로드 4. 다운로드 받은 zip파일을 압축풀기 해줍니다. 5. 해당 폴더 내에 아래 보이는 것 처럼 폴더째로 옮겨줘요. 되도록 본인 컴퓨터 C: D: E: 등 드라이버에 제일 루트에 붙여넣기 해요. 이렇게 루트에 두어야 에러가 잘 안생기고 부하가 안걸리고 잘 동작되는데 도움을 줄거예요. 저.. 2023. 5. 30.
1. 프로세싱을 배우는 이유 프로세싱을 배우는 이유 1. 인터랙티브 비주얼라이징에서 피지컬 컴퓨팅까지 2. 나만의 스타일과 컨셉이 만들어지면서 유니크한 영역으로 확장 3. 세상이 나의 유일한 작품을 알아봐줄 날이 오다 #1 From Interactive Visualizing to Physical Computing 프로세싱은 오픈소스 프로그래밍으로 누구나 쉽게 미디어아트 작품을 만들 수 있게 해 줘요. 직관적인 프로그래밍 언어로 빠르게 시각화 결과물을 확인하면서 작업할 수 있어요. 스크린 기반의 작업으로 시작해서 물리기반의 작업까지 확장 가능해요. #2 Your own unique story will be created as your studies 연습용 작업을 하다보면 자신만의 스타일이 생기고, 만들고 싶은 유형으로 줄기가 형성될 .. 2023. 5. 30.