Who I really am
파티클 시스템이란 수많은 입자들이 모여 형체가 뚜렷하지 않은 물체를 구현하는 방법이다. 시간이 경과하면 파티클 시스템 내부에서 새로운 입자가 생성되기도 하고 움직이며 변화하고 소멸되기도 한다. 파티클 시스템을 사용하는 이유 자연 현상을 프로그램으로 옮기는 행위를 하고 있다면, 많은 물체들이 함께 구성된 체계를 다뤄야 하는 경우가 있다 (ex. 튕기는 공, 군집을 이루는 새, 진화하는 생태계 등) 예제 4-1. 입자 하나 Particle p; void setup(){ size(640, 320); p = new Particle(new PVector(width/2, 10)); } void draw(){ background(177); //입자 하나를 움직이고 출력 p.run(); if(p.isDead()){ p..
녹사평역 3분정도 거리, 노트북이나 개인 작업하기 좋은 카페 커피도가 헤리티지! 큰 길에서 구석으로 살짝 빠져있어서 적당히 숨어있는 느낌이다. 주말엔 방문 안해봤는데, 평일 기준 사람이 적어서 쾌적하게 이용 가능하다. 1~3층 전체 건물을 사용하고 있고, 꼭대기 층 테라스에는 흡연구역이 있다. 아쉬운 점이라면.. 와이파이가 너무 썩었음.. (공유기가 어디 있는지는 모르겠지만.. 3층에선 매우 느리고, 2층에선 거의 못쓸 정도...) - 접근성 : 별 5개 ⭐️⭐️⭐️⭐️⭐️ (버스, 지하철 모두) - 인테리어 : 별 5개 ⭐️⭐️⭐️⭐️⭐️ (블랙을 베이스로 해서 어둑하고 차분함. 식물이나 노란조명으로 포인트를 주어 편안) - 손님 분위기 : 별 5개 ⭐️⭐️⭐️⭐️⭐️ (조용하고 사람이 적음) - 콘센..
- 파동 패턴은 물 같은 매끄러운 표면은 물론이고, 인체 또는 생명체의 기관을 디자인하는 데도 사용된다. - 파동을 만들 때에도 진폭과 주기를 생각해야 한다. float startAngle = 0; float angleVel = 0.1; void setup(){ size(400,200); } void draw(){ background(150); startAngle += angleVel; //진동을 움직이게 하려면 각 프레임마다 세타 값을 변경해줘야 한다. //(startAngle += 0.02) float angle = startAngle; for(int x=0; x
왼쪽 끝과 오른쪽 끝을 왔다갔다하는 운동을 단순 조화 운동이라고 한다. 진폭 : 움직임의 중심과 가장 멀리 이동했을 때의 거리 주기 : 한 번 완전히 진동하는 데 걸리는 시간 진동수 : 단위 시간마다 진동한 횟수 예제 3-5. 단순 조화 운동 1 void setup() { size(400, 200); } void draw() { background(177); float period = 120; float amplitude = 100; //단순 조화 운동의 기본 공식으로 x축 위치를 구한다. float x = amplitude * cos(TWO_PI * frameCount / period); stroke(0); translate(width / 2, height / 2); line(0,0,x,0); elli..
▼ 예제 3-1. rotate 함수를 이용한 회전 운동 //각도 float angle = 0; //각속도(속도와 비슷하다) float aVelocity = 0; //각가속도(가속도와 비슷하다) float aAcceleration = 0.0001; void setup() { size(200, 200); } void draw(){ background(200); fill(175); stroke(0); rectMode(CENTER); translate(width/2, height/2); rotate(angle); line(-50,0,50,0); ellipse(50,0,8,8); ellipse(-50,0,8,8); //각속도는 속도와 비슷한 방법으로 구한다. aVelocity += aAcceleration; //..
http://rwdb.kr/mouseoverinteraction/ 컨텐츠에 집중을 도와주는 마우스 오버효과들 총정리! - RWDB RWDB Responsive Web Design dB Web awards, 우수 하이브리드웹·반응형웹 모음 사이트 rwdb.kr 위 사이트에 순수 css만으로 구현한 화려한 애니메이션들이 잘 정리되어있는데, 이 중 특히 "우와~" 했던 것 몇 개를 골라 부가적인 꾸밈요소, 헷갈리는 코드들은 지우고 간결하게 만들어서 나중에 어디든 활용할 수 있도록 내 버전으로 정리해보았다! 😀 같은 자리에서 뒤집어지며 바뀌는 텍스트 - absolute로 고정된 자리를 주고, 마우스오버 시 opacity(불투명도)와 translateY(세로이동값)를 변경해주는 게 키포인트다. - 만약 absol..
가상요소(Pseudo-Element)란? 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택을 할 수 있도록 한다. ::before, ::after 뿐만 아니라 ::placeholder, ::first-line, ::first-letter 등이 포함된다. ::before – 실제 내용 바로 앞에서 생성되는 자식요소 ::after – 실제 내용 바로 뒤에서 생성되는 자식요소 before와 after 사용 시, content 속성이 반드시 필요하다. (content:"어쩌구저쩌구") content는 html에 포함되지 않은 정보를 css에서 새롭게 생성해준다. 이렇게 말하니 잘 와닿지 않는데, 예시를 만들어 살펴보자. HTML 삽입 미리보기할 수 없는 소스 content: ""로 빈 내용..
http://rwdb.kr/mouseoverinteraction/ 위 사이트를 둘러보며 html, css 관련 새로 알게 된 것들을 포스팅해보려고 한다. 화려하고 재미있는 애니메이션들이 잘 정리되어있는 페이지인 것 같다. figure & figcaption 태그 figure - 책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개된다. - 사진, 도표, 이미지, 오디오, 비디오 등을 담는 콘테이너 역할을 한다. - figure 요소는 문서 내에서 자기완결적이고, 하나의 단위로서 참조되는 콘텐츠를 표현한다. 예를 들어, 아래와 같이 문장 안에 들어있는 이미지에 태그를 사용하는 것은 부적절하다. figcaption - 위 콘텐츠에 대한 설명 문구를 담는 태그이다. figure 요소 안..
