Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { Hono } from "npm:hono@3";
import { cors } from "npm:hono/cors";
import { marked } from "npm:marked";
const app = new Hono();
app.use('*', cors({
origin: '*',
allowMethods: ['GET', 'POST'],
allowHeaders: ['Content-Type'],
}));
const markdown = marked(`
- [ ] create bacteria
- [x] read bacteria
- [x] update bacteria
- [ ] delete bacteria
at ms2, we're collecting mge vs. bacteria data over time, to build models that help us create, read, update, and delete bacteria from anywhere.
`)
const html = `<!DOCTYPE html>
<html>
<head>
<title>create, read, update, and delete bacteria from anywhere</title>
<link rel="icon" href="https://f2.phage.directory/blogalog/phageray.png" type="image/png">
<meta property="og:image" content="https://f2.phage.directory/blogalog/ms2-cover.png">
<meta name="twitter:image" content="https://f2.phage.directory/blogalog/ms2-cover.png">
<script src="https://cdn.tailwindcss.com" > </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
<style type="text/tailwindcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: 'Azeret Mono', monospace;
@apply text-sm;
}
.container {
@apply flex flex-col items-center justify-center pt-16;
}
ul {
@apply mb-8;
}
p {
@apply mb-4;
}
</style>
</head>
<body>
<script type="application/processing" data-processing-target="animation">
int maxLines = 500;
int baseLineCount = 5;
float maxLength;
ArrayList<RadialLine> baseLines;
ArrayList<RadialLine> additionalLines;
ArrayList<RadialLine> fadingLines;
float t = 0;
float hexagonSize = 50;
void setup() {
size(400, 400);
maxLength = width / 2;
background(255);
strokeWeight(2);
frameRate(60);
baseLines = new ArrayList<RadialLine>();
additionalLines = new ArrayList<RadialLine>();
fadingLines = new ArrayList<RadialLine>();
for (int i = 0; i < baseLineCount; i++) {
addNewLine(true);
}
}
void draw() {
background(255);
translate(width/2, height/2);
// Draw all lines
updateLines(baseLines, true);
updateLines(additionalLines, false);
updateFadingLines();
// Draw the complex central shape without fill
drawComplexCentralShape();