eldh

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div

marquizzo

Letter-casing:

CAPITALS = Global coordinates
lowercase = relative coords

Line Commands:

M x y: Move to
m x y: move to, relative to last position
L x y: Line to
l x y: line to, relative to last position
H x: Horizontal line to position x\

sanzaru

import SwiftUI

struct CollapsibleDemoView: View {
    var body: some View {
        VStack(spacing: 10) {
            HStack {
                Text("Here we have some fancy text content. Could be whatever you imagine.")
                Spacer()
            }
            .padding(.bottom)

sanzaru

import SwiftUI

struct Collapsible<Content: View>: View {
    @State var label: () -> Text
    @State var content: () -> Content
    
    @State private var collapsed: Bool = true
    
    var body: some View {
        VStack {

magnuskahr

import SwiftUI

struct EnumPicker<T: Hashable & CaseIterable, V: View>: View {
    
    @Binding var selected: T
    var title: String? = nil
    
    let mapping: (T) -> V
    
    var body: some View {

mattdesl

global.THREE = require("three");

const canvasSketch = require('canvas-sketch');
const Random = require('canvas-sketch-util/random');

const gradientHeight = 512;
const settings = {
  dimensions: [ 2048, gradientHeight * 2 ]
};

rauschma

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
• Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)

mattdesl

const canvasSketch = require("canvas-sketch");
const { GUI } = require("dat.gui");

const data = {
  background: "#de6060",
  number: 0.35
};

const settings = {
  dimensions: [2048, 2048],

mattdesl

Modules for Creative Coding

This workshop encourages students to make use of npm modules to build complex and interesting artworks.

If you find a module you want to use, like riso-colors, you can install it from your project folder like so:

npm install riso-colors

silvesthu

GPU Optimization for GameDev

Graphics Pipeline / GPU Architecture Overview

• 2011 - A trip through the Graphics Pipeline 2011
• 2013 - Performance Optimization Guidelines and the GPU Architecture behind them
• 2015 - Life of a triangle - NVIDIA's logical pipeline
• 2015 - Render Hell 2.0
• 2016 - How bad are small triangles on GPU and why?
• 2017 - GPU Performance for Game Artists
• 2019 - Understanding the anatomy of GPUs using Pokémon