"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[7689],{1550:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"integration-p5js","title":"p5.js Integration","description":"Explore how to import p5.js with your  application.","source":"@site/Integration/004.integration-p5js.md","sourceDirName":".","slug":"/integration-p5js","permalink":"/guides/integration/integration-p5js","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3},"sidebar":"sidebar","previous":{"title":"Highcharts Integration","permalink":"/guides/integration/integration-Highcharts"},"next":{"title":"Supabase Integration","permalink":"/guides/integration/integration-supabase"}}');var s=t(4848),r=t(8453),o=t(8175);const a={sidebar_position:3},l="p5.js Integration",p={},c=[{value:"What is p5.js ?",id:"what-is-p5js-",level:2},{value:"How to Build a Website Using p5.js in EZsite",id:"how-to-build-a-website-using-p5js-in-ezsite",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"p5js-integration",children:"p5.js Integration"})}),"\n",(0,s.jsxs)(n.p,{children:["Explore how to import p5.js with your ",(0,s.jsx)(o.A,{})," application."]}),"\n",(0,s.jsx)(n.h2,{id:"what-is-p5js-",children:"What is p5.js ?"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://p5js.org/",children:"p5.js"})," is a flexible and open-source JavaScript library designed for creative coding, particularly in the realm of visual arts and interactive graphics. Developed by Lauren McCarthy, it provides an easy-to-use framework for beginners and experienced developers alike to create sketches and animations in the web browser."]}),"\n",(0,s.jsx)(n.h2,{id:"how-to-build-a-website-using-p5js-in-ezsite",children:"How to Build a Website Using p5.js in EZsite"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open ",(0,s.jsx)(n.a,{href:"https://ezsite.ai",children:(0,s.jsx)(o.A,{})}),"."]}),"\n",(0,s.jsx)(n.li,{children:'Click the "Create new project" button.'}),"\n",(0,s.jsx)(n.li,{children:"Enter your dream idea in the text box"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"For example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"Create a sample website using p5.js\n"})}),"\n",(0,s.jsxs)(n.ol,{start:"4",children:["\n",(0,s.jsx)(n.li,{children:'Click "Generate your website".'}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8175:(e,n,t)=>{t.d(n,{A:()=>s});t(6540);var i=t(4848);function s(){return(0,i.jsx)("code",{children:"EZsite"})}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var i=t(6540);const s={},r=i.createContext(s);function o(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);