Nyttige referencer og værktøjer
Indholdsfortegnelse
p5.js Referencer og Tutorials
-
p5.js Editor
Online editor til at skrive og køre p5.js kode
-
p5.js Reference
Komplet reference over alle indbyggede funktioner og klasser i p5.js
-
p5.js Get Started
Kom i gang med p5.js - en introduktion for begyndere
-
p5.js Tutorials
Samling af tutorials til at lære forskellige aspekter af p5.js
-
p5.js Eksempler
Samling af kodeeksempler der demonstrerer forskellige funktioner i p5.js
Video Tutorials
-
Begynder
programmeringskursus i p5.js
The Coding Train's introduktion til programmering med p5.js
-
Udvidet
begynder programmeringskursus i p5.js
Længere begynder programmeringskursus i p5.js
JavaScript Guides og Referencer
-
MDN JavaScript Guide
Komplet guide til al funktionalitet i JavaScript
-
GeeksforGeeks JavaScript Wiki
Wiki med basal info om JavaScript
-
p5.js JavaScript basics
Guide til JavaScript grundbegreber relateret til p5.js
-
JavaScript Best Practices
W3C guide til JavaScript best practices
Online Værktøjer
-
Online Color Picker
Værktøj til at vælge farver og få deres RGB/HEX værdier
-
KeyCode Finder
Online værktøj til at se hvilken kode de enkelte taster harEksempel:
if (keyIsDown(70)) { // Koden inden i if statementet udføres hvis der trykkes på "F" -
Text Compare
Online værktøj til at finde forskellene mellem to versioner af samme kode
-
Online Tegneprogram
Sketchpad - online tegneværktøj
-
Background Remover
Online program der kan fjerne baggrunden på et billede
-
Function Plotter
Online værktøj til at tegne en funktion i et koordinatsystem
-
Photo Upscaler
Værktøj til at forbedre opløsningen af billeder
Multiplayer Ressourcer
Jeg har installeret en server som alle kan bruge til at lave online spil. Når man opdatere variabler i sit spil, så bliver disse værdier automatisk synkroniseret til de andre browsere der er logget på samme applikation på serveren. Det er også muligt at tilføje et game room, så man kan have flere forskellige parallelle spil igang på samme applikation, se SpaceStratego eksemplet på hvordan man gør dette.
Den fælles server hedder "p5js-spaceman-server-29f6636dfb6c.herokuapp.com". Man skal huske at opdatere applikations navnet, så det er pre fixet med forbogstaverne fra sit eget navn samt navnet på applikationen + version således at navnet er entydigt.
Her er et eksempel på et spil som bruger denne server:
https://code-a-game.github.io/advancedExamples.html
function preload() {
partyConnect("wss://p5js-spaceman-server-29f6636dfb6c.herokuapp.com", "jkh-MultiPlayerOOPv1");
me = partyLoadMyShared({ playerName: "observer" });
guests = partyLoadGuestShareds();
shared = partyLoadShared("shared", {
shared: { xSun: 0 },
});
}
Hvor "jkh-MultiPlayerOOPv1" selvfølgelig skal udskiftes med initialerne for dit navn + applikationsnavnet for dit spil + version.
Useful References and Tools
Table of Contents
p5.js References and Tutorials
-
p5.js Editor
Online editor for writing and running p5.js code
-
p5.js Reference
Complete reference of all built-in functions and classes in p5.js
-
p5.js Get Started
Get started with p5.js - an introduction for beginners
-
p5.js Tutorials
Collection of tutorials for learning different aspects of p5.js
-
p5.js Examples
Collection of code examples demonstrating various features in p5.js
Video Tutorials
-
Beginner programming
course in p5.js
The Coding Train's introduction to programming with p5.js
-
Extended
beginner programming course in p5.js
Longer beginner programming course in p5.js
JavaScript Guides and References
-
MDN JavaScript Guide
Complete guide to all functionality in JavaScript
-
GeeksforGeeks JavaScript Wiki
Wiki with basic info about JavaScript
-
p5.js JavaScript basics
Guide to JavaScript fundamentals related to p5.js
-
JavaScript Best Practices
W3C guide to JavaScript best practices
Online Tools
-
Online Color Picker
Tool for selecting colors and getting their RGB/HEX values
-
KeyCode Finder
Online tool to see the code for individual keysExample:
if (keyIsDown(70)) { // The code inside the if statement is executed if "F" is pressed -
Text Compare
Online tool to find the differences between two versions of the same code
-
Online Drawing Program
Sketchpad - online drawing tool
-
Background Remover
Online program that can remove the background from an image
-
Function Plotter
Online tool to draw a function in a coordinate system
-
Photo Upscaler
Tool to improve the resolution of images
Multiplayer Resources
I have installed a server that anyone can use to create online games. When you update variables in your game, these values are automatically synchronized to other browsers logged into the same application on the server. It is also possible to add a game room, so you can have multiple different parallel games running on the same application. See the SpaceStratego example for how to do this.
The shared server is called "p5js-spaceman-server-29f6636dfb6c.herokuapp.com". You need to remember to update the application name so it is prefixed with your own initials plus the application name + version so the name is unique.
Here is an example of a game using this server:
https://code-a-game.github.io/advancedExamples.html
The code you need to write in the program is:
function preload() {
partyConnect("wss://p5js-spaceman-server-29f6636dfb6c.herokuapp.com", "jkh-MultiPlayerOOPv1");
me = partyLoadMyShared({ playerName: "observer" });
guests = partyLoadGuestShareds();
shared = partyLoadShared("shared", {
shared: { xSun: 0 },
});
}
Where "jkh-MultiPlayerOOPv1" should of course be replaced with your own initials + application name + version.