gkucmierz

import { getContext, onResize, onPointerDown } from 'canvas';

// --- CONFIGURATION CONSTANTS ---
const MAX_POINTS = 50000;             // Total number of fractal points to generate
const STAGE_1_POINTS = 15;            // Number of points in slow educational phase
const STAGE_1_DELAY_MS = 400;         // Delay between steps in slow phase (milliseconds)
const STAGE_2_POINTS = 100;           // Number of points in normal phase (1 point/frame)
const STAGE_3_POINTS = 500;           // Number of points in medium phase (10 points/frame)
const STAGE_4_SPEED = 250;            // Number of points generated per frame in fast phase

gkucmierz

import { getContext, onResize } from 'canvas';

// Obtain the 2D rendering context
const ctx = getContext('2d');

let width = 400;
let height = 400;
let theta = 0; // Current angle in radians
let animationSpeed = 0.015; // Speed of rotation
let isAnimating = true;

gkucmierz

// Visualization of Euler's Identity e^(i * pi) = -1
// Animate the point e^(i * theta) moving along the unit circle in the complex plane.

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function main() {
  console.log("=== EULER'S IDENTITY VISUALIZATION ===");
  console.log("Euler's Formula: e^(i * theta) = cos(theta) + i * sin(theta)");
  console.log("For theta = pi: e^(i * pi) = -1 + 0i = -1\n");
  await sleep(1500);

gkucmierz

// Dichroic Glass X-Cube Optical Prism with Interactive Drag-to-Rotate
// Built using Three.js inside Instacode Web Worker

import { canvas, onResize, getDisplaySize, onPointerDown, onPointerMove, onPointerUp } from 'canvas';
import * as THREE from 'three';

// ==========================================
// CONFIGURATION CONSTANTS (Adjust these to customize your X-Cube!)
// ==========================================
const BG_COLOR = 0xf3f2f8;          // Soft light studio background color (#f3f2f8)

gkucmierz

// Glassmorphism 3D Rotating Cube for Instacode
// Features: Dual-cube perspective engine, global depth sorting, Phong lighting, and specular glass gradients

import { canvas, getContext, onResize } from 'canvas';
const ctx = getContext('2d');

let width = 600;
let height = 400;

// Handle canvas resizing

gkucmierz

// Mandelbrot Explorer for Instacode
// Features: Smooth zoom animation, continuous coloring, and HUD info display

import { canvas, getContext, onResize } from 'canvas';
const ctx = getContext('2d');

let width = 600;
let height = 400;

// Dynamic configuration

gkucmierz

import { canvas, onResize } from 'canvas';

const ctx = canvas.getContext('2d');

let width = 300;
let height = 150;

// Handle canvas resizing automatically
onResize((w, h) => {
  width = w;

gkucmierz

// https://www.youtube.com/live/H7jdq0elNoY?si=NNHutyJiNx5E8IPz&t=2085
// it is not possible to link this gist on youtube, bcs their links policy,
// so linked this gist with YT video

import { canvas, onResize } from 'canvas';
import { mobius } from '@gkucmierz/utils@3.2.0';

const ctx = canvas.getContext('2d');

// --- Configuration Constants ---

gkucmierz

import { canvas, onResize } from 'canvas';
import { mobius } from '@gkucmierz/utils@3.2.0';

const ctx = canvas.getContext('2d');

// --- Configuration Constants ---
const BG_COLOR = '#0f172a'; // Background color of the canvas (Slate 900)
const MAX_X = 250;
const MAX_Y = 0;           // Maximum limit on Y axis (set to 0 or -1 for auto-scaling)
const STEP_X = 20;         // Grid step size for X axis (set to 0 for auto-scaling)

gkucmierz

import { canvas, onResize } from 'canvas';
const ctx = canvas.getContext('2d');

onResize((width, height) => {
  // Adjust drawing buffer size to match splitter dimensions
  canvas.width = width;
  canvas.height = height;

  // 1. Background - elegant, dark navy (cyber-dark style)
  ctx.fillStyle = '#090d16';