Public
Edited
Nov 3, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
canvasContainer = html`
<div class="canvas-container">
<div class="canvas-column">
<canvas id="canvas1" width="300" height="300"></canvas>
</div>
<div class="canvas-column">
<canvas id="canvas2" width="0" height="0"></canvas>
</div>
<div class="canvas-column">
<canvas id="canvas3" width="0" height="0"></canvas>
</div>
</div>
`
Insert cell
ezgifComOptimize13 = FileAttachment("ezgif.com-optimize (13).gif").image()
Insert cell
html`<iframe width="560" height="315" src="https://www.youtube.com/embed/kPgvjlXkNQE?si=Axcren6gPTPJIkYY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`

Insert cell
https://arxiv.org/pdf/2310.13724
Insert cell
NOTCH = {
const canvas = canvasContainer.querySelector("#canvas1");
var ctx;
var pixels;

var w = 212 * 4;
var h = 120 * 4;

var map = new Array(64 * 64 * 64);
var texmap = new Array(16 * 16 * 3 * 16);

function init() {
for (var i = 1; i < 16; i++) {
var br = 255 - ((Math.random() * 96) | 0);
for (var y = 0; y < 16 * 3; y++) {
for (var x = 0; x < 16; x++) {
var color = 0x966c4a;
if (i == 4) color = 0x7f7f7f;
if (i != 4 || ((Math.random() * 3) | 0) == 0) {
br = 255 - ((Math.random() * 96) | 0);
}
if (i == 1 && y < (((x * x * 3 + x * 81) >> 2) & 3) + 18) {
color = 0x6aaa40;
} else if (i == 1 && y < (((x * x * 3 + x * 81) >> 2) & 3) + 19) {
br = (br * 2) / 3;
}
if (i == 7) {
color = 0x675231;
if (x > 0 && x < 15 && ((y > 0 && y < 15) || (y > 32 && y < 47))) {
color = 0xbc9862;
var xd = x - 7;
var yd = (y & 15) - 7;
if (xd < 0) xd = 1 - xd;
if (yd < 0) yd = 1 - yd;
if (yd > xd) xd = yd;

br = 196 - ((Math.random() * 32) | 0) + (xd % 3) * 32;
} else if (((Math.random() * 2) | 0) == 0) {
br = (br * (150 - (x & 1) * 100)) / 100;
}
}

if (i == 5) {
color = 0xb53a15;
if ((x + (y >> 2) * 4) % 8 == 0 || y % 4 == 0) {
color = 0xbcafa5;
}
}
if (i == 9) {
color = 0x4040ff;
}
var brr = br;
if (y >= 32) brr /= 2;

if (i == 8) {
color = 0x50d937;
if (((Math.random() * 2) | 0) == 0) {
color = 0;
brr = 255;
}
}

var col =
(((((color >> 16) & 0xff) * brr) / 255) << 16) |
(((((color >> 8) & 0xff) * brr) / 255) << 8) |
(((color & 0xff) * brr) / 255);
texmap[x + y * 16 + i * 256 * 3] = col;
}
}
}

ctx = canvas.getContext("2d");

for (var x = 0; x < 64; x++) {
for (var y = 0; y < 64; y++) {
for (var z = 0; z < 64; z++) {
var i = (z << 12) | (y << 6) | x;
var yd = (y - 32.5) * 0.4;
var zd = (z - 32.5) * 0.4;
map[i] = (Math.random() * 16) | 0;
if (Math.random() > Math.sqrt(Math.sqrt(yd * yd + zd * zd)) - 0.8)
map[i] = 0;
}
}
}

pixels = ctx.createImageData(w, h);

for (var i = 0; i < w * h; i++) {
pixels.data[i * 4 + 3] = 255;
}

setInterval(clock, 100);
clock();
}

function clock() {
renderMinecraft();
ctx.putImageData(pixels, 0, 0);
}

var f = 0;
function renderMinecraft() {
var xRot =
Math.sin(((Date.now() % 10000) / 10000) * Math.PI * 2) * 0.4 +
Math.PI / 2;
var yRot = Math.cos(((Date.now() % 10000) / 10000) * Math.PI * 2) * 0.4;
var yCos = Math.cos(yRot);
var ySin = Math.sin(yRot);
var xCos = Math.cos(xRot);
var xSin = Math.sin(xRot);

var ox = 32.5 + ((Date.now() % 10000) / 10000) * 64;
var oy = 32.5;
var oz = 32.5;

f++;
for (var x = 0; x < w; x++) {
var ___xd = (x - w / 2) / h;
for (var y = 0; y < h; y++) {
var __yd = (y - h / 2) / h;
var __zd = 1;

var ___zd = __zd * yCos + __yd * ySin;
var _yd = __yd * yCos - __zd * ySin;

var _xd = ___xd * xCos + ___zd * xSin;
var _zd = ___zd * xCos - ___xd * xSin;

var col = 0;
var br = 255;
var ddist = 0;

var closest = 32;
for (var d = 0; d < 3; d++) {
var dimLength = _xd;
if (d == 1) dimLength = _yd;
if (d == 2) dimLength = _zd;

var ll = 1 / (dimLength < 0 ? -dimLength : dimLength);
var xd = _xd * ll;
var yd = _yd * ll;
var zd = _zd * ll;

var initial = ox - (ox | 0);
if (d == 1) initial = oy - (oy | 0);
if (d == 2) initial = oz - (oz | 0);
if (dimLength > 0) initial = 1 - initial;

var dist = ll * initial;

var xp = ox + xd * initial;
var yp = oy + yd * initial;
var zp = oz + zd * initial;

if (dimLength < 0) {
if (d == 0) xp--;
if (d == 1) yp--;
if (d == 2) zp--;
}

while (dist < closest) {
var tex = map[((zp & 63) << 12) | ((yp & 63) << 6) | (xp & 63)];

if (tex > 0) {
var u = ((xp + zp) * 16) & 15;
var v = ((yp * 16) & 15) + 16;
if (d == 1) {
u = (xp * 16) & 15;
v = (zp * 16) & 15;
if (yd < 0) v += 32;
}

var cc = texmap[u + v * 16 + tex * 256 * 3];
if (cc > 0) {
col = cc;
ddist = 255 - (((dist / 32) * 255) | 0);
br = (255 * (255 - ((d + 2) % 3) * 50)) / 255;
closest = dist;
}
}
xp += xd;
yp += yd;
zp += zd;
dist += ll;
}
}

var r = (((col >> 16) & 0xff) * br * ddist) / (255 * 255);
var g = (((col >> 8) & 0xff) * br * ddist) / (255 * 255);
var b = ((col & 0xff) * br * ddist) / (255 * 255); // + (255 -

pixels.data[(x + y * w) * 4 + 0] = r;
pixels.data[(x + y * w) * 4 + 1] = g;
pixels.data[(x + y * w) * 4 + 2] = b;
}
}
}

init();
return 10;
}
Insert cell
Insert cell
// exec_magic_iframe("https://complex-analysis.com/")
Insert cell
exec_magic_iframe("https://meltingasphalt.com/interactive/outbreak/")
Insert cell
// exec_magic_iframe(
// "https://github.com/norvig/pytudes/blob/main/ipynb/ProbabilitySimulation.ipynb"
// )
Insert cell
// exec_magic_iframe("https://www.keijiro.tokyo/WebGPU-Test/MetavidoVFX/")
Insert cell
// html`<video autoplay width="900">

// <source src="https://static.observableusercontent.com/files/99cbc03c65d5a368fa6fe4777bbdd6ee47268250bc2519fdb2fedc7900c4d92a4fa34f2b16f31fc8a09bb7ac1ea941f14958a9fb20ab39ef3f5db400194e0a96?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27unreal_demos.mp4" />

// Download the
// <a href="/media/cc0-videos/flower.webm">WEBM</a>`
Insert cell
unreal_demos = FileAttachment("unreal_demos.mp4")
Insert cell
video_ = html`<video src="unreal_demos.mp4>`
//magic video - converts images to 3d animation - explorable
Insert cell
import { exec_magic_iframe } from "@roboticsuniversity/dynamicland"
Insert cell
voxelPainter
//why are embed and share different
Insert cell
Insert cell
Insert cell
PROGRESS = {

}
Insert cell
MODULES = {
return (
[
"stixels",
"policy",
"5k arm -> 20k find a use - spec out robotics facotry 1 robot that can assemble more - make toy-robots for everyone -> some researcher will figure out how to make mega man x"
].length / 16
);
}
Insert cell
//import { canvas, draw_to_screen } from "e47706094720cc09"

// base pricing - 95 for course + tools

// addon = 141 for nanosaur w/ free course software

// addon = arm for 141 - or get frame waveshare/whoever - contrb tolerbot


//pricing = 95, 141, or 300
Insert cell
output_three = _canvas
Insert cell
render_the_cavas()
Insert cell
import { _canvas, render_the_cavas } from "@roboticsuniversity/three-js-canvas"
Insert cell
import {
voxelPainter,
pointerAndObjects,
cube,
height,
scene,
camera,
renderer,
THREE
} from "@roboticsuniversity/voxelpainter"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// <iframe src="https://lidar-now.scale.com/scene?title=Scene%20%231" class="absolute inset-0 w-full h-full bg-black"></iframe>
Insert cell
Insert cell
Insert cell
Insert cell
//import hashirama/webgpu - > cleanup existing simplegpu
// make daigrams fro (hoardw arflux stiselxe ) - 1 day thing

//https://www.youtube.com/watch?v=FvmTSpJU-Xc
Insert cell
Insert cell
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.
Learn more