› › ›

how to embed a sketch in a website

coraliediatkinecoraliediatkine
edited August 2014 in JavaScript Mode

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!

Tagged:

Best Answers

Answers

  • PhiLhoPhiLho
    Answer ✓

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

  • GoToLoopGoToLoop
    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!

  • ChrisirChrisir
    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 ;-)

  • ChrisirChrisir
    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));
  }
}
  • coraliediatkinecoraliediatkine

    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!

  • GoToLoopGoToLoop
    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! ;)

  • coraliediatkinecoraliediatkine

    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!

  • ChrisirChrisir

    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!

  • ChrisirChrisir

    oh, I see, thanks!

  • coraliediatkinecoraliediatkine

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

  • PhiLhoPhiLho
    Answer ✓

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

  • coraliediatkinecoraliediatkine

    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>
  • coraliediatkinecoraliediatkine

    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>
  • coraliediatkinecoraliediatkine

    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.