video tutorials

[pandrr]

checklist

• red lines app for screen restriction
• is cables parameter panel visible ?
• move monitor down to bottom position
• check fps in obs stats
• undev sign/check positioning

inspiration

• https://www.instagram.com/etinjcb/?hl=en
• https://www.youtube.com/@akella_

[pandrr]

TODO

• depth buffer tutorial
• standalone: external editor
• new html ops!
• native standalone ops
• comp ops?
• subpatchops
• external canvas/popout canvas...
• cables themes
• stackvalues
• socket cluster
• exported html - variables/triggers / hide sidebar..,.
• exported html - scrolling page
• exported html - multiple patch page
• simple anims: boolanim/simpleanim/inOutIn anim?
• handlebars
• socketcluster

shorts:

• math in opsearch
• abbreviations RNA
• shift enter mutliple
• insert variables or triggers?
• op crashed - edit again
• replace link when dragging new link onto it
• reroute
• html ctrl hover
• overlay toggle
• f key flow mode
• create subpatch op
• extend title
• assign var directly to port
• converter ops
• y to cut cables
• mohamad shooting thing
• triggernumber to remember the last value
• arraybuffer

[pandrr]

• from discord: Franck — Today at 11:30
  Ok you wanted more ideas, here are a few:

Beginner Level:

Bite-Size Playlist: Update the existing series with quick, focused tutorials where needed.

Introduction Playlist: Refresh the beginner series with updated content where needed.

Custom User Interface Elements:
Best practices for designing and integrating UI components like sliders, buttons, and 3D navigation menus to enhance user interaction in cables.gl patches.

Responsive Design Techniques:
Tutorials on creating cables.gl projects that adapt to various screen sizes and aspect ratios for better usability on mobile and desktop.
Examples include:
Scaling photos or movie files dynamically to fit screen sizes.
Adaptive grid layouts for images, galleries, or content blocks.
Textures that adjust seamlessly without distortion.
Responsive placement and scaling of 3D objects in a scene.
Ensuring smooth performance across devices by adjusting levels of detail.

Interactive Image Elements:
Image comparison sliders (e.g., before-and-after effects).
Interactive hotspots on images (tooltips or popups when hovering).
3D-like image effects, such as tilt or depth-based interactions.
(Note: Some aspects have been covered in existing tutorials.)

Designing 3D Elements for Web Pages:
Show how to create 3D elements and integrate them into popular no-code frameworks like Framer or Webflow.
(Example: https://www.youtube.com/watch?v=8bqkvfRuFYk)

Working with Text in Cables:
A walkthrough of text operators, including strengths/weaknesses, 3D text, paragraphs, using external text, handling limitations, and even working with exotic glyphs.
YouTube
Spline
Designing a 3D website with Spline and Framer
Image
Franck — Today at 11:36
Medium Level:

Optimization Techniques:
Tips and strategies for improving performance in complex patches, focusing on resource management and efficiency.

Debugging and Troubleshooting:
A guide to identifying and resolving common issues in cables.gl patches.

Dynamic Content Loading:
Tutorials on building patches that load images, videos, or 3D assets dynamically, with a focus on handling large datasets or user inputs.

Interactive Storytelling:
Basics for designing narrative-driven experiences where user interaction drives the story forward, incorporating branching logic and multimedia.

Scroll-Based Animations:
Parallax effects for images, animations, 3D elements, and text.
Animated reveals, fades, and transformations triggered by scrolling.
Scroll-driven storytelling or data visualization.

Interactive Maps:
Clickable world or regional maps with custom markers.
Animations triggered by interactions (e.g., zooming, dragging).
Data-driven maps that visually represent information, such as color-coded regions to show different values (e.g., population density or temperature) or varying symbol sizes to indicate quantities (e.g., larger circles for higher values).

Product Showcase / 3D Carousel:
Interactive configurators for changing colors, textures, or components.
360° product views with rotation and zoom.
Animated product highlights triggered by scrolling or interactions.

(Doesn't need to be finished project of course! Only a basis for some of these ideas)
Franck — Today at 11:41
Advanced Level:

Creating Custom Cables.gl Operators (Extended the "Creating your own cables.gl operators" into a series, https://www.youtube.com/watch?v=MOdVmJ6MYQE):
Cables.gl best practices.
Accessing built-in framework functions (e.g., noise).
Splitting operators into modular attachments.
Additional advanced operator workflows.

Shaders Series:
Explore the basics of vertex/fragment shader:
Post-Processing Ops: How the cables render pipeline works, setting up triggers, and creating effects.
Geometry Deformers: Simple deformations like waves, bulge, bend, or twist.
Texture-Driven Operations: Using texture information to drive something else/ effects.
(A simple example could be create a grid array based on luminance values from texture input (e.g., for the geo Instancer)).
YouTube
cables_gl