콘텐츠
- 01. 프로세스 시작
- 02. 파티클 업데이트
- 03. 흐름에 따라
- 04. 너무 가깝지는 않지만 따르십시오
- 05. 입자 표시
- 06. 감싸기
- 07. 래퍼의 기쁨
- 08. 많은 입자 만들기
- 09. 모든 설정
- 10. 기타 화면
- 11. 그리드 만들기
- 12. 입자 만들기
- 13. 화면 그리기
- 14. 흐름 효과 만들기
- 15. 어레이 업데이트
- 16. 입자 업데이트
- 17. 텍스트 추가
- 18. 마우스 위치 감지
- 19. 제자리에 쉽게
- 20. CSS 작성
- 21. 마무리
타이포그래피는 메시지를 강화하고 전달되는 내용에 적합한 컨텍스트를 제공하는 올바른 서체를 선택하기 때문에 디자이너의 도구 무기고에서 항상 중요한 역할을 해왔습니다. 지난 8 년 동안 웹 디자이너는 키네틱 타이포그래피와 같은 사용자 정의 서체를 디자인에 가져올 수 있었고 인쇄 디자이너가 즐기는 것과 유사한 타이포그래피 제어 기능을 가지고있었습니다.
수상 경력이 있거나 '오늘의 사이트'타이틀로 선정 된 많은 사이트를 살펴보면 타이포그래피 사용이 디자인의 중심이되어 경쟁에서 우위를 점할 수 있음을 곧 알게 될 것입니다. 여기에는 애니메이션 문자 양식, 사용자 상호 작용에 대한 반응 적 움직임, 중심 단계에있는 유형 양식의 대담한 사용 (클라우드 저장소에 타이포그래피 파일을 안전하게 보관)에 이르기까지 다양합니다.
소란스럽지 않은 관심을 끄는 사이트를 만들고 싶다면 웹 사이트 빌더도 사용해보십시오. 또한 최고의 웹 호스팅으로 사이트 성능이 최적화되었는지 확인하십시오.
- 3D 글꼴 : 9 가지 주요 유형 팁
이 튜토리얼에서 문자 효과는 문자의 모양을 마스크로 사용하여 문자 사이를 동적으로 소용돌이 치고 이동하는 빠르고 자유롭게 흐르는 입자 흔적에 적용합니다. 이 아름다운 애니메이션이있을뿐만 아니라 HTML5 캔버스 요소에 렌더링 될 것이므로 3D로 변형되어 화면 주위를 이동할 때 마우스를 향해 회전합니다. 사이트 헤더 또는 클릭 유도 문안을 위해 사용자의 관심을 끌 필요가있을 때 적합합니다.
여기에서 튜토리얼 파일 다운로드
01. 프로세스 시작
코드 IDE의 프로젝트 파일에서‘시작’폴더를 엽니 다. 프로젝트는 파티클 오브젝트 클래스를 만드는 것으로 시작합니다. 이것은 프로젝트의 텍스트 내에 흐르는 이미지를 만드는 데 사용됩니다. 'sketch.js'파일을 열고 다음 변수를 추가하여 기본 입자 생성을 시작합니다.
function Particle () {this.pos = createVector (random (width), random ((height-100))); this.vel = createVector (0, 0); this.acc = createVector (0, 0); this.maxspeed = maxSpeed; this.prevPos = this.pos.copy ();
02. 파티클 업데이트
입자를 이동하기 위해 각 프레임마다 업데이트 기능이 실행됩니다. 이것은 입자의 속도와 속도에 대한 가속도를 계산합니다. 속도는 결국 나중에 추가 될 전역 변수에 의해 제한됩니다. 속도는 개별 입자의 위치에 추가됩니다. 하나의 입자를 생성하면 한 번에 수천 개의 입자가 화면에 생성됩니다.
this.update = function () {this.vel.add (this.acc); this.vel.limit (this.maxspeed); this.pos.add (this.vel); this.acc.mult (0); }
03. 흐름에 따라
입자에 흐르는 움직임을 제공하기 위해 소음에 의해 생성 된 유동장을 따릅니다. 여기서 생성 된 함수는 흐름의 벡터가 전달 될 수있게하고 그 뒤에 따라 오므로이 함수의 이름이됩니다. 벡터 방향의 힘이 입자에 적용됩니다.
this.follow = function (벡터) {var x = floor (this.pos.x / scl); var y = floor (this.pos.y / scl); var index = x + y * cols; var force = 벡터 [인덱스]; this.applyForce (force); }
04. 너무 가깝지는 않지만 따르십시오
이러한 종류의 움직임으로 쉽게 발생할 수있는 모든 입자가 함께 뭉쳐지는 것을 막기 위해 입자의 위치에 매우 적은 양의 임의성이 추가됩니다. 이로 인해 약간의 산란이 발생합니다.
this.scatter = 함수 (벡터) {this.pos.x + = random (-0.9, 0.9); this.pos.y + = random (-0.9, 0.9); } this.applyForce = function (force) {this.acc.add (force); }
05. 입자 표시
여기의 show 기능은 입자를 표시합니다. 가장 먼저하는 일은 밝은 회색의 1 픽셀 스트로크를 추가하여 선을 만드는 것입니다. 선은 현재 위치에서 이전 프레임의 마지막 위치로 그려집니다. 이전 위치는 루프를 통해 다음 번에 저장됩니다.
this.show = function () {stroke (180); strokeWeight (1); line (this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y); this.updatePrev (); } this.updatePrev = function () {this.prevPos.x = this.pos.x; this.prevPos.y = this.pos.y; }
06. 감싸기
가장자리 기능은 입자가 화면의 가장자리에 도달하면 작동하고, 그렇다면 반대편에 오도록 감싸줍니다. 이 섹션에서는 x 위치를 다루므로 화면 너비보다 큰지 감지 한 다음 왼쪽 가장자리로 보내고 그 반대의 경우도 마찬가지입니다.
this.edges = function () {if (this.pos.x> width) {this.pos.x = 0; this.updatePrev (); } if (this.pos.x 0) {this.pos.x = 너비; this.updatePrev (); }
07. 래퍼의 기쁨
이 코드는 가장자리 감지의 나머지 부분이며 화면 상단 및 하단의 y 축에서 입자를 감지합니다. 여기의 대괄호는 전체 입자 클래스를 마무리합니다. 이것은이 클래스를 사용하여 많은 입자를 만들 수 있음을 의미합니다.
if (this.pos.y> 높이) {this.pos.y = 0; this.updatePrev (); } if (this.pos.y 0) {this.pos.y = 높이; this.updatePrev (); }}}
08. 많은 입자 만들기
이제 입자가 만들어지면 많은 입자를 만드는 것에 대해 생각할 차례입니다. 이를 위해 우리의 모든 코드는 Particle 함수 클래스 위에 올 수 있습니다. 여기에는 시스템이 실행될 수 있도록 여러 글로벌 변수가 선언되어 있습니다. 코드가 진행되는 동안 여러 번 호출되므로 탐색 할 수 있습니다.
var inc = 0.1; var scl = 100, zoff = 0; var cols, rows, movement = 0; var 입자 = []; var flowfield; var img; var maxSpeed; var t, calcX = 0, calcY = 0, currX = 0, currY = 0, targetX = 0, targetY = 0;
09. 모든 설정
여기에 선언 된 설정 함수는 시작시 화면이 어떻게 보이는지 설정합니다. 수행되는 첫 번째 감지는 화면의 너비를 확인하는 것입니다. 상대적으로 크면 큰 이미지가로드되고 캔버스가 생성되고 디스플레이에 맞게 CSS를 통해 크기가 조정됩니다.
function setup () {if (windowWidth> 1200) {img = loadImage ( "assets / studio.png"); var canvas = createCanvas (1920, 630); maxSpeed = 10.5; }
10. 기타 화면
나머지 if 문은 다양한 화면 해상도를 확인하고 해당 화면 크기에 가장 적합한 이미지를로드합니다. 마찬가지로 크기가 다른 캔버스 요소가 생성됩니다. 이것은 주로 모바일이 필요한 것보다 더 많은 픽셀을 처리하는 것을 중지하기위한 것입니다.
else if (windowWidth> 900) {img = loadImage ( "assets / studio-tablet-wide.png"); var canvas = createCanvas (1200, 394); scl = 60; maxSpeed = 7; } else {img = loadImage ( "assets / studio-tablet-tall.png"); var canvas = createCanvas (700, 230); scl = 40; maxSpeed = 5; }
11. 그리드 만들기
화면 크기가 조정되면 캔버스는 index.html 페이지의 헤더 div 태그 안에 배치됩니다. 너비와 높이에 따라 많은 열과 행이 계산됩니다. 보이지 않는 격자와 비슷합니다. 마지막으로 흐름 필드에 대한 배열이 설정됩니다.
canvas.parent ( '헤더'); cols = 바닥 (너비 / scl); 행 = 바닥 (높이 / scl); flowfield = new Array (cols);
12. 입자 만들기
입자의 수는 화면의 너비를 기준으로 설정됩니다. 화면이 1920 픽셀이면 2500 개의 입자가 만들어지고 거기에서 아래쪽으로 이동합니다. for 루프는 새 입자를 만듭니다. 화면의 배경색은 거의 완전한 흰색으로 설정됩니다.
var numParticles = Math.floor ((2500/1920) * width); for (var i = 0; i numParticles; i ++) {particle [i] = new Particle (); } background (245); }
13. 화면 그리기
모든 계산의 결과는 그리기 기능의 모든 프레임에 화면에 그려집니다. 첫째, 불투명도가 매우 낮은 밝은 회색 사각형이 화면을 채워 이전에 그려진 내용이 희미 해집니다. 이것이 그려진 후에는 입자가 채우기가 아닌 획으로 구성되므로 채우기가 꺼집니다.
function draw () {noStroke (); fill (245, 10); rect (0, 0, 너비, 높이); noFill (); var yoff = 0;
14. 흐름 효과 만들기
흐름 효과를 얻으려면 노이즈 값을 업데이트하기 위해 행과 열을 이동하는 두 개의 'for'루프가 있습니다. 그런 다음 화면의 각 위치에 대한 입자를 업데이트 할 준비가 된 노이즈 값의 각도로 변경됩니다.
for (var y = 0; y 행; y ++) {var xoff = 0; for (var x = 0; x cols; x ++) {var index = (x + y * cols); var angle = noise (xoff, yoff, zoff) * TWO_PI * 4; var v = p5.Vector.fromAngle (angle);
15. 어레이 업데이트
흐름의 배열이 각도로 업데이트되고 값이 증가하여 각 위치의 오프셋이 올라갈 때마다 증가합니다. 이것은 복잡해 보일 수 있지만 실제로는 입자가 화면에서 따라가는 임의의 유동 모션을 생성합니다.
v.setMag (1); 유동장 [인덱스] = v; xoff + = inc; } yoff + = inc; zoff + = 0.001; }
16. 입자 업데이트
이제 입자는 모두 배열에서 반복됩니다. 각 개별 입자는 유동장을 따르고, 화면의 가장자리를 업데이트하고, 확인하고, 약간 흩어져서 마지막으로 show 기능을 사용하여 화면에 그려야합니다. 파일을 저장하고‘index.html’을 테스트하여 입자가 움직이는 것을 확인합니다.
for (var i = 0; i particle.length; i ++) {particle [i] .follow (flowfield); 입자 [i] .update (); 입자 [i] .edges (); 입자 [i] .scatter (); 입자 [i] .show (); }}
17. 텍스트 추가
텍스트는 상단에 배치되는 마스크입니다. 이를 위해 올바른 이미지가 입자 위에 배치됩니다. 그리기 함수의 닫는 중괄호 앞에이 코드를 추가합니다. 지금 텍스트와 함께 작동하는 효과를 보려면 브라우저를 저장하고 확인하십시오.
이미지 (img, 0, 0);
18. 마우스 위치 감지
마우스 위치가 참조되고 x 및 y 값이 이동할 수있는 각도에 매핑됩니다. y 축에서 이것은 -25에서 25이고 x 축에서는 그 반대입니다. 나머지 코드는 마지막 코드가 추가 된 후 그리기 기능이 끝나기 전에 배치되어야합니다.
targetY = Math.round (map (mouseX, 0, 너비, -25, 25)); targetX = Math.round (map (mouseY, 0, 높이, 25, -25));
19. 제자리에 쉽게
이제 목표 위치에 약간의 여유가 주어 지므로 각도가 천천히 목표에 도달합니다. 이것은 목적지에서 현재 위치를 떼어 내고 낮은 숫자를 곱하는 고전적인 여유 알고리즘을 사용하여 만들어집니다.
var vx = (targetX-currX) * 0.05; var vy = (targetY-currY) * 0.05; calcX + = vx; calcY + = vy;
20. CSS 작성
여기서 't'변수는 계산 된 값을 가져와 rotateX 및 rotateY의 변환 값을 사용하여 CSS 문자열에 배치합니다. 현재 위치는 캔버스가 현재 회전 된 위치에서 계산됩니다.
t =’rotateX (’+ calcX +’deg) rotateY (’+ calcY +’deg)’; currX = calcX; currY = calcY;
21. 마무리
이제 CSS가이 코드의 캔버스 요소에 적용됩니다. 페이지를 저장하고 브라우저에서 미리 봅니다. 이제 마우스가 캔버스의 회전을 완전히 업데이트하여 마우스가 움직일 때 회전하도록합니다. 물론 그 공간의 모든 입자는 화면에서 함께 이동합니다.
canvas.style.WebkitTransform = t; canvas.style.msTransform = t; canvas.style.transform = t;
이 기사는 원래 크리에이티브 웹 디자인 잡지 인 Web Designer에 게재되었습니다. 구입271 호또는구독.
