Working with html/css and p5.js

GoToLoop · May 7, 2019, 10:24pm

Some p5js online sketches w/ DOM styled text:

gist.github.com

https://gist.github.com/GoSubRoutine/9aa9cd00000e331612c8e557b5dd28f0

.block

height: 325

flower.json

{
  "religion": [{
    "Arceusism": "Worshippers of Arceus, the creator of all Pokémon. See also Giratinism.",
    "The Babarambaba Cult": "Worshippers of Mother Nature, personified in a head of lettuce named Ralph.",
    "Bajoran religion": "Star Trek: Deep Space Nine.",
    "Bandosianism": "RuneScape's war religion.",
    "Banjoism": "Elan's religion in The Order of the Stick.",
    "Beism": "Giles Goat-Boy, John Barth.",
    "Beliar": "Gothic (video game), god of darkness, death and chaos and lord of lightning and earth.",
    "Bene Gesserit": "Dune series."

This file has been truncated. show original

index.html

<!DOCTYPE html>
<meta charset=UTF-8>

<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

There are more than three files. show original

gist.github.com

https://gist.github.com/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

.block

height: 200

astros.json

{ "number": 6, "message": "success",
  "people": [
    { "craft": "ISS", "name": "Peggy Whitson" },
    { "craft": "ISS", "name": "Fyodor Yurchikhin" },
    { "craft": "ISS", "name": "Jack Fischer" },
    { "craft": "ISS", "name": "Sergey Ryazanskiy" },
    { "craft": "ISS", "name": "Randy Bresnik" },
    { "craft": "ISS", "name": "Paolo Nespoli" }
  ]
}

index.html

<script async src=http://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

There are more than three files. show original

gist.github.com

https://gist.github.com/GoSubRoutine/f13a55e7cfaabea6aa6bdf028c1f2f1e

.block

height: 260
scrolling: yes
border: yes
license: cc-by-4.0

index.html

<!DOCTYPE html>

<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js

/**
 * JSON Wikipedia CORS Origin (v1.1.2)
 * GoToLoop (2019-Jan-21)
 *
 * https://Discourse.Processing.org/t/issue-with-loadjson/7682/4
 * https://Bl.ocks.org/GoSubRoutine/f13a55e7cfaabea6aa6bdf028c1f2f1e
 */

"use strict";

This file has been truncated. show original

Topic		Replies	Views
How can I put html text on top of a p5.js script? Coding Questions	0	272	October 26, 2020
Merging Canvas With HTML Website Coding Questions	3	627	September 28, 2019
My paragraph '<p> </p>' is not uder the sketch Coding Questions	1	403	April 17, 2019
How does the canvas mix with html? Coding Questions	4	625	October 19, 2019
Help with integrating a Javascript p5 file into HTML Beginners	2	607	May 17, 2020

Working with html/css and p5.js

Related topics