-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1168311
commit ce572d7
Showing
44 changed files
with
991 additions
and
1,075 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -33,18 +33,21 @@ | |
| <a id="darkMode" onclick="toggleDarkMode()" tabindex="0" role="button" title="dark mode toggle"> | ||
| <div id="darkModeIcon"></div> | ||
| </a> | ||
| <hr> | ||
| <div id="littleLangs"> | ||
| <a href="/" lang="en" class="active" title="English">English</a> | ||
| <a href="/lang/es" lang="es" title="Spanish">Español</a> | ||
| <a href="/lang/ja" lang="ja" title="Japanese">日本語</a> | ||
| </div> | ||
| <a id="accountIcon" href="../account"> | ||
| <svg viewBox="0 0 20 20"> | ||
| <path | ||
| d="M16.563 18H3.438c-.706 0-1.228-.697-.961-1.338C3.713 13.698 6.617 12 10 12c3.384 0 6.288 1.698 7.524 4.662.267.641-.255 1.338-.961 1.338M5.917 6c0-2.206 1.832-4 4.083-4 2.252 0 4.083 1.794 4.083 4S12.252 10 10 10c-2.251 0-4.083-1.794-4.083-4m14.039 11.636c-.742-3.359-3.064-5.838-6.119-6.963 1.619-1.277 2.563-3.342 2.216-5.603-.402-2.623-2.63-4.722-5.318-5.028C7.023-.381 3.875 2.449 3.875 6c0 1.89.894 3.574 2.289 4.673-3.057 1.125-5.377 3.604-6.12 6.963C-.226 18.857.779 20 2.054 20h15.892c1.276 0 2.28-1.143 2.01-2.364" | ||
| fill="#000" fill-rule="evenodd"></path> | ||
| </svg> | ||
| </a> | ||
| </nav> | ||
| <div class="nav-spacer"></div> | ||
| <nav id="langNav"> | ||
| <a href="/" lang="en" class="active" title="English">English</a> | ||
| <!-- <a href="/lang/zh" lang="zh" title="Chinese">中文</a> --> | ||
| <a href="/lang/es" lang="es" title="Spanish">Español</a> | ||
| <a href="/lang/ja" lang="ja" title="Japanese">日本語</a> | ||
| </nav> | ||
| <div class="spacer"></div> | ||
| <div class="big break"> | ||
| <a href="learn/activism.html" id="banner">🇵🇸 We support students protesting for peace and justice! | ||
| 🇵🇸</a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <div id="reels"> | ||
|
|
@@ -257,8 +260,8 @@ <h2 id="support-this-project-🤝">Support this project 🤝</h2> | |
| <div> | ||
| <md id="md12"> | ||
| <h2 id="no-installation-required-🤩">No installation required 🤩</h2> | ||
| <p>Works great on Google Chromebooks! Start creating your own p5play project with one of these | ||
| online code editors.</p> | ||
| <p>Works great on iPads and Chromebooks! Start creating your own p5play project with one of | ||
| these online code editors.</p> | ||
| </md> | ||
| <div id="editors"> | ||
| <a href="https://aijs.io/editor?user=quinton-ashley&project=p5play_starter" target="_blank"> | ||
|
|
@@ -536,17 +539,6 @@ <h2 id="let-us-know-what-you-think-😄">Let us know what you think! 😄</h2> | |
| </div> | ||
|
|
||
| <div class="page"> | ||
|
|
||
| <div class="break"></div> | ||
|
|
||
| <div class="full"> | ||
| <md id="md14"> | ||
| <h2 id="join-50000-active-users">Join +50,000 active users!</h2> | ||
| <h3 id="get-started-with-our-interactive-learn-pages"><a href="learn/sprite.html" | ||
| target="_blank">Get started with our interactive Learn pages.</a></h3> | ||
| </md> | ||
| </div> | ||
|
|
||
| <div class="break"></div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -567,28 +559,13 @@ <h2 id="created-by-quinton-ashley">Created by Quinton Ashley</h2> | |
| <div class="page"> | ||
| <div class="break"></div> | ||
|
|
||
| <md id="md16-0"> | ||
| <h2 id="are-you-a-teacher-👩🏫-🧑🏫-👨🏫">Are you a teacher? 👩🏫 🧑🏫 👨🏫</h2> | ||
| <p>Using p5play in your middle or high school curriculum is a great way to get your students | ||
| interested in object oriented programming.</p> | ||
| <p>Quinton offers Professional Development sessions for teachers. Even if you're not a "gamer" and | ||
| have no experience with game design, you can become an expert at teaching p5play! Your students | ||
| will love making their own games and interactive art. During my PD course you'll receive advice | ||
| on curriculum design, analysis of student work, curated resources for your students to use, and | ||
| more!</p> | ||
| <p>Inquire about Professional Development via email: <a href="mailto:[email protected]" | ||
| target="_blank">[email protected]</a></p> | ||
| </md> | ||
| <md id="md16-1"> | ||
| <h2 id="are-you-a-student-🙋♀️-🙋-🙋♂️">Are you a student? 🙋♀️ 🙋 🙋♂️</h2> | ||
| <p>If your school has a Computer Science teacher, tell them about p5play!</p> | ||
| <p>If not, Quinton teaches the following courses online: AP Computer Science Principles, AP CS A, | ||
| IGCSE Computer Science, and more. Learn standards aligned CS in a fun way!</p> | ||
| <p>Quinton also teaches Game Design Fundamentals. Level up your programming skills by learning how | ||
| to use p5play. I'll help you design your own game and share it with the world!</p> | ||
| <p>Ask your parents to send an email to <a href="mailto:[email protected]" | ||
| target="_blank">[email protected]</a> and inquire about private tutoring.</p> | ||
| </md> | ||
| <div class="full"> | ||
| <md id="md14"> | ||
| <h2 id="join-50000-active-users">Join +50,000 active users!</h2> | ||
| <h3 id="get-started-with-our-interactive-learn-pages"><a href="learn/sprite.html" | ||
| target="_blank">Get started with our interactive Learn pages.</a></h3> | ||
| </md> | ||
| </div> | ||
|
|
||
| <div class="break"></div> | ||
|
|
||
|
|
@@ -597,67 +574,48 @@ <h1 id="more-info">More Info</h1> | |
| <md id="md17-0" class="closed"> | ||
| <h2 id="why-do-computer-science-educators-love-p5play-😍">Why do Computer Science educators love | ||
| p5play?! 😍</h2> | ||
| <p>The <a href="https://p5js.org/" target="_blank">p5.js</a> graphics library is already popular | ||
| among CS educators, so p5play is a natural addition to many curriculums.</p> | ||
| <p>p5play is great for teaching Object Oriented Programming concepts. Instead of manipulating | ||
| abstract data in a console, students can create game objects called <a | ||
| href="../learn/sprite.html" target="_blank">sprites</a> that they can see and physically | ||
| interact with. Students can also learn about arrays and class-like inheritance by using <a | ||
| href="../learn/group.html" target="_blank">groups</a>.</p> | ||
| <p>p5play is also entirely code based, so students don't need a specialized editor app to use it | ||
| (unlike with Unity). With p5play, students gain practical, transferrable JavaScript programming | ||
| skills and experience with online code editors or industry standard IDEs like <a | ||
| href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>.</p> | ||
| <p>p5play is also well designed and documented. Check out the <a href="../learn" | ||
| target="_blank">Learn pages</a>, a free resource packed with interactive examples and | ||
| exercises.</p> | ||
| <p>p5play makes Object Oriented Programming tangible. Changing the properties of game objects called | ||
| <a href="../learn/sprite.html" target="_blank">sprites</a> produces immediate visual feedback. | ||
| </p> | ||
| <p>p5play is a natural addition to <a href="https://p5js.org/" target="_blank">p5.js</a> based | ||
| curriculum, which is already popular in schools.</p> | ||
| <p>Also, since it doesn't require a bespoke game editor, students gain transferrable, text based | ||
| coding skills.</p> | ||
| <p>p5play is well designed and documented. Check out the <a href="../learn" target="_blank">Learn | ||
| pages</a>, a free resource packed with interactive examples and exercises.</p> | ||
| </md> | ||
| <md id="md17-1" class="closed"> | ||
| <h2 id="why-should-students-learn-p5play-🤔">Why should students learn p5play? 🤔</h2> | ||
| <p>Every EdTech company claims their "easy and fun to use" software empowers students to "realize | ||
| their creative potential", but often it's just marketing fluff.</p> | ||
| <p>If these platforms are so fun and creatively empowering, why are students only using them to | ||
| complete assignments?</p> | ||
| <p>p5play is different! It has all the features that students could want from a game engine: physics | ||
| based contact handling, input detection, animations, a camera, joints, and more.</p> | ||
| <p>Since p5play is web based, students can share their projects online. That's not so easy to do | ||
| with a Python, C#, or Java project. Being able to share projects with family and friends can | ||
| motivate students to make something worth sharing!</p> | ||
| <p>p5play makes the art of game design more accessible, without being reductive. We believe in | ||
| rewarding students for learning the basics by enabling them to go beyond.</p> | ||
| <p>Check out the incredible games that students have <a href="../play" target="_blank">made with | ||
| p5play</a>.</p> | ||
| </md> | ||
| <md id="md17-2" class="closed"> | ||
| <h2 id="what-about-scratch-🐯">What about Scratch? 🐯</h2> | ||
| <p><a href="https://scratch.mit.edu/" target="_blank">Scratch</a> is great for students ages 8-11, | ||
| but older students have higher expectations that Scratch can't meet.</p> | ||
| <p>One of the biggest problems: Scratch has no built-in physics engine. That means even something | ||
| super easy to make in p5play, like a ball rolling down a slope, requires a lot of math and is | ||
| incredibly tedious to implement in Scratch's block based environment.</p> | ||
| <p>The featured games on the Scratch website are inspiring to students, but they were made by adults | ||
| with extreme patience. If a student is really determined to make an impressive game in Scratch, | ||
| they'll probably have to spend 20 hours copying from YouTube tutorials. With p5play, students | ||
| can get results way faster and with less frustration.</p> | ||
| <p>Scratch has no built-in physics engine. That means even something like a ball rolling down a | ||
| slope, requires a lot of math and is incredibly tedious to implement in Scratch's block based | ||
| environment.</p> | ||
| <p>Many of the featured games on the Scratch website were clearly made by adults. That can give | ||
| students false hope that they can make something similar, without copying from YouTube tutorials | ||
| for 20 hours.</p> | ||
| <p>With p5play, students don't have to write their own boilerplate code for basic functionality. | ||
| They can focus on the fun parts of game design!</p> | ||
| </md> | ||
| <md id="md17-3" class="closed"> | ||
| <h2 id="why-was-p5play-created-🎨">Why was p5play created? 🎨</h2> | ||
| <p>Corporations shouldn't have a monopoly on the art of game development! p5play was created to make | ||
| this medium more accessible to students, educators, and indie developers.</p> | ||
| <p>In the early days of the internet, Adobe Flash made it easier for hobbyists to develop, share | ||
| games, and garner an audience, than ever before. But since Flash was phased out, gaming became | ||
| more commercialized. Corporations like Meta (FaceBook) and Apple heavily promoted games poisoned | ||
| by micro-transactions and loot boxes, mechanics designed to maximize profit. Hobbyists were left | ||
| in the dust. Now gamers are sick of being exploited, they want originality, but in a polished | ||
| package.</p> | ||
| <p>That's why Roblox, Minecraft for Education, and Fortnite all enable young developers to create | ||
| and share game modes and experiences. They promise massive potential audiences but insidiously, | ||
| these platforms are walled gardens that restrict artistic freedom and exploit developers. These | ||
| corporations regularly remove or shadow ban content they dislike, and they can do so without | ||
| explanation or recourse. These corporations explicitly forbid political art and only want | ||
| un-controversial content they can monetize to extend the life of their decades old games.</p> | ||
| <p>But virtual worlds and game systems are powerful tools for artistic expression. Young game | ||
| designers will always be able to use p5play freely, without corporate restrictions.</p> | ||
| <p>Virtual worlds and game systems are powerful tools for artistic expression. Corporations | ||
| shouldn't have a monopoly on the art of game development!</p> | ||
| <p>p5play was created so that young game developers could create freely, without corporate | ||
| restrictions.</p> | ||
| <p><strong>"Only the best is good enough"</strong> - Godtfred Kirk Christiansen, founder of LEGO</p> | ||
| <p>p5play was made to definitively bridge the gap between Scratch and professional game engines like | ||
| Unity, which are too complex for beginners and too specialized to be used for general CS | ||
| education.</p> | ||
| <p>p5play definitively bridges the gap between Scratch and professional game engines like Unity.</p> | ||
| </md> | ||
| <md id="md17-4" class="closed"> | ||
| <h2 id="can-i-use-p5play-for-free-📖">Can I use p5play for free? 📖</h2> | ||
|
|
@@ -669,10 +627,10 @@ <h2 id="can-i-use-p5play-for-free-📖">Can I use p5play for free? 📖</h2> | |
| <p>Acceptable free use of p5play includes:</p> | ||
| <ul> | ||
| <li>teaching a free class that's open to the general public</li> | ||
| <li>as part of a curriculum that is freely available to the public</li> | ||
| <li>in curriculum that is freely available to the public</li> | ||
| <li>posting a tutorial video on YouTube, even if it's monetized (protected by fair use)</li> | ||
| <li>developing a game that is not monetized</li> | ||
| <li>publishing a monetized game if you publicly share the source code</li> | ||
| <li>publishing a game that's open source</li> | ||
| </ul> | ||
| <p>Typical use by schools and commercial game developers requires a proprietary license. See the <a | ||
| href="pro" target="_blank">Pro</a> or <a href="teach" target="_blank">Teach</a> pages for | ||
|
|
@@ -689,13 +647,14 @@ <h2 id="can-i-see-some-demos-👀">Can I see some demos? 👀</h2> | |
| </md> | ||
| <md id="md17-6" class="closed"> | ||
| <h2 id="credits-⭐️">Credits ⭐️</h2> | ||
| <p>Huge thanks to everyone that's contributed to creating p5play (version 3)! 😄</p> | ||
| <p>Paolo Pedercini, creator p5.play (version 1), who trusted me to take over the project! <a | ||
| href="http://molleindustria.org" target="_blank">molleindustria.org</a></p> | ||
| <p>Erin Catto, creator of the Box2D physics simulator. <a href="https://box2d.org" | ||
| target="_blank">box2d.org</a></p> | ||
| <p>Ali Shakiba, creator of planck.js, a JavaScript port of Box2D used behind the scenes by p5play. | ||
| <a href="https://piqnt.com/planck.js" target="_blank">piqnt.com/planck.js</a></p> | ||
| <p>p5play (version 3) was created by Quinton Ashley.</p> | ||
| <p>Huge thanks to everyone that's helped with p5play! 🙏</p> | ||
| <p><a href="http://molleindustria.org" target="_blank">Paolo Pedercini</a>, creator p5.play (version | ||
| 1), who trusted me to take over the project!</p> | ||
| <p>Erin Catto, creator of the <a href="https://box2d.org" target="_blank">Box2D</a> physics | ||
| simulator.</p> | ||
| <p>Ali Shakiba, creator of <a href="https://piqnt.com/planck.js" target="_blank">planck.js</a>, a | ||
| JavaScript port of Box2D used behind the scenes by p5play.</p> | ||
| <p>Current contributors: @Tezumie, Oliver Zell, Caleb Foss, and Bobby S.</p> | ||
| <p>Testers and bug reporters: Raj Raizada, Nathan Anil, Chayarat Wangweera, Zhiyuan Guo, Aarnav | ||
| Gupta, and Carter Noa.</p> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.