معرفی 3 تا «ورودی» p5.js Input

ورودی چیه؟

ممکنه با خوندن تیتر این درس بپرسید «ورودی» چیه؟ توی اولین مطلب این دوره دیدید که توی p5.js برنامه ما می‌تونه از بولیَنِ mouseIsPressed استفاده کنه تا یک شرط تعریف بشه؛ این یکی از راه‌های ورود اطلاعات به برنامه‌مونه؛ برای این که اطلاعات وارد برنامه‌مون بشه راه‌های دیگه‌ای هم وجود داره که اصطلاحاً به هر کدوم از این راه‌های ورود اطلاعات، ورودی یا اینپوت می‌گیم؛ مثلا:

• فشار دادن دکمه‌های ماوس
• تغییر دادن موقعیت مکانی ماوس
• فشار دادن دکمه‌های صفحه کلید
• لمس کردن صفحه تاچ‌پد
• استفاده کردن از میکروفون یا وب‌کم

ورودی: موقعیت مکانی ماوس

کدی که توی draw نوشته می‌شه دائماً در حال اجرا شدنه، برای همین می‌تونیم موقعیت مکانی ماوس روی صفحه رو تعقیب کنیم و عناصری رو روی صفحه به حرکت دربیاریم. متغیر mouseX و mouseY که توی مثال‌های قبلی هم ازشون استفاده کردیم، مختصات x و y نشان‌گر ماوس رو توی خودشون ذخیره می‌کنن. توی این مثال هر بار که کد توی draw اجرا می‌شه، یک دایره جدید کشیده می‌شه:

function setup() {
     createCanvas(windowWidth, windowHeight)
     fill(0, 50)
     noStroke()
}
function draw() {
     ellipse(mouseX, mouseY, 250, 250)
}

توی مثال بعدی، باز هم هر بار که draw اجرا می‌شه، یه دایره روی صفحه کشیده می‌شه، اما این بار از تابع background استفاده کردم تا فقط آخرین دایره‌ای که کشیده شده دیده بشه. تابع background بوم رو با رنگی که به عنوان پارامتر دریافت می‌کنه، پُر می‌کنه، برای همین باید توی draw قرار بگیره تا قبل از کشیده شدن هر دایره، دایره‌ی قبل از بین بره:

function setup() {
     createCanvas(windowWidth, windowHeight)
     fill(0, 50)
     noStroke()
}
function draw() {
     background(204)
     ellipse(mouseX, mouseY, 250, 250)
}

متغیرهای pmouseX و pmouseY مختصات ماوس توی فریم قبلی رو ذخیره می‌کنن و مثل mouseX و mouseY هر بار که draw اجرا می‌شه آپدیت می‌شن؛ با استفاده از این متغیرها می‌شه خطوط پیوسته کشید:

function setup() {
     createCanvas(windowWidth, windowHeight)
     strokeWeight(10)
     stroke(0, 105)
}
function draw() {
     line(mouseX, mouseY, pmouseX, pmouseY)
}

کد بالا داره با استفاده از تابع line دائماً خط می‌کشه: پارامتر اول و دوم، مختصات x و y نقطه ابتدایی خط، و پارامتر سوم و چهارم، مختصات x و y نقطه انتهای خط رو تعریف می‌کنه. یه کار دیگه‌ای که با متغیرهای pmouseX و pmouseY می‌شه انجام داد اینه که سرعت حرکت ماوس رو به دست آورد؛ این طوری می‌شه بر اساس سرعت حرکت ماوس هم تغییراتی تو اَشکال به وجود آورد. سرعت حرکت ماوس رو می‌شه از فاصله بین جای فعلی ماوس و جای قبلی ماوس به دست آورد؛ یکی از توابع آماده p5.js به نام dist این محاسبات رو برای ما انجام می‌ده. توی مثال پایین، از سرعت ماوس برای تنظیم ضخامت خطی که داره کشیده می‌شه استفاده می‌کنیم:

function setup() {
     createCanvas(windowWidth, windowHeight)
     stroke(0, 105)
}
function draw() {
     const mouseSpeed = dist(mouseX, mouseY, pmouseX, pmouseY)
     strokeWeight(mouseSpeed)
     line(mouseX, mouseY, pmouseX, pmouseY)
}

توی مثال بعدی می‌خوام یه برنامه بنویسم که یه طوری بفهمه مکان‌نمای ماوس سمت راست یا چپ یک خطه و اون خط رو به سمت مکان‌نمای ماوس حرکت بده؛ ببینید چطوری انجام می‌‎شه:

let x
let offset = 10

function setup() {
     createCanvas(windowWidth, windowHeight)
     x = windowWidth/2
}
function draw() {
     background(204)
     if(mouseX > x) {
          x += 0.5
          offset = -10 
     }
     if(mouseX < x) {
          x -= 0.5
          offset = 10
     }

  // line
  line(x, 0, x, windowHeight)

  // draw arrow left or right depending on offset value
  line(mouseX, mouseY, mouseX + offset, mouseY - 10)
  line(mouseX, mouseY, mouseX + offset, mouseY + 10)
  line(mouseX, mouseY, mouseX + offset*3, mouseY)

}

ممکنه بخوایم کدی بنویسیم که محدوده شکل دایره رو تشخیص بده و بفهمه که آیا مکان‌نمای ماوس داخل دایره قرار گرفته یا نه؛ برای این که این تست رو انجام بدیم دوباره از تابع dist استفاده می‌کنیم و فاصله مرکز دایره تا مکان‌نمای ماوس رو حساب می‌کنیم؛ بعد تست می‌کنیم که آیا این فاصله بیشتر از شعاع دایره‌مون هست یا نه. توی مثال بعدی، وقتی مکان‌نمای ماوس داخل دایره قرار بگیره، دایره شروع به بزرگ شدن می‌کنه. خودتون امتحان کنید:

let radius = 15

function setup() {
     createCanvas(windowWidth, windowHeight)
     ellipseMode(RADIUS)
     noStroke()
}
function draw() {
     background(204)
     let distance = dist(mouseX, mouseY, windowWidth/2, windowHeight/2)
     if(distance < radius) {
          radius++
          fill(0)
     } else {
          fill(255)
     }
     ellipse(windowWidth/2, windowHeight/2, radius, radius)
}

دقت کنید توی مثال بالا من از ellipseMode استفاده کردم و روی حالت RADIUS قرارش دادم؛ این طوری دو تا پارامتر آخر تابع ellipse مشخص‌کننده شعاع‌های عرضی و ارتفاعی دایره می‌شن. برای اطلاعات بیشتر درباره تابع ellipseMode می‌تونید این لینک رو ببینید.

ورودی: دکمه‌های صفحه کلید

مثل متغیر mouseIsPressed متغیر keyIsPressed هم زمانی که هر دکمه‌ای روی صفحه کلید فشار داده بشه true می‌شه و دقیقاً مثل mouseIsPressed می‌شه جاهای مختلف ازش استفاده کرد. متغیر key هم آخرین کلیدی که روی صفحه کلید فشار داده شده رو توی خودش ذخیره می‌کنه و تا وقتی یه کلید دیگه فشار داده بشه، اون رو توی خودش نگه می‌داره.

ورودی: لمس صفحه نمایش

برای دستگاه‌هایی که از صفحه نمایش لمسی پشتیبانی می‌کنن، p5.js می‌تونه تشخیص بده که صفحه نمایش لمس شده یا نه و این کارو از طریق متغیر بولیَنِ touchIsDown انجام می‌ده؛ برای این که بدونیم کجای صفحه لمس شده هم می‌شه از متغیرهای touchX و touchY استفاده کرد.