Art génératif interactif - Toile de soie

47 iroger7

Ouvrir dans l'éditeur Video Publiez votre code

Art génératif interactif - Toile de soie

Recommandé

18 September 2024

Bouton de connexion

16 January 2026

Intégration de jeu Flash avec Ruffle Player

18 August 2024

Animation de titre interactive

HTML

<!DOCTYPE html>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-20622056-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

gtag('config', 'UA-20622056-1');
  </script>

body.iphone .email-me {
      display: block;
      z-index: 10000;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
      padding: 0.5em 0;
      xtext-decoration: none;
      color: #6A6378;
    }

body.iphone .email-me:hover {
      color: #fff;
      text-decoration: underline;
    }
  </style>
  <title>Silk – Interactive Generative Art</title>
</head>

<body data-bind="css: { 'iphone': isIPhone, 'right-side-up': isRightSideUp, 'silk-active': silkActive, 'mouse-over-previewable-controls': mouseOverControls, 'mouse-down-on-slider': mouseDownOnSlider }">
  
  
  <a class="email-me" href="mailto:yurivish@gmail.com">Send Feedback</a>

<div id="fb-root"></div>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=408271179236250";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

<div id="share-wrap">
          <div class="btn" id="btn-share" data-bind="click: shareButtonClick, css: { visible: showShareButton, disabled: shareDisabled, loading: shareLoading, 'hide': showShareOptions }">
            <div class="text">Share</div>
            <div class="loading-stripes"></div>
          </div>

<div id="share-options" data-bind="css: { 'show-share-options': showShareOptions }">
            <a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlFacebook }">
              <span class="text"><i class="ss-facebook"></i></span>
              
            </a>

<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlTwitter }">
              <span class="text"><i class="ss-twitter"></i></span>
              
            </a>

<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlPinterest }">
              <span class="text"><i class="ss-pinterest"></i></span>
              <div class="tt">Pinterest</div>
            </a>

<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlEmail }">
              <span class="text"><i class="ss-mail"></i></span>
              <div class="tt">Email</div>
            </a>

<div class="row">
        <div class="btn silk-icon" data-bind="click: toggleFullscreen, css: { visible: notPristine }">
          <div class="contents"><i class="icon-fullscreen"></i></div>
          <div class="tt" data-bind="visible: isFullscreen">Fullscreen</div>
          <div class="tt" data-bind="visible: isNotFullscreen">Fullscreen</div>
        </div>

<div class="btn silk-icon" data-bind="click: download, css: { visible: notPristine }">
          <div class="contents"><i class="icon-camera"></i></div>
          <div class="tt">Save Picture</div>
        </div>

<div class="btn silk-icon" id="selected-color-icon" data-bind="click: toggleAllControls, css: { visible: notPristine }">
          <div class="contents"><i class="icon-circle"></i></div>
          <div class="tt">Controls</div>
        </div>

<div class="row controls-row download-row" data-bind="css: { visible: showDownload }">
        <p class="instructions">To save, right click the thumbnail and choose <em>Save Image As...</em>.</p>
        <img id="download-image" />
      </div>

</svg>
        <div class="label" style="text-align: center;">Drag colors to blend.</div>

<div class="toggle control" id="toggle-mirror" data-bind="click: toggleMirror, css: { on: mirror }">
            <div class="description">Mirror across center</div>
            <div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
          </div>

<div class="toggle control" id="toggle-spiral" data-bind="click: toggleSpiral, css: { on: spiral }">
            <div class="description">Spiral towards center</div>
            <div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
          </div>

</div>
      </div>
    </div>

<div id="sound-and-about" class="controls-container">
      <div class="row social-row">
        <div class="btn silk-icon" id="about-button" data-bind="click: toggleAbout, css: { visible: notPristine }">
          <div class="contents">?</div>
          <div class="tt">About</div>
        </div>

<div class="btn silk-icon" data-bind="click: toggleMute, css: { visible: notPristine }">
          <div class="contents"><i class="icon-volume-off" data-bind="visible: false"></i><i class="icon-volume-up" data-bind="visible: false"></i></div>
          <div class="tt" data-bind="visible: muted">Muted</div>
          <div class="tt" data-bind="visible: notMuted">Mute</div>
        </div>

<div class="social" data-bind="css: { visible: notPristine }">
          <div class="fb-like" data-href="https://www.facebook.com/pages/Silk/135022713223750?ref=ts&fref=ts" data-send="false" data-layout="button_count" data-width="50" data-show-faces="true" data-colorscheme="dark" data-font="lucida grande"></div>

<a href="https://twitter.com/tweetsilk" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a>
          <script>
            ! function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = "//platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
              }
            }(document, "script", "twitter-wjs");
          </script>
        </div>
      </div>
      <div class="app-link-container row" data-bind="css: { visible: notPristine }">
      </div>
      <div class="row about-row" data-bind="css: { visible: showAbout }">
        <p>Silk was made by Yuri Vishnevsky, with <a href="http://click.linksynergy.com/fs-bin/stat?id=1KYVs20MuZw&offerid=146261&type=3&subid=0&tmpid=1826&RD_PARM1=https%253A%252F%252Fitunes.apple.com%252Fus%252Falbum%252Fthe-world-forgotten-single%252Fid579359664%253Fuo%253D4%2526partnerId%253D30">music</a> and sound crafted by <a href="http://microscopics.co.uk">Mat Jarvis</a>.</p>

<p>Art shared with Silk is licensed under <a href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons</a>.</p>

<p>If you enjoyed Silk, please <a href="mailto:yurivish@gmail.com">let me know</a>!</p>

</div>
    </div>

</div>

<div id="replay-thumbnail" data-bind="css: { visible: showingReplayThumbnail }, click: hideReplayThumbnail ">
    <img data-bind="attr: { src: shareUrlThumbnail }" width="150" />
    <div class="tt">Hide thumbnail</div>
  </div>
  
  <a href="http://goo.gl/oIIuif" id="appstore-badge">
    <div id="announcement" style='pointer-events: none;' data-bind="css: { visible: showBigAnnouncement }">
      <style>
        .callme {
          opacity: 0;
          transition: opacity 0.7s ease-in-out;
        }

.callme.visible {
          opacity: 0.75;
        }
      </style>
      <div class="callme" data-bind="css: { visible: showBigAnnouncement }" style="font-family: sans-serif;color: #b5a2cf;width: 135px;margin-left: 10px;font-size: 13px; text-shadow: 0 0 2px #000, 0 0 10px #000, 0 0 5px #000; background: rgba(0,0,0,1); padding: 10px;">
        <template shadowrootmode="open">
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          ✨ I’m working on a new Silk. Is there anything you'd like to see? <a style="color: white; pointer-events: all; padding: 5px 2px; text-decoration: underline;" href="https://forms.gle/Ss9xLHPbcvs25RzQ6">click here</a><br>
          <br>Double-click the <b style="color: #ffede0;">?</b> (top right) to remove this message.
        </template>
      </div>

</div>
  </a>
  <div id="intro-center" data-bind="css: { visible: showIntro }">
    <img class="logo" src="img/silk_text.png" width="250" height="250" />
  </div>

<div id="intro-draw-something" data-bind="css: { visible: showIntro }">
    
    <img class="draw-something" src="img/draw_something.png" width="250" height="29" />
  </div>
  <div id="intro-mute-option" data-bind="css: { visible: false }">
    <em>Note</em> — Silk has sound.
    <a href="#" data-bind="visible: muted, click: toggleMute">Muted</a><span data-bind="visible: muted">.</span>
    <a href="#" data-bind="visible: notMuted, click: toggleMute">Mute?</a>
  </div>

<div id="tips">
    <div class="tip">Press <b>Space</b> to start anew.</div>
    <div class="tip">Press <b>Z</b> to undo.</div>

<div class="magic tip">Try different colors and symmetries.</div>
    <div class="tip">Sally forth, you weaver of wonder, sower of silken waves.</div>
  </div>

</html>

Art génératif interactif - Toile de soie

Recommandé

Bouton de connexion

Intégration de jeu Flash avec Ruffle Player

Animation de titre interactive

HTML

CSS

JS

Recommandé

Bouton de connexion

Intégration de jeu Flash avec Ruffle Player

Animation de titre interactive

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS