Hosting

Vercel and GitHub Pages both host websites for free, but they serve very different purposes: GitHub Pages is strictly for static websites (HTML, CSS, and client-side JavaScript only) and is ideal for portfolios, blogs, and simple projects, while Vercel is a full-stack hosting platform that supports modern frameworks (like React and Next.js), offers free serverless APIs even on the free plan, and allows real data storage only when you connect an external database (such as Supabase, MongoDB, or Vercel KV), making Vercel the better choice for dynamic, production-ready web applications and GitHub Pages the simplest choice for static sites.

gh-pages

Vercel

The perfect starting place for your web app or personal project. Free forever.

VS code copilot tips

2024

Posenet, see e.g. p5js ML5
install and add extension, youtube
“Now that you’ve signed up for GitHub Copilot and activated the extension, let’s verify that it’s actually active.”
- Open Visual Studio Code.
- Notice the GitHub Copilot icon in the status bar, which indicates that GitHub Copilot is active.
- Notice also chat-message icons on the left bar.

Javascript tips

Keyboard - space bar

How to disable the page scroll down when i pressed the spacebar? See:

window.addEventListener('keydown', function(e) {
  if(e.keyCode == 32 && e.target == document.body) {
    e.preventDefault();
  }
});

P5 Full Screen

Otherwise in some mobile phones dragging scrolls the page etc., see full screen.

// full screen: https://editor.p5js.org/slow_izzm/sketches/lgzf4tJk6
function touchStarted() {
	let fs = fullscreen();
	if (!fs) {
	  fullscreen(true);
	}
}

P5 Encoding

If json created in R, see json-encoding tip here.

data.json <- jsonlite::toJSON(data.r.list)
con <- file(output.editfile,encoding="UTF-8")
write(data.json, file=con)

working blog post here: Books.
character encoding in p5, see a tip here and example below:

<div id="sketch-holder-jt-books"></div> // your canvas names

<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script> 

<script>

... your blog post script goes here.

canvas.parent('sketch-holder-jt-books')

...

</script>

P5 audio

Time to time AudioContext was not allowed to start. Add following code to js-file.

// Errors messages (CTRL SHIFT i) Chrome Developer Tools:
// The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
// DevTools failed to load SourceMap: Could not load content for https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
function touchStarted() {
  if (getAudioContext().state !== 'running') {
    getAudioContext().resume();
  }
}

p5.js audio

Sourced p5 libraries: https://cdnjs.com/libraries/p5.js

Sourcing js code on blog post

<div id="sketch-holder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="/<blogpost or page>/<jscodefile>"></script>

For example, if page is called pokenappis.md your code looks like this:

<div id="sketch-holder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="/pokenappis/test.js"></script>

Note, this is a test page: pokenappis

Local Server

Local server can be created different ways, see: https://github.com/processing/p5.js/wiki/Local-server. However, currently my favourite is

web-server-for-chrome/

Note: testing locally is easier, if p5.js coding is tested with local HTML file. Finally, it can be shown as referenced js or in iFrame.

Chrome Developer tools

Use the View / Developer / Developer Tools menu in Chrome to open the developer tools window.

CTRL - SHIFT - i
breakpoints
variable values
… more information here.

p5 editor

I have been using Notepad++ and 200! Ok! Web server for Chrome with additional html file for local testing. However, better color coding and instant testing in local service possible with:

Processing 3.5.4

Problem: if you want mix html code and p5, e.g. at hosted Github pages.

select install library and tab “Modes” p5.js mode
Give Java access.
See also “Examples” tab, if something interesting available

Visual Code - vscode

Visual Studio Code install with defaults.
Go to p5.vscode and install plug-in – note that VScode should be installed first. “p5.vscode helps you create p5.js projects in Visual Studio Code. It also includes autocompletion, a simple tool to browse and install third-party p5 libraries, and the Live Server extension.”

This seems to be perfect ✔ for testing and learning, see more instructions here:

ctrl-shift-p on Windows and then start typing and select Create p5.js Project.
When creating a new project, please select an empty folder.
To install p5 libraries: Open the Command Palette, then start typing and select Install p5 Contributor Library
instead of git repo, I decided to store p5 experiments to dropbox /2021 folder (simplicity) to keep these code safe (whether anything important is created or not).

click the "Go Live" button p5 vs code test Fig) “Go Live” button facilates debugging and testing and port:5501 to close it ↻. Next p5 project, make experiments in VScode and time to time & finally copy js code to repo and push code to server.

Change default liveserver path by writing to “liveserver” (CTRL+SHIFT+P) and type “Preferences”. View-Command Palette: “Liveserver: change workspace” or
- Create a folder under the root of the site, called .vscode
- Add a file there, called settings.json
- Edit the file and add the following (thanks to nitech) - but I did something work but this was not working for:

{
    "liveServer.settings.root": "/git/christmaself"
}

Preview - markdown md: To open a separate preview window, use the keyboard shortcut Ctrl+Shift+V

Create new p5 project in VS

I have created template to dropbox folder vscode/p5vscode.

Copy and rename it. It contains template for config, sketch, index and libraries.
Test it in local server.
Start coding, e.g. 3/2021 I started vscode/p5vscode_animation_csv project to animate tablet pen drawings created in my Processing drawing Java application.

tips

auto indent, i.e. prettify code as: shift-alt-f how-do-you-format-code-in-visual-studio-code-vscode
canvas id and js code, see js code to Jekyll post. Time to time I close views by accident. Get views back as
Git and Dropbox folders have projects, it is possible to open multiple projects in vscode. <!–

arrows: https://www.toptal.com/designers/htmlarrows/arrows/

Symbols, these works well: https://www.w3schools.com/charsets/ref_utf_arrows.asp

–>

View → Appearance ↘ Show Side Bar ctrl-B
View → Appearance ↘ Show Panel ctrl-J

Other stuff

View → Control Palette ctrl-shift-p ↘ (write e.g. Install p5 Contributor Library)

Edit index.html created earlier by adding sketch-holder-div to body (this is used in _posts jekyll and libraries needed) for example as

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="testlocal_html/style.css">
  
  </head>

  <body>
    <div id="sketch-holder-jt"></div>
    <script src="sketch.js"></script>
  </body>
</html>

Symbols 🐇🐇🐇🐇🐇🐇🐇🐇

∎

Leaflet

an open-source JavaScript library for mobile-friendly interactive maps.

Glitch

Glitch
Glitch example map.

P5 embed

Note: code copied in p5-editor, originally developed by plancP5:

Fixed size: embedded iframe 720x720px as

iFrame shared, simply click share-button in online editor and select embedded share.

P5 in blog

Discussion: P5 in blog post - discourse. Only one P5 frame per blog post, see e.g. this discussion.

P5 graphics

Angle between two vectors were calculated to check whether there is a need to stop a dude or not, see Christmaself. angleBetween: note use the most recent p5 as (2022/01):

    <!--- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>  NEW P5!! --->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

Note that image(img); do not work anymore. Use instead: image(img, 0, 0);.

Flip image using scale.
splice
rectMode

Embed multiple sketches, original example from: happycoding.io

Gmail - inbox cleaning

search files larger than 8mB as “size:8000000”

Tags: js p5 keyboard vscode git liveserver path copilot Vercel

p5.js tips

JS tips