Platform
Resources
Pricing
Sign in
Get started
Fil
Vocateur.
Workspace
Fork
Published
2 collections
By
Fil
Edited
Mar 28, 2022
8 forks
21 stars
Insert cell
Insert cell
Insert cell
viewof
camera
=
md
`<input type=checkbox>`
Insert cell
function
getimagedata
(
v
)
{
const
w
=
Math
.
min
(
400
,
v
.
width
||
Infinity
)
,
h
=
Math
.
min
(
300
,
v
.
height
||
Infinity
)
;
const
context
=
DOM
.
context2d
(
w
,
h
,
1
)
;
context
.
drawImage
(
v
,
0
,
0
,
w
,
h
)
;
return
context
.
getImageData
(
0
,
0
,
w
,
h
)
;
}
Insert cell
Insert cell
Insert cell
GPU
=
require
(
"gpu.js@2.15.2"
)
Insert cell
// the kernel runs for each pixel, with:
// - this.thread.x = horizontal position in pixels from the left edge
// - this.thread.y = vertical position in pixels from the bottom edge (*opposite of canvas*)
kernel
=
function
(
data
,
wobble
)
{
var
x
=
this
.
thread
.
x
,
y
=
this
.
thread
.
y
;
//var data = this.constants.data;
// wouldn't be fun if the kernel did _nothing_
x
=
Math
.
floor
(
x
+
wobble
*
Math
.
sin
(
y
/
10
)
)
;
y
=
Math
.
floor
(
y
+
wobble
*
Math
.
cos
(
x
/
10
)
)
;
var
n
=
4
*
(
x
+
this
.
constants
.
w
*
(
this
.
constants
.
h
-
y
)
)
;
this
.
color
(
data
[
n
]
/
256
,
data
[
n
+
1
]
/
256
,
data
[
n
+
2
]
/
256
,
1
)
;
}
Insert cell
render
=
new
GPU
.
GPU
(
{
mode
:
"gpu"
}
)
.
createKernel
(
kernel
)
.
setConstants
(
{
w
:
image
.
width
,
h
:
image
.
height
}
)
.
setOutput
(
[
image
.
width
,
image
.
height
]
)
.
setGraphical
(
true
)
Insert cell
Insert cell
draw
=
{
var
fpsTime
=
performance
.
now
(
)
;
mutable
fps
=
60
;
while
(
true
)
{
render
(
image
.
data
,
14
*
Math
.
sin
(
Date
.
now
(
)
/
400
)
)
;
yield
render
.
getCanvas
(
)
;
mutable
fps
=
(
1
+
mutable
fps
)
*
(
1
+
0.000984
*
(
fpsTime
-
(
fpsTime
=
performance
.
now
(
)
)
)
)
;
}
}
Insert cell
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Try it for free
Learn more
Fork
View
Export
Listed in...
GPU.js
Fil
Hello
Fil
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
url
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
camera
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
getimagedata
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
image
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
GPU
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
kernel
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
render
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
fps
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
draw
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML