- 제출된 URL:
- https://cables.gl/
- 보고서 완료:
링크 · 17개 결과
페이지에서 식별된 외부 링크
| 링크 | 텍스트 |
|---|---|
| https://www.patreon.com/c/cables_gl | Cables on patreon |
| https://www.youtube.com/channel/UC7IRYQBFbt1KX4YmhBuIbhA/playlists?sort=da&view=1&flow=grid | VideosAll Video Tutorials |
| https://www.youtube.com/playlist?list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0 | Beginner VideoBeginner Introduction |
| https://github.com/cables-gl/coding-with-cables | GithubCoding with cables |
| https://github.com/cables-gl/cables_docs/discussions | DiscussionsAsk Questions, help others |
| https://github.com/cables-gl/cables_docs/issues | Issue TrackerBugs Reports, Feature Requests |
| https://discord.gg/cablesgl | DiscordChat about cables |
| https://www.instagram.com/cables_gl | cables on instagram |
| https://www.facebook.com/cablesgl | |
| https://www.youtube.com/watch?v=KPTGFM177HU&feature=youtu.be&list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0 | Video Tutorials |
JavaScript 변수 · 30개 결과
페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
| 이름 | 유형 |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| platform | object |
| __core-js_shared__ | object |
| chroma | function |
| ColorRick | function |
| Handlebars | object |
| hljs | object |
콘솔 로그 메시지 · 6개 결과
웹 콘솔에 기록된 메시지
| 유형 | 카테고리 | 로그 |
|---|---|---|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| error | other |
|
| log | other |
|
HTML
페이지의 원시 HTML 본문
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta charset="UTF-8">
<title>cables</title>
<meta itemprop="name" content="cables">
<meta itemprop="description" content="Cables is a tool for creating beautiful interactive content. With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments.">
<meta itemprop="image" content="https://cables.gl/img/metathumb-landing.jpg">
<link rel="canonical" href="https://cables.gl">
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css">
<link rel="alternate" type="application/rss+xml" title="cables patches" href="/rss.xml">
<link rel="manifest" href="/manifest.json">
<link rel="preload" href="/fonts/roboto/roboto-v29-latin-regular.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/fonts/roboto/roboto-v29-latin-300.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/fonts/roboto/roboto-v29-latin-500.woff2" as="font" type="font/woff2" crossorigin="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msapplication-TileColor" content="#da532c ">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="theme-color" content="#222222">
<meta name="description" content="Cables is a tool for creating beautiful interactive content. With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments.">
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@cables_gl"><meta name="twitter:title" content="cables"><meta name="twitter:description" content="Cables is a tool for creating beautiful interactive content. With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments."><meta name="twitter:creator" content="@pandrr"><meta name="twitter:image:src" content="https://cables.gl/img/metathumb-landing.jpg">
<meta property="og:title" content="cables">
<meta property="og:type" content="article">
<meta property="og:url" content="https://cables.gl">
<meta property="og:image" content="https://cables.gl/img/metathumb-landing.jpg">
<meta property="og:description" content="Cables is a tool for creating beautiful interactive content. With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments.">
<meta property="og:site_name" content="cables">
<link rel="apple-touch-icon" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="apple-touch-icon" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="icon" type="image/png" href="/favicon/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon/favicon-96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon/favicon-144.png" sizes="144x144">
<link rel="icon" type="image/png" href="/favicon/favicon-192.png" sizes="192x192">
<meta name="msvalidate.01" content="AC298BEEEB9A349D1F97A00656EA978D">
<meta name="google-site-verification" content="8YRDkMchL2VUKrkPTuFnJgX6vW_gH6HaxCd9aL0ABzY">
<meta name="google-site-verification" content="5XXNtPWhpu-X4gUnV-wowW4WxNBm16Jc_CLZXJpemuA">
<meta property="fb:admins" content="785694383">
</head>
<body class="dark" style="transition: background-color 0.3s ease-out 0s;"><noscript><div data-nosnippet><br/><br/><br/><h1>you need to enable javascript!</h1><br/><br/></div></noscript><div id="nav-wrapper" class="hide-phone hide-tablet" data-nosnippet=""><nav class="row " id="nav-bar" style=""><ul class="cute-5-tablet left nav-item-list left"><li><a href="/home" id="nav-cables" class="cables-logo cables-link" aria-label="cables start page"> </a><div class=" left megamenu hide " id="nav-cables-menu"><div class="cute-6-tablet left"><span class="block" href=""><h4>cables</h4><a class="sub" style="margin-left:0px" href="/landing">Homepage</a><br><a class="sub" style="margin-left:0px" href="/standalone">Download Standalone</a><br><br><h4>Support cables</h4><a class="sub" style="margin-left:0px" href="https://www.patreon.com/c/cables_gl">Cables on patreon</a><br><a class="sub" style="margin-left:0px" href="/support">Supporter and Contributor</a><br></span></div><div class="cute-6-tablet left"><span class="block" href=""><h4>About</h4><a class="sub" style="margin-left:0px" href="/changelog">Changelog</a><br><a class="sub" style="margin-left:0px" href="/about">About</a><br></span></div></div></li><li><a href="/patches" id="nav-explore" class="nav-item-with-submenu"> Explore <span class="icon icon-chevron-down"></span></a><div class=" left megamenu hide " id="nav-explore-menu"><div class="cute-6-tablet left"><a class="block" href="/patches"><h4>Browse</h4><span class="sub">All the patches</span></a><br><a href="/patches#topMonth" class="sub">Top Patches</a><br><a href="/patches#ppub" class="sub">Latest Patches</a><br><a href="/patchlist/featured" class="sub">Featured Patches</a><br><a href="/patchlists" class="sub">Patchlists</a></div><div class="cute-6-tablet left"><a class="block" href="/made-with-cables"><h4>Project Showcase</h4><span class="sub">Made with cables</span></a><a class="block" href="/examples"><h4>Examples</h4><span class="sub">Basic Example Patches</span></a><a class="block" href="/teams"><h4>Teams</h4><span class="sub">Public Teams</span></a></div></div></li><li><span class="clickable nav-item-with-submenu"> Learn <span class="icon icon-chevron-down"></span></span><div class=" left megamenu megamenu-big hide nav-bar-dropdown-list" id="nav-learn-dropdown"><div class="cute-4-tablet left"><a class="block" href="/ops"><h4>Ops</h4><span class="sub">OP Reference List</span></a><a class="block" href="/examples"><h4>Examples</h4><span class="sub">Basic Example Patches</span></a><a class="block" href="/docs"><h4>Docs<span aria-hidden="true"></span></h4><span class="sub">Documentation</span></a></div><div class="cute-4-tablet left"><a class="block" target="_blank" href="https://www.youtube.com/channel/UC7IRYQBFbt1KX4YmhBuIbhA/playlists?sort=da&view=1&flow=grid"><h4>Videos<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">All Video Tutorials</span></a><a class="block" target="_blank" href="https://www.youtube.com/playlist?list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0"><h4>Beginner Video<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">Beginner Introduction</span></a></div><div class="cute-4-tablet left"><a class="block" href="https://blog.cables.gl/"><h4>Blog<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">News and blog</span></a><a class="block" href="/changelog"><h4>Changelog</h4><span class="sub">Cables update history</span></a><a class="block" href="https://github.com/cables-gl/coding-with-cables"><h4>Github<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">Coding with cables</span></a></div></div></li><li><span class="clickable nav-item-with-submenu"> Community <span class="icon icon-chevron-down"></span></span><div class=" left megamenu megamenu-big hide nav-bar-dropdown-list" id="nav-community-dropdown"><div class="cute-5-tablet left"><a class="block" href="https://github.com/cables-gl/cables_docs/discussions"><h4>Discussions<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">Ask Questions, help others</span></a><a class="block" href="https://github.com/cables-gl/cables_docs/issues"><h4>Issue Tracker<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">Bugs Reports, Feature Requests</span></a></div><div class="cute-4-tablet left"><a class="block" href="https://discord.gg/cablesgl"><h4>Discord<span class="icon icon-external" aria-hidden="true"></span></h4><span class="sub">Chat about cables</span></a></div><div class="cute-3-tablet left"><br><span class="social-icon-list-item"><a target="_blank" class="social-icon-link icon icon-instagram" href="https://www.instagram.com/cables_gl"></a></span> <span class="social-icon-list-item"><a target="_blank" class="social-icon-link icon icon-facebook" href="https://www.facebook.com/cablesgl"></a></span> </div></div></li></ul><ul class="hide-phone cute-3-laptop right nav-item-list"><li> <a id="login-button" href="/login">Login</a></li><li> <a id="signup-button" href="/signup" class="button button-primary" style="position:absolute;top:3px;">Register</a></li></ul></nav></div> <!-- end nav --><!-- mobile --><div class="hide-desktop hide-laptop" data-nosnippet=""><div id="mobileNavHeader" onclick="document.getElementById('mobileBurgerMenu').classList.toggle('hide');"><span class="cables-logo cables-link" style="position:absolute;left:10px;top:10px;"></span><div id="mobileBurgerButton"><span class="favs icon icon-2x icon-menu"></span></div></div><div id="mobileBurgerMenu" class="hide"><ul id=""><li><a href="/">Home</a></li><li><a href="/patches">Explore</a></li><li><a href="/patchlists">Patchlists</a></li><li><a href="/ops/">Op Reference</a></li><li><a href="/made-with-cables/">Cables Project Showcase</a></li><li><a href="/docs">Documentation</a></li><li><a href="https://www.youtube.com/watch?v=KPTGFM177HU&feature=youtu.be&list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0" target="_blank">Video Tutorials</a></li><li><a href="/browser">Browser Info</a></li><li><a href="https://github.com/cables-gl/cables_docs/discussions">Discussions</a></li><li><a href="/changelog">Changelog</a></li><li><a href="/login">Login</a></li><li><a href="/signup">Register</a></li></ul></div></div><!-- end mobile --><div class="text-center hidden" id="nav-infobar" data-nosnippet=""></div><section id="content"><div class="landing" data-page-load="pageLanding" data-demosjson="["yluEj_","g2Fb8Y","-guFj_","NfPBj_","DbQc8Y","qmoc8Y","rALAj_","aYOCj_","DmHCj_"]"><div class="row" style="position:absolute;left:0;right:0;padding-top:33px;pointer-events:none;"><div class="cute-12-phone left cute-8-tablet slogan" onclick="pageLanding.hideSlogan();" style="padding-top:0;user-select: none;pointer-events:none;"><br><span class="bigtitle">interactive visuals,</span><br><span id="second-slogan-line" class="bigtitle">made from cable salad</span></div></div><div class="row"><div class="democontainer" id="democontainer" style="height: 316px;"><iframe id="demoiframe" src="/api/demo/8" style="width: 790px; height: 316px;"></iframe></div></div><div id="landing-introduction" class="rowbg_cycle" style="padding-top:20px;"><div class="row"><div class="cute-12-phone cute-12-tablet highlight text-center" style="background-color: #666;border-radius: 4px;;"><i><b>BREAKING NEWS:</b></i><br>cables is finally <b>open source</b>! Enjoy offline visual programming by downloading the new <a href="/standalone">cables standalone</a>.<br><br><a class="button button-primary" href="/standalone">Download now!</a></div></div></div><div id="landing-introduction" class="rowbg_cycle" style="padding-top:20px;"><div class="row"><div class="cute-12-phone cute-6-tablet"><h2>Visual Programming with cables</h2><div class="longtext">Cables is a tool for creating beautiful interactive content.With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments.<br><br>You are provided with a set of operators, such as mathematical functions, shapes, materials and post processing effects.<br>Connect these to each other with virtual cables to create the experience you have in mind.<br>Easily export your piece of work at any time. Embed it into your website or use it for any kind of creative installation.<br><br><a id="signup-button-content" class="button-primary" href="/signup/">Register now</a></div></div><div id="ui-video" class="cute-12-phone cute-6-tablet left text-center"><img src="/landing/ui.mp4.gif" loading="lazy" class="responsive-img" style="float: right;width:600px;height:311px;"><br><a class="button button-primary" href="https://www.youtube.com/channel/UC7IRYQBFbt1KX4YmhBuIbhA/videos" target="_blank">See cables in action</a><br><br></div></div></div><section id="landing-showcase-section" class="rowbg_white"><div class="row"><div class="cute-12-phone "><div class="text-center"><h2>Made with cables</h2></div><div id="landingteaser" class="project-thumb-container project-list"><div class="row"><div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/1vNRmv" name="Scan Glitch "><img class="project-thumb" src="/thumb/hq/6747977eb828ed21d1d162ff/thumb.webp" loading="lazy" alt="project thumbnail Scan Glitch "></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Nov 27, 2024 at 22:04
Last edit: Dec 4, 2024 at 13:13
Published: Nov 30, 2024 at 08:28">
<div class="stats-and-title">
<a href="/user/ivancher">
<img class="avatar avatar-patch" src="/api/avatar/63ef13b4b9949ae9a5e33384/medium" loading="lazy" alt="ivancher avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>13
</div>
<h3 class="project-title" title="Scan Glitch ">
<a href="/p/1vNRmv">Scan Glitch </a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/ivancher" class="author username " data-username="ivancher" data-userid="63ef13b4b9949ae9a5e33384" data-show-follow-btn="true">ivancher</a>
-
<span class="time">
Published <span title="Nov 30, 2024 at 08:28">Nov 30, 2024 at 08:28</span>
</span>
</div>
</div>
</div>
<div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/rLyfqu" name="Cloud Raymarching - V0.2"><img class="project-thumb" src="/thumb/hq/673a6021a0833bc807166195/thumb.webp" loading="lazy" alt="project thumbnail Cloud Raymarching - V0.2"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Nov 17, 2024 at 21:29
Last edit: Nov 21, 2024 at 12:15
Published: Nov 17, 2024 at 23:16">
<div class="stats-and-title">
<a href="/user/Marfharf">
<img class="avatar avatar-patch" src="/api/avatar/5d449a0247127620bb84aee0/medium" loading="lazy" alt="Marfharf avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>9
<span style="margin-left:4px;" class="comments icon icon-message"></span>2
</div>
<h3 class="project-title" title="Cloud Raymarching - V0.2">
<a href="/p/rLyfqu">Cloud Raymarching - V0.2</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/Marfharf" class="author username " data-username="Marfharf" data-userid="5d449a0247127620bb84aee0" data-show-follow-btn="true">Marfharf</a>
-
<span class="time">
Published <span title="Nov 17, 2024 at 23:16">Nov 17, 2024 at 23:16</span>
</span>
</div>
</div>
</div>
<div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/dNrylv" name="Trippy Donut"><img class="project-thumb" src="/thumb/hq/67474bc22e57c621ea7bec0f/thumb.webp" loading="lazy" alt="project thumbnail Trippy Donut"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Nov 27, 2024 at 16:41
Last edit: Nov 27, 2024 at 22:30
Published: Nov 27, 2024 at 17:15">
<div class="stats-and-title">
<a href="/user/wirmachenbunt">
<img class="avatar avatar-patch" src="/api/avatar/59a890711faafd7959b9fc01/medium" loading="lazy" alt="wirmachenbunt avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>9
</div>
<h3 class="project-title" title="Trippy Donut">
<a href="/p/dNrylv">Trippy Donut</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/wirmachenbunt" class="author username " data-username="wirmachenbunt" data-userid="59a890711faafd7959b9fc01" data-show-follow-btn="true">wirmachenbunt</a>
-
<span class="time">
Published <span title="Nov 27, 2024 at 17:15">Nov 27, 2024 at 17:15</span>
</span>
</div>
</div>
</div>
<div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/JdheRu" name="Quick Butterfly Swarm"><img class="project-thumb" src="/thumb/hq/674075614a9f964196f6ef27/thumb.webp" loading="lazy" alt="project thumbnail Quick Butterfly Swarm"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Nov 22, 2024 at 12:13
Last edit: Nov 22, 2024 at 13:26
Published: Nov 22, 2024 at 13:26">
<div class="stats-and-title">
<a href="/user/G_J_A">
<img class="avatar avatar-patch" src="/api/avatar/6227318a51ce0db50ad9b9ec/medium" loading="lazy" alt="G_J_A avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>8
</div>
<h3 class="project-title" title="Quick Butterfly Swarm">
<a href="/p/JdheRu">Quick Butterfly Swarm</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/G_J_A" class="author username " data-username="G_J_A" data-userid="6227318a51ce0db50ad9b9ec" data-show-follow-btn="true">G_J_A</a>
-
<span class="time">
Published <span title="Nov 22, 2024 at 13:26">Nov 22, 2024 at 13:26</span>
</span>
</div>
</div>
</div>
</div></div><div id="landingteaser2" class="project-thumb-container project-list"><div class="row"><div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/ouXdPq" name="Arrakis"><img class="project-thumb" src="/thumb/hq/67081711b0ccedab97cfd408/thumb.webp" loading="lazy" alt="project thumbnail Arrakis"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Oct 10, 2024 at 18:04
Last edit: Oct 10, 2024 at 21:11
Published: Oct 10, 2024 at 21:13">
<div class="stats-and-title">
<a href="/user/mantissa">
<img class="avatar avatar-patch" src="/api/avatar/67058e42955c20ab7f601727/medium" loading="lazy" alt="mantissa avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>25
<span style="margin-left:4px;" class="comments icon icon-message"></span>2
</div>
<h3 class="project-title" title="Arrakis">
<a href="/p/ouXdPq">Arrakis</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/mantissa" class="author username " data-username="mantissa" data-userid="67058e42955c20ab7f601727" data-show-follow-btn="true">mantissa</a>
-
<span class="time">
Published <span title="Oct 10, 2024 at 21:13">Oct 10, 2024 at 21:13</span>
</span>
</div>
</div>
</div>
<div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/qcuxUs" name="DNA"><img class="project-thumb" src="/thumb/hq/67253f22255a4265f6569a1a/thumb.webp" loading="lazy" alt="project thumbnail DNA"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Nov 1, 2024 at 20:50
Last edit: Nov 16, 2024 at 21:03
Published: Nov 3, 2024 at 17:40">
<div class="stats-and-title">
<a href="/user/wei">
<img class="avatar avatar-patch" src="/api/avatar/66faf296ba32628ffad5c82a/medium" loading="lazy" alt="wei avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>25
<span style="margin-left:4px;" class="comments icon icon-message"></span>1
</div>
<h3 class="project-title" title="DNA">
<a href="/p/qcuxUs">DNA</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/wei" class="author username " data-username="wei" data-userid="66faf296ba32628ffad5c82a" data-show-follow-btn="true">wei</a>
-
<span class="time">
Published <span title="Nov 3, 2024 at 17:40">Nov 3, 2024 at 17:40</span>
</span>
</div>
</div>
</div>
<div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/GFxMmn" name="DATAMOSH 2"><img class="project-thumb" src="/thumb/hq/66d7bd7355a3cb8832b4e964/thumb.webp" loading="lazy" alt="project thumbnail DATAMOSH 2"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Sep 4, 2024 at 01:52
Last edit: Sep 21, 2024 at 15:50
Published: Sep 4, 2024 at 03:55">
<div class="stats-and-title">
<a href="/user/bejuco">
<img class="avatar avatar-patch" src="/api/avatar/606c861c0275d701c9dff405/medium" loading="lazy" alt="bejuco avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>22
</div>
<h3 class="project-title" title="DATAMOSH 2">
<a href="/p/GFxMmn">DATAMOSH 2</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/bejuco" class="author username " data-username="bejuco" data-userid="606c861c0275d701c9dff405" data-show-follow-btn="true">bejuco</a>
-
<span class="time">
Published <span title="Sep 4, 2024 at 03:55">Sep 4, 2024 at 03:55</span>
</span>
</div>
</div>
</div>
<div class="project cute-3-tablet cute-6-phone left">
<div class="project-thumb-container">
<a href="/p/l1YCOP" name="Im Takt - intakt / Interactive Infographics"><img class="project-thumb" src="/thumb/hq/659e5d1e8eba419a8564a4dd/thumb.webp" loading="lazy" alt="project thumbnail Im Takt - intakt / Interactive Infographics"></a>
</div>
<!-- these line breaks are important! -->
<div class="project-infos" data-tooltip="Created: Jan 10, 2024 at 09:02
Last edit: Aug 5, 2024 at 13:12
Published: Aug 5, 2024 at 13:13">
<div class="stats-and-title">
<a href="/user/adrian_herzog">
<img class="avatar avatar-patch" src="/api/avatar/5e47fece65f58d62a877f05a/medium" loading="lazy" alt="adrian_herzog avatar">
</a>
<div class="stats">
<span class="favs icon icon-heart"></span>22
</div>
<h3 class="project-title" title="Im Takt - intakt / Interactive Infographics">
<a href="/p/l1YCOP">Im Takt - intakt / Interactive Infographics</a>
</h3>
</div>
<div class="author-and-time">
<a href="/user/adrian_herzog" class="author username " data-username="adrian_herzog" data-userid="5e47fece65f58d62a877f05a" data-show-follow-btn="true">adrian_herzog</a>
-
<span class="time">
Published <span title="Aug 5, 2024 at 13:13">Aug 5, 2024 at 13:13</span>
</span>
</div>
</div>
</div>
</div></div><div class="text-center">Real world projects, realized using cables</div></div></div><div class="row showcase-row"><div class="cute-12-phone cute-4-tablet cute-4-desktop text-center left"><div style="background-image:url('/made-with-cables/holon-hold_on.jpg');background-size:100%;background-position:center center;background-repeat:no-repeat;width:100%;height:220px;"></div><br><h3>Hold on</h3><br><br></div><div class="cute-12-phone cute-4-tablet cute-4-desktop text-center left"><div style="background-image:url('/made-with-cables/montblanc.jpg');background-size:100%;background-position:center center;background-repeat:no-repeat;width:100%;height:220px;"></div><br><h3>Mont Blanc Meisterstück</h3><br><br><a class="button button-primary" href="/made-with-cables">Real world projects made with cables </a></div><div class="cute-12-phone cute-4-tablet cute-4-desktop text-center left" style="cursor:pointer;"><div style="background-image:url('/made-with-cables/convergencela.jpg');background-size:100%;background-position:center center;background-repeat:no-repeat;width:100%;height:220px;"></div><br><h3>Convergence LA</h3><br><br></div></div></section><div id="landing-mission-statement-section"><div class="rowbg_cycle" style="padding-top:20px;"><div class="row"><div class="cute-12-phone cute-5-tablet cute-1-tablet-offset left "><h2>Mission statement</h2><div class="longtext">The <a href="https://undev.studio/">undev</a> team has worked continuously on cables for over 4 years and will continue to do so.<br>We want to create the best web based tool that allows users to create stunning interactive content without having to know how to code.We love to watch our ever growing community evolve into a healthy playground of creativity and talent.<br>Cables will always be free for everybody to use and anything you make with cables is yours.<br>We’ve now entered the public beta and would love it if you could spread the word.<br><br>Thanks for joining us.Let’s create something beautiful together.<br><br><br></div></div><div class="cute-12-phone cute-5-tablet left "><h2>Who we are</h2><div class="longtext">Cables is being developed by <a href="https://undev.studio/">undev</a> – a Berlin based creative studio for interactive realtime graphics, data-visualizations and app development. <br>We are passionate coders and designers with a long history in programming for the demoscene.<br><br></div></div></div></div></div><a name="ui"></a><div id="landing-ui-section"><div class="rowbg_white"><div class="row" style="padding-top:20px;padding-bottom:5px;"><div class="cute-12-phone cute-5-tablet cute-1-tablet-offset left text-center" style="padding-right: 70px;padding-left: 60px;"><br><br><br><h3 style="font-size:25px;margin-bottom:20px;" class="text-center">User Interface</h3><div class="longtext">Cables UI has been designed to allow you to express your creative ideas as quickly as possible.<br>It’s intuitive control system is easy to pick up and master.<br>After studying other node based software we created a workflow that works with you and not against you.</div></div><div class="cute-12-phone cute-5-tablet left "><img src="/landing/ui.mp4.gif" loading="lazy" class="responsive-img" style="float: right;"></div></div><div class="row" style="padding-top:20px;padding-bottom:5px;"><div class="cute-12-phone cute-5-tablet cute-1-tablet-offset left text-center"><img src="/landing/ui_connect15.gif" loading="lazy" class="responsive-img" style="float: right;"></div><div class="cute-12-phone cute-5-tablet left text-center" style="padding-left:60px;padding-right:60px;"><br><br><br><h3 style="font-size:25px;margin-bottom:20px;" class="text-center">Connections</h3><div class="longtext">Ops can automatically connect to each other when added or removed. Connecting ops to each other is achieved in an instant.</div></div></div><div class="row" style="padding-top:20px;padding-bottom:5px;"><div class="cute-12-phone cute-5-tablet cute-1-tablet-offset left text-center" style="padding-right: 70px;padding-left: 60px;"><br><br><br><h3 style="font-size:25px;margin-bottom:20px;" class="text-center">Data Flow</h3><div class="longtext">Ops and connections are color coded, so that its easy to understand your patch.<br><br>Flow mode allows you to ‘see’ the flow of data between all operators in real time.</div></div><div class="cute-12-phone cute-5-tablet left "><img src="/landing/ui_flow30.gif" loading="lazy" class="responsive-img" style="float: right;"></div></div><div class="row" style="padding-top:20px;padding-bottom:5px;"><div class="cute-12-phone cute-5-tablet cute-1-tablet-offset left text-center"><img src="/landing/ui_nav.gif" loading="lazy" class="responsive-img" style="float: right;"></div><div class="cute-12-phone cute-5-tablet left text-center" style="padding-left:60px;padding-right:60px;"><br><br><br><h3 style="font-size:25px;margin-bottom:20px;" class="text-center">Overview</h3><div class="longtext">Moving around a patch and zooming in and out allows you to easily work on large projects.<br><br>Creating subpatches allows complexity to become more manageable.</div></div></div><div class="row" style="padding-top:20px;padding-bottom:5px;"><div class="cute-12-phone cute-5-tablet cute-1-tablet-offset left text-center" style="padding-right: 70px;padding-left: 60px;"><br><br><br><h3 style="font-size:25px;margin-bottom:20px;" class="text-center">Search</h3><div class="longtext">Creating a new op is fast and easy with our advanced search system.<br><br>Finding them within a patch is even easier.</div></div><div class="cute-12-phone cute-5-tablet left "><img src="/landing/ui_search.gif" loading="lazy" class="responsive-img" style="float: right;"></div></div></div></div><a name="features"></a><div id="landing-features-section" class="rowbg_cycle"><div class="row"><div class="cute-12-phone text-center"><h2>Features</h2></div></div><div class="row"><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/feature_browser.png);"></div><h3>True web platform</h3><div class="longtext">Create, manage and wire projects in your browser.<br>Cables projects run on all modern browsers, mobile devices and desktop computers.</div><br><br></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center"><div class="landing_screencircle" style="background-image:url(/landing/browsers.png);"></div><h3>Works anywhere</h3><div class="longtext">All of your work and assets with cables can be opened on any computer that has browser support.Theres no need to install anything as it runs directly from the browser.</div><br><br></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/feature_fbx.png);"></div><h3>3D model support</h3><div class="longtext">We provide drag and drop loading of 3D models and animation data directly into cables.<br><br></div></div></div><div class="row"><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/texeffects.png);"></div><h3>Texture effects</h3><div class="longtext">A huge selection of texture effects will allow you to modify and enhance your visuals.Everything from DOF to glitch effects can be easily applied to visuals in just moments.</div></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/material.jpg);"></div><h3>Material system</h3><div class="longtext">We have a large selection of materials which can be applied to 3D meshes ranging from matcap, IBL, Phong, Lambert and more.</div></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/midi.png);"></div><h3>MIDI</h3><div class="longtext">Cables supports every MIDI feature available from MIDI clock, Notes, CC and NRPN.Connect your external hardware or DAW to cables in minutes.</div></div></div><div class="row"><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/feature.png);"></div><h3>Browser APIs</h3><div class="longtext">Easily use browser APIs like gamepad, midi, webcam, phone sensors.You can also use other devices' development tools such as kinect or leap motion.</div><br><br></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center"><div class="landing_screencircle" style="background-image:url(/landing/doc.png);"></div><h3>Documentation</h3><div class="longtext">Everything from using ops and how to code them is all covered inside of our ever growing online documentation.<br><br></div></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/youtube.png);"></div><h3>Video tutorials</h3><div class="longtext">Our video tutorial series on how to learn cables covers everything you need to know in a short amount of time.<br><br></div></div></div><div class="row"><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/feature_shader.png);"></div><h3>Shaders</h3><div class="longtext">Creating your own custom shaders couldn't be easier.Write your own fragment and vertex shaders in minutes and apply them to materials or textures.</div><br><br></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center"><div class="landing_screencircle" style="background-image:url(/landing/feature_vr.png);"></div><h3>WebVR</h3><div class="longtext">Cables WebVR works with platforms that support it and allows you to build VR experiencesfor mobile devices and headsets like the Oculus Rift.</div><br><br></div><div class="cute-1-phone-offset cute-0-tablet-offset cute-10-phone cute-4-tablet text-center left"><div class="landing_screencircle" style="background-image:url(/landing/editor.png);"></div><h3>Code editor</h3><div class="longtext">Create and code your own ops inside of cables with our built in editor.Op code is available and can be freely copied and modified to create your own custom ops..</div><br><br></div></div></div><section class="rowbg_white"><div><div id="landing-cables-for-designers-section" class="row"><div class="cute-12-phone cute-12-phone-pull hide-tablet hide-desktop hide-laptop text-center "><a href="/landing/screen_designer.jpg" target="_blank"><img loading="lazy" alt="screenshot: cables for Designers" src="/landing/cables_designer.png" class="responsive-img"></a></div><div class="cute-12-phone cute-12-phone-push cute-6-tablet"><h2>Cables for Designers</h2><h3>Visual Programming without programming</h3><div class="longtext">With the cables module kit you can create cool stuff without writing any code. Our video tutorials will help you get started in no time!<br></div><br><h3>Speed up coordination and feedback</h3><div class="longtext">With a graphical interface there is no need to bother the developer for every pixel you want to change. Play around with it, it's fun!<br></div><br><h3>Easy collaboration</h3><div class="longtext">Share your work with the team, integrate comments and group operators for easy orientation, even in big projects.<br></div></div><div class="hide-phone cute-6-tablet text-center "><a href="/landing/cables_designer.png" target="_blank"><img loading="lazy" alt="screenshot: cables for Designers" src="/landing/cables_designer.png" class="responsive-img"></a></div></div></div><div class=""><div id="cables-for-developers-section" class="row"><div class="cute-12-phone cute-6-tablet text-center"><a href="/landing/cables_code.png" target="_blank"><img loading="lazy" alt="screenshot: cables for developers" src="/landing/cables_code.png" class="responsive-img"></a></div><div class="cute-12-phone cute-6-tablet" style="margin-top: 10px;padding-left:35px;"><h2>Cables for Developers</h2><h3>Easy embedding</h3><div class="longtext">Embed cables projects into your website without any server-side requirements.</div><br><h3>Small footprint</h3><div class="longtext">Exporting your work will create a .zip file containing only the code of the operators you used!</div><br><h3>Write your own operators</h3><div class="longtext">Clone existing operators and modify them to meet your very own ideas.</div><br></div></div></div></section><div id="" class="" style="margin-bottom: 70px;"><div class="row"><div class="cute-12-phone cute-12-tablet left text-center"><h2>Video tutorials</h2><div class="longtext">cables has lots of video tutorials to get you started quickly</div><br><a class="button button-primary" href="https://www.youtube.com/channel/UC7IRYQBFbt1KX4YmhBuIbhA/videos" target="_blank" style="margin-top:30px;">Visit our Youtube channel</a></div></div></div><div id="undev-info" class="rowbg_cycle text-center" style="margin-bottom: 70px;"><div class="row"><div class="cute-12-phone cute-12-tablet left"><h3>Inspiration</h3><div class="longtext">cables is inspired by the excellent desktop tools <a href="http://tooll.io" target="_blank">tooll</a> and <a href="https://vvvv.org/" target="_blank">vvvv</a>.</div></div></div></div></div></section>
<script type="text/javascript" src="/webpush_worker.js"></script>
<script type="text/javascript" src="https://sandbox.cables.gl/ui/js/libs.ui.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/templates.js"></script>
<footer class="page-footer"><div class="row"><div class="cute-6-tablet cute-12-phone left"><ul class="page-footer__link-list"></ul></div><div class="cute-3-tablet cute-3-tablet-offset cute-12-phone left"><ul class="page-footer__link-list"><li class="page-footer__link-list-item text-align-left text-align-tablet-right"><a class="page-footer__link" href="/about">About</a></li><li class="page-footer__link-list-item text-align-left text-align-tablet-right"><a class="page-footer__link" href="/support">❤️ Support Cables</a></li><li class="page-footer__link-list-item text-align-left text-align-tablet-right"><span class="page-footer__link page-footer__link--email">Contact</span></li><li class="page-footer__link-list-item text-align-left text-align-tablet-right"><a class="page-footer__link" href="/imprint">Imprint / Privacy</a></li><li class="page-footer__link-list-item text-align-left text-align-tablet-right"><a class="page-footer__link" href="/made-with-cables">Made with cables</a></li></ul></div></div><div class="row page-footer__bottom-row"><div class="cute-hide-phone cute-3-tablet left text-align-center text-align-tablet-left"><a href="https://undev.studio" target="_blank" aria-label="undev logo"><div class="page-footer__undev-logo"></div></a><br><br>Made by <a href="https://undev.studio" target="_blank" aria-label="undefined development UG">undefined development UG</a></div><div class="cute-10-phone cute-1-phone-offset cute-3-tablet cute-6-tablet-offset left social-icon-list-wrapper"><ul class="social-icon-list"><li class="social-icon-list-item"><a target="_blank" class="social-icon-link icon-1_5x icon icon-mastodon" aria-label="cables on mastodon" href="https://mastodon.social/@cables_gl"></a></li><li class="social-icon-list-item"><a target="_blank" class="social-icon-link icon-1_5x icon icon-instagram" aria-label="cables on instagram" href="https://www.instagram.com/cables_gl"></a></li><li class="social-icon-list-item"><a target="_blank" class="social-icon-link icon-1_5x icon icon-youtube" aria-label="cables on youtube" href="https://www.youtube.com/cables_gl"></a></li><li class="social-icon-list-item"><a target="_blank" class="social-icon-link icon-1_5x icon icon-rss" href="/rss.xml"></a></li></ul></div></div></footer><div class="cookie-warning" id="cookie-warning" data-nosnippet=""><p class="cookie-warning-text">cables.gl uses <strong>only functional cookies</strong> to ensure that everything works fine for you. If you continue we’ll assume that you are happy to receive these cookies on cables.</p><div id="cookie-close-icon"></div></div><div id="modalbg" style="display:none"></div><div id="environmentVars" class="hidden" data-loggedin="false" data-env="live" data-title=""></div><link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
</body></html>