فونت در p5.js | علی خادم

فهرست

p5.js می‌تونه هر فونتی رو لود کنه و توی متن‌ها ازش استفاده کنه، حتی فونت‌های فارسی. می‌تونید از فونت‌هایی که از قبل روی سیستمتون نصب شده استفاده کنید، یا توی برنامه‌تون فونت‌های دیگه‌ای رو لود کنید. برای اعمال فونت روی متن‌ها، توی برنامه‌های p5.j می‌تونیم از تابع textFont استفاده کنیم و برای نوشتن خود متن‌ها، می‌شه از تابع text استفاده کرد. همچنین برای تغییر سایز متن از تابع textSize استفاده می‌شه:

const myString = 'یک قدم کوچک برای انسان'

function setup() {
     createCanvas(windowWidth, windowHeight);
     textFont('B Mitra')
}
function draw() {
     textSize(30)
     text(myString, 25, 60)
     textSize(22)
     text(myString, 25, 100)
}

توی تابع text اولین پارامتر، همون متنیه که قراره نمایش بده و پارامترهای بعدی مختصات نمایش متن روی بومه. توی مثال بالا، فونتی که فراخونی کردید باید روی سیستمی که برنامه شما رو اجرا می‌کنه نصب باشه؛ اگه بخواید این طوری نباشه، یعنی نیازی نباشه که سیستم شما فونت رو داشته باشه، باید فونت همراه با برنامه شما لود بشه.

لود کردن فونت در p5.js

p5.js می‌تونه فونت‌هایی با پس‌وند ttf یا otf رو لود کنه؛ برای این کار باید این مراحل طی بشه:

فونت توی همون فولدر کنار فایل sketch.js قرار بگیره
CSS مرتبط با لود فونت توی فایل HTML قرار بگیره
فونت جدید به عنوان فونت برنامه معرفی بشه
حتماً از تابع background در draw استفاده بشه

من از فونت ایران‌سنس استفاده کردم و فایل فونت رو کنار فایل sketch.js قرار دادم؛ بعد باید این کُدِ CSS رو به فایل HTML اضافه کنیم؛ این کد شامل آدرس فایلِ فونته؛ همچنین یه اسم برای فونتی که داریم به برنامه معرفی می‌کنیم انتخاب می‌کنیم:

@font-face {
     font-family: 'iranSans';
     src: url(IRANSansX-Regular.ttf);
}

فایل index.html الان باید این شکلی شده باشه:

<!DOCTYPE html>
<html lang="">

<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>p5.js example</title>
     <style>
          @font-face {
               font-family: 'iranSans';
               src: url(IRANSansX-Regular.ttf);
          }
          body {
               padding: 0;
               margin: 0;
          }
     </style>
     <script src="../p5.js"></script>
     <script src="sketch.js"></script>
</head>

<body>
     <main>
     </main>
</body>

</html>

و فایل sketch.js این شکلی:

const myString = 'یک قدم کوچک برای انسان'

function setup() {
     createCanvas(windowWidth, windowHeight);
     textFont('iranSans')
}
function draw() {
     background(255)
     textSize(30)
     text(myString, 25, 60)
     textSize(22)
     text(myString, 25, 100)
}

یک نمونه از تایپوگرافی در p5.js که فونت دلخواه به این برنامه اضافه شده است

دقیقاً مثل شکل‌ها، برای مشخص کردن رنگ متن‌ها هم می‌شه از تابع‌های fill و stroke استفاده کرد.

const myString = 'یک قدم کوچک برای انسان'

function setup() {
     createCanvas(windowWidth, windowHeight);
     textFont('iranSans')
}
function draw() {
     background(200)
     fill(255)
     stroke(225, 0, 0)
     strokeWeight(5)
     textSize(45)
     text(myString, 25, 100)
     strokeWeight(3)
     textSize(30)
     text(myString, 25, 160)
}

یک نمونه از تایپوگرافی در p5.js که ظاهر متن ها تغییر داده شده است

حالا که یاد گرفتیم چطوری می‌شه فونت فارسی به برنامه اضافه کرد و چطوری می‌شه متن تایپ کرد، می‌تونیم اسکیس بزنیم. می‌خوام یه حرف انتخاب کنم و با حرکت ماوس کوچیک و بزرگ و جابجاش کنم. دقت کنید این دفعه دیگه از تابع draw استفاده نمی‌کنم، بلکه از یه تابع دیگه استفاده می‌کنم به نام mouseMoved که همون طوری که از اسمش پیداس، بر اساس حرکت ماوس کُدی که داخلش نوشته شده رو اجرا می‌کنه (اگه با متغیر mouseX و mouseY آشنا نیستید باید «ورودی» رو بخونید):

const letter = 'ق'

function setup() {
     createCanvas(windowWidth, windowHeight);
     textFont('iranSans')
     textAlign(CENTER, CENTER)
     background(255)
}
function mouseMoved() {
     background(200)
     textSize((mouseX - width / 2) * 5 + 1)
     text(letter, width / 2, mouseY)
}

فونت در p5.js Font

فهرست

لود کردن فونت در p5.js

دیدگاهتان را بنویسید لغو پاسخ