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

annotate graphics/index.js @ 216:e82b80b24012 default tip

[MrJuneJune] Make webp translate background job.

author	June Park <parkjune1995@gmail.com>
date	Sat, 28 Feb 2026 21:04:43 -0800
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