Who I really am
▼ 예제 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 요소 안..
Mover[] movers = new Mover[20]; void setup() { size(200, 200); smooth(); background(77); for(int i=0; i height){ location.y = 0; } else if(location.y < 0){ location.y = height; } } } 결과물 중력은 가까울 수록 강하게 작용해야 한다. 즉, 객체가 마우스에 가까워지면 가속도가 더 커진다.
속도와 벡터를 활용한 이동 Mover mover; void setup() { size(200, 200); smooth(); // Mover 클래스로 객체를 생성 mover = new Mover(); } void draw(){ background(187); //Mover 객체의 함수 호출 mover.update(); mover.checkEdges(); mover.display(); } class Mover { PVector location; PVector velocity; Mover() { location = new PVector(random(width), random(height)); velocity = new PVector(random(-2,2), random(-2,2)); } void update()..
Nature of Code 책에서 나오는 벡터는 유클리드 벡터를 의미한다. 유클리드 벡터란, 크기와 방향을 가지는 객체이다. 벡터를 사용하면 아래와 같이 코드를 조금 더 간략하게 변경할 수 있다. //before float x; float y; float xspeed; float yspeed; //after Vector location; Vector speed; 벡터는 다양한 곳에 사용되는데, 가장 간단한 예시는 한 지점에서 다른 지점으로 이동하는 것을 표현할 때이다. 벡터연산 add() : 벡터 덧셈 sub() : 벡터 뺄셈 mult() : 벡터 곱셈 div() : 벡터 나눗셈 mag() : 벡터의 크기 구하기 setMag() : 벡터의 크기 지정 normalize() : 방향이 같고 단위 길이가 1인..
Nature of Code 책으로 프로세싱 공부를 시작했다. processing 사용을 위해서 먼저 프로그램을 설치해야 한다. 공식홈페이지(https://processing.org/)의 다운로드 탭에서 자기 컴퓨터에 맞는 프로그램을 골라서 설치해주면, 아래와 같은 화면에서 코딩할 수 있다. 상단바 파일-예제를 클릭하면 (단축키 컨트롤+쉬프트+O) 미리 만들어둔 예제를 실행해볼 수도 있다. 아래는 화면을 벗어나지 않고 튕기는 공을 구현한 소스코드이다. float x = 100; float y = 100; float xspeed = 1; float yspeed = 3.3; //setup 함수는 프로그램 시작 전 한 번만 실행됨 void setup() { size(200,200); smooth(); backg..