P5.js

saalek110

saalek110

Well-Known Member

p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
editor.p5js.org editor.p5js.org

ادیتور و اجرای برنامه های p5js
با حساب گوگل خود می توانید لوگین کنید.

از منوی فایل بروید به مثالها.یک مثال را باز کنید و اجرا را بزنید.
 
saalek110

saalek110

Well-Known Member
دانلود p5js
:
p5js.org

Download

Download
p5js.org p5js.org

بعد آنزیپ بسته چند پوشه و فایل خواهید داشت.

بعد دانلود یک برنامه خالی هم داره که لینک کرده به فایلهای p5js
یکی از فایلها حدود ۴ مگا است. پسوند js دارد. اسمش p5 است.
یک فایل کنارش است با حجم یک مگا با نام p5.min و پسوند js باز.
داخل پوشه addons هم دو فایل هست با همین نامها ولی کلمه sound بعد کلمه p5 اومده.

یک فایل readme هم داره که فایلها را شرح داده ، میگه p5.js قابل خواندن است ، می توانید کدها را بخوانید.
سالک : بله من رفتم دیدم ، ۱۰۷ هزار خط است.
میگه اون فایل کوچک تره یعنی p5.min قابل خوندن نیست و همین توابع را داره ولی قسمت سیستم خطای دوستانه را نداره. سالک : دقیق نمی دونم منظورش چیه ولی احتمالا کدهایی است برای پوشش بهتر خطاها.

بعد معرفی مختصر فایلها در فایل read me گفته برای اطلاعات بیشت. بروید این آدرس ها:

get started | p5.js
and
learn | p5.js

یک فایل با نام sketch.js کنار فایل html است در پوشه empty-example
که گویا شکلها را اونجا وارد خواهیم کرد.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
سالک : چیزی که من فهمیدم اینه که سازنده p5js یک کاور یعنی پوشش روی کدهای webl ساخته،
خوب اگر این باشه چیز جالبیه ، چون ساده کرده استفاده کردن را.
البته هر ساده سازی باعث یک مقدار از بین رفتن قابلیت ها هم میشه ، ولی اگر کارهای ساده هم p5js برای ما انجام بده ، خوب ، جذابه.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
سالک: خوب ، حالا باید چکار کرد؟ خوب باید را اجرا کرد و احتمالا اشکال را در فایل اسکچ انداخت.

قبل انداختن اشکال در فایل اسکچ یک صفحه قهوه ای فقط بود.

البته اینجا هم همین قصه است:

get started | p5.js

p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
p5js.org p5js.org

یعنی داره شرح می دهد چکار باید بکنیم. البته فقط این فایل html و اسکچ را نشان داد. و نرسید به درج اشکال.

البته بالای صفحه اشکال را گفته و انتهای صفحه فایل html و اسکچ را گفته.
از بالای صفحه این کد را کپی کردم:
JavaScript: 
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

توضیح اینکه قبلا در فایل اسکچ توابع ستاپ و draw خالی بود ، و می بینید در کد بالا ۳ خط در مجموع به دو تابع بالا اضافه شده.

ستاپ که معلومه برای چیه ، برای تنظیمات اولیه است و تابع draw هم برای رسم است. اگر opengl یا webgl کار کرده باشید می فهمید چرا در دو تابع نگارنده تقسیم کرده. منظورم سازنده p5 است ، اون ساختار opengl را قبول کرده و شکل نهایی کارش به شکل دو تابع شده. شاید اکثر کسانی که وارد این پروژه میشن به همین قالب کارشون ختم میشد.

بگذریم ، برویم برای اجرا.
برای من هیچ شکلی نیامد. نمی دونم اشکال از کجاست.

فایلها و پوشه ها را در هاستم می گذارم همین طوری باشه ، بعدا شاید کار کردم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member

p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
editor.p5js.org editor.p5js.org

ادیتور

اگر با جیمیل خود لوگین کنید می توانید با زدن دانلود ، کدها را دانلود کنید.
من دانلود کردرم و درهاست خودم آپلود کردم. پست قبل. ولی چیزی نشان داده نشد.

یکسری مثال هم دارد.

ولی مثالش اجرا شد.
ولی وقتی آپلود کردم اجرا نشد. لینک زیر:
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
      <p>aa</p>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

ولی در مرورگر فایرفاکس اجرا می شود.من با کروم داشتم کار می کردم.

فایل را کپی گرفتم و کد فایل کپی این بود:
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="p5.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
      <p>aa</p>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>


یعنی لینک دادم به فایلهای کنارش نه به سایت مادرش.

در لینک بالا aa چاپ شد ولی در لینک قبلی همین aa هم چاپ نمیشد.
ولی در فایرفاکس اجرا می شود.

در لینک زیر کدهای جاوا اسکریپت را به داخل فایل html آوردم ، ولی باز اجرا نشد.

ولی در فایرفاکس اجرا می شود.

Screenshot_۲۰۲۳-۰۹-۲۰_۰۳۵۱۳۷.jpg
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
خوب ، پس در حافظه گوشی با نرم افزار سرور ساز با کروم مثالش اجرا شد ولی روی هاست با کروم باز نشد و با فایرفاکس باز شد.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا