how to embed a sketch in a website

Hi,

I am new to processing and have little proficiency in javascript. I would like to know how to embed sketches in my web site. I have browsed the forum but the answers I found are not very detailed. Can anyone help ? Thanks!

Answers

  • Answer ✓

    I believe you have to switch to JavaScript mode, then to export the sketch.

  • edited August 2014 Answer ✓

    ... and have little proficiency in JavaScript.

    Although JavaScript is apparently very similar to Java, when it comes to objects, it's a complex & diff. world.
    While Java is an object oriented language, JS is object based. Seems similar, but it's alien to each other!
    I advise you to learn Processing's "CoffeeScript Mode" in order to use JS libraries and define classes similar to Java!

  • edited August 2014

    ok, when I have a sketch and save it as test.js, how can I then embed it in html?

    <html>
    
    <head>
    <title>JavaScript-Test</title>
    <script src="test.js" type="text/javascript">
    </script>
    </head>
    
    <body>
    
     <script>
    draw(); 
    </script> 
    
    </body>
    </html>
    

    ?

    Thank you!

    Chrisir ;-)

  • edited August 2014 Answer ✓

    with this being the content of test.js (it's from www.openprocessing.org, probably one of the easiest ways to post something on the web)

    int counter;
    
    void setup() {  //setup function called initially, only once
      size(250, 250);
      background(255);  //set background white
      colorMode(HSB);   //set colors to Hue, Saturation, Brightness mode
      counter = 0;
    }
    
    void draw() {  //draw function loops 
      counter++;
      noStroke();
      fill(random(255),100,255,50);
    
      if(mousePressed == true) { //add some interaction
        ellipse(mouseX, mouseY, 20, 20);
      }
      else {
        ellipse(width/2, height/2, 80*sin(counter), 80*sin(counter));
      }
    }
    
  • OK, that seems not too complex to me. I'm going to try it and let you know how it goes. I have had to use a bit of javascript in my html pages, but really, I was merely pasting code... Thanks a lot!

  • Answer ✓

    Don't forget that both "JS & CoffeeScript Modes" already produce a basic ".html" file and opens it up in a browser!
    Just take a peek at "/web-export/" subfolder for those files! ;)

  • It worked. Well at least, I have converted the file and got an html page, which I can open in a browser, so now it's just a matter of integration. The rendering is a little slow in the browser, but I don't know if there is a lot I can do about it... I am really a beginner. Thanks anyway!

  • could you post the html please? I still don't get it.

    Anyway, there's still openprocessing.org and Sketchpad.cc and the like

    Thank you!

  • oh, I see, thanks!

  • And do you know how I can integrate the full screen mode :-) ?

  • Answer ✓

    There is a topic (which went up recently) dedicated to this subject, search in the JavaScript category.

  • Ok, thanks, I will. One last question, and I might be annoying, I'm sorry, but: I'd like to use those scripts as little logos, like miniatures. I have integrated one instead of the first element in the title area, but I don't think it should be that straight forward. Here is the code. I tried deleting various , like the list, the header etc.. but none of these seem to work...

         <nav class="top-bar" data-topbar>
            <ul class="title-area">
    
              <li class="name"> 
                <h1>
                  <a class= "menubaraller" href="#">
    
    
                    <div id="content">
                    <div>
                        <canvas id="filltile2" data-processing-sources="fill_tile2.pde" width="50" height="50">
                            <p>Your browser does not support the canvas tag.</p>
                            <!-- Note: you can put any alternative content here. -->
                        </canvas>
                        <noscript>
                            <p>JavaScript is required to view the contents of this page.</p>
                        </noscript>
                    </div>
                            </div>
    
                  </a>
                </h1>
              </li>
              <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
            </ul>
    
             <section class="top-bar-section"> 
             <ul class="left">
    
                <li><a class="menubaraller" href="/Biography.html" >About</a></li>
    
                           </ul>
           </section>
        </nav>
    
  • Update : and you can view the result here : coraliediatkine.eu/Biography2.html. It's not of course what I'd like, and my menu is not responsive anymore....

      <body>
    
        <nav class="top-bar" data-topbar>
        <ul class="title-area">
    
          <li class="name"> 
                     <a href="#">
    
    
                <div id="content">
                <div>
                    <canvas id="filltile2" data-processing-sources="/SketchBio/fill_tile2.pde" width="50" height="50">
                        <p>Your browser does not support the canvas tag.</p>
                        <!-- Note: you can put any alternative content here. -->
                    </canvas>
                    <noscript>
                        <p>JavaScript is required to view the contents of this page.</p>
                    </noscript>
                </div>
                        </div>
    
              </a>
    
          </li>
          <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
        </ul>
    
         <section class="top-bar-section"> 
         <ul class="left">
    
            <li><a class="menubaraller" href="/Biography.html" >About</a></li>
    
           <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>
    
                       </ul>
       </section>
    </nav>
    
  • Oh I got the solutio :

        <nav class="top-bar" data-topbar>
        <ul class="title-area">
    
          <li class="name"> 
                     <a href="#"><canvas id="filltile2" data-processing-sources="/SketchBio/fill_tile2.pde" width="50" height="50">
                        <p>Your browser does not support the canvas tag.</p>
                        <!-- Note: you can put any alternative content here. -->
                    </canvas>
    
    
    
              </a>
    
          </li>
          <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
        </ul>
    
         <section class="top-bar-section"> 
         <ul class="left">
    
            <li><a class="menubaraller" href="/Biography.html" >About</a></li>
                <li><a class="menubaraller" href="/ReadMe.html" >How To...</a></li>   
               <li><a class="menubaraller" href="/Spatial Audio.html">Spatial Audio</a></li>
     <li><a class="menubaraller" href="/Sound Design.html">Sound Design</a></li>
               <li><a class="menubaraller" href="/Music.html" >Music</a></li>
      <li><a class="menubaraller" href="/Vocal Performance and Improvisation.html">Voice</a></li>
                 <li><a class="menubaraller" href="/EarlierMusicWorks.html" >Earlier Works</a></li>
           <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>
    
                       </ul>
       </section>
    </nav>
    
Sign In or Register to comment.