/home/mrjunejune/zenbu: graphics/index.js annotate

annotate graphics/index.js @ 279:b3b547563ec7

Add Google connector service and agent wiki Implement the C/Seobeo Google Drive and Gmail connector with encrypted OAuth storage, Zenbu authentication, browser testing, AI tool discovery, chunked HTTP decoding, and Bazel coverage. Consolidate repository guidance into progressive wiki documentation and enforce arena-first allocation for new first-party C code. Co-authored-by: Copilot <[email protected]> Copilot-Session: 84c338fd-0939-4bb3-b7f3-1062eb213e5d

author	MrJuneJune <me@mrjunejune.com>
date	Mon, 17 Aug 2026 22:22:36 -0700
parents	8ceb5d3c6bdd
children

rev	line source
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	1 const SCREEN_WIDTH = 600;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	2 const SCREEN_HEIGHT = 600;
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	3 const PIXEL_SIZE = 1;
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	4 const FRAME = 60
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	5
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	6 game.width = SCREEN_WIDTH;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	7 game.height = SCREEN_HEIGHT;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	8
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	9 const ctx = game.getContext("2d");
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	10
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	11 function drawBackground() {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	12 ctx.fillStyle = "black";
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	13 ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	14 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	15
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	16 function drawPixel({x, y}) {
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	17 ctx.fillStyle = "pink";
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	18 ctx.fillRect(x * SCREEN_WIDTH, y * SCREEN_HEIGHT, PIXEL_SIZE, PIXEL_SIZE);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	19 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	20
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	21 function normalize({x, y}) {
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	22 return {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	23 x: ((x + 1) / 2),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	24 y: (1 - ((y + 1) / 2)),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	25 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	26 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	27
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	28 function threeDtotwoD({x, y, z}) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	29 return {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	30 x: x/z,
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	31 y: y/z
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	32 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	33 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	34
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	35 function drawLine({x, y}, {x2, y2}) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	36 ctx.beginPath();
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	37 ctx.moveTo(x * SCREEN_WIDTH, y * SCREEN_HEIGHT);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	38 ctx.lineTo(x2 * SCREEN_WIDTH, y2* SCREEN_HEIGHT);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	39 ctx.lineWidth = 3;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	40 ctx.strokeStyle = "red";
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	41 ctx.stroke();
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	42 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	43
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	44
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	45 // function generateHeartPoints(resolution = 0.008) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	46 // const points = [];
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	47 // // Nordstrom needs a slightly higher threshold because the
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	48 // // gradient of the cubic is steeper in some areas.
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	49 // const threshold = 0.0001;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	50 //
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	51 // for (let x = -1.5; x <= 1.5; x += resolution) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	52 // for (let y = -1.5; y <= 1.5; y += resolution) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	53 // for (let z = -1.5; z <= 1.5; z += resolution) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	54 //
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	55 // const x2 = x * x;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	56 // const y2 = y * y;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	57 // const z2 = z * z;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	58 // const z3 = z2 * z;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	59 //
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	60 // // Nordstrom Equation: (2x² + y² + z² - 1)³ - (1/10)x²z³ - y²z³ = 0
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	61 // const inner = (2 * x2) + y2 + z2 - 1;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	62 // const value = Math.pow(inner, 3) - (0.1 * x2 * z3) - (y2 * z3);
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	63 //
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	64 // if (Math.abs(value) < threshold) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	65 // // Keep the jitter for that organic "floating dust" look
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	66 // points.push({
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	67 // x: x + (Math.random() - 0.5) * resolution,
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	68 // y: y + (Math.random() - 0.5) * resolution,
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	69 // z: z + (Math.random() - 0.5) * resolution
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	70 // });
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	71 // }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	72 // }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	73 // }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	74 // }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	75 // return points;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	76 // }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	77
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	78 function generateHeartPoints(resolution = 0.01) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	79 const points = [];
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	80 const threshold = 0.001;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	81
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	82 for (let x = -1.5; x <= 1.5; x += resolution) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	83 for (let y = -1.5; y <= 1.5; y += resolution) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	84 for (let z = -1.5; z <= 1.5; z += resolution) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	85
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	86 const x2 = x * x;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	87 const y2 = y * y;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	88 const z2 = z * z;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	89 const z3 = z2 * z;
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	90
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	91 const inner = x2 + (9/4) * y2 + z2 - 1;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	92 const value = Math.pow(inner, 3) - x2 * z3 - (9/80) * y2 * z3;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	93
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	94 if (Math.abs(value) < threshold) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	95 points.push({
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	96 x: x + (Math.random() - 0.5) * 0.01,
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	97 y: y + (Math.random() - 0.5) * 0.01,
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	98 z: z + (Math.random() - 0.5) * 0.01
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	99 });
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	100 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	101 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	102 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	103 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	104 return points;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	105 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	106
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	107 let points = generateHeartPoints();
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	108 const intial_start_z = 2;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	109 points = points.map(point => ({...point, x: point.x + intial_start_z}));
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	110 // const points = [
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	111 // {x: -0.25, y: 0.25, z: 0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	112 // {x: -0.25, y: -0.25, z: 0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	113 // {x: 0.25, y: -0.25, z: 0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	114 // {x: 0.25, y: 0.25, z: 0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	115 //
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	116 // {x: -0.25, y: 0.25, z: -0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	117 // {x: -0.25, y: -0.25, z: -0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	118 // {x: 0.25, y: -0.25, z: -0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	119 // {x: 0.25, y: 0.25, z: -0.25},
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	120 // ]
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	121 // const vortexs = [
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	122 // [0, 1, 2, 3],
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	123 // [4, 5, 6, 7],
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	124 // [0, 4],
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	125 // [1, 5],
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	126 // [2, 6],
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	127 // [3, 7],
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	128 // ]
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	129
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	130 function rotate_xy({x, y, z}, angle) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	131 return {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	132 x: x * Math.cos(angle) - y * Math.sin(angle),
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	133 y: x * Math.sin(angle) + y * Math.cos(angle),
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	134 z: z
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	135 };
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	136 }
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	137
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	138 function rotate_xz({x,y,z}, angle) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	139 return {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	140 x: x * Math.cos(angle) - z*Math.sin(angle),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	141 y: y,
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	142 z: x * Math.sin(angle) + z*Math.cos(angle),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	143 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	144 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	145
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	146 function rotate_yz({x, y, z}, angle) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	147 return {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	148 x: x,
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	149 y: y * Math.sin(angle) + z * Math.cos(angle),
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	150 z: y * Math.cos(angle) - z * Math.sin(angle)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	151 };
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	152 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	153
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	154 function move_z(point, dz) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	155 return {...point, z: point.z + dz}
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	156 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	157
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	158 function move_y(point, dy) {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	159 return {...point, y: point.y + dy}
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	160 }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	161
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	162 let dz = 0;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	163 let dt = 1/FRAME;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	164 let angle = 0;
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	165 const fontPoint = {x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT * 0.3};
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	166
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	167 function drawAnimation() {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	168 drawBackground();
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	169 dz -= 1 * dt;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	170 angle += 2Math.PIdt*0.2;
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	171
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	172 // Texts...
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	173 ctx.font = "60px serif";
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	174 ctx.textAlign = "center"; // Ensures the point is the middle of the text
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	175 ctx.textBaseline = "middle";
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	176 ctx.fillStyle = "pink";
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	177 ctx.fillText("Heart!", fontPoint.x, fontPoint.y);
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	178
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	179 // Hearts...
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	180 for (var point of points)
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	181 {
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	182 const newPoint = normalize(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	183 threeDtotwoD(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	184 move_z(rotate_yz(rotate_xz(rotate_xy(point, angle), angle), angle), dz)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	185 // move_z(point, dz)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	186 )
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	187 );
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	188 drawPixel(newPoint);
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	189 }
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	190
162 8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	191 // for (var vortex of vortexs)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	192 // {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	193 // for (let i = 0; i < vortex.length; i++)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	194 // {
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	195 // const newPoint = normalize(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	196 // threeDtotwoD(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	197 // move_z(rotate_xz(points[vortex[(i+1)%vortex.length]], angle), dz)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	198 // )
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	199 // );
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	200
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	201 // drawLine(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	202 // normalize(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	203 // threeDtotwoD(
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	204 // move_z(rotate_xz(points[vortex[i]], angle), dz)
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	205 // )
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	206 // ),
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	207 // {x2: newPoint.x, y2: newPoint.y}
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	208 // );
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	209 // }
8ceb5d3c6bdd Playing around with some random graphcis. June Park <parkjune1995@gmail.com> parents: 68 diff changeset	210 // }
68 70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	211 setTimeout(() => drawAnimation(), 1000/60)
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	212 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	213
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	214 drawAnimation()
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	215
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool. June Park <parkjune1995@gmail.com> parents: diff changeset	216