Javascript for Artists

Tools

Textbearbeitungsprogramm zum Schreiben des Codes TextWrangler
FTP-Programm zum Hochladen des Codes auf den WWW-Sever Cyberduck
Processing ist DIE Einsteiger Software für das Programmieren-Lernen. Mit Processing.js kann man Processing-Code auch JavaScript verwenden. www.processing.org
Eine Webseite auf die das iPhone als Webbrowser simuliert wird www.testiphone.com

Examples

Getting started

HTML-Datei: example001.htm <source lang="html4strict"> <head>

  <title>Test</title>
    <script language="JavaScript" src="meinscript.js" type="text/javascript">
  </script>

</head>

JavaScript-Datei: meinscript.js <source lang="javascript"> // show a pop-up alert("Hi!");

/*

 write "done." to the webpage

/

document.write("done."); </source>

Online-Test: example001.htm

Graphic 1

HTML-Datei: example002.htm <source lang="html4strict"> <head>

  <title>Test2</title>
  		<script type="text/javascript" src="http://www.walterzorn.de/en/scripts/wz_jsgraphics.js"></script>

</head>

JavaScript-Datei: graphic001.js <source lang="javascript"> var e1 = new jsGraphics(); // paint graphic-layer directly to the screen // "e1" is a variable that can be named by you

e1.setColor("#000000"); // black e1.drawEllipse(50, 50, 40, 40); // x, y, height, width e1.paint(); // paint the object "e1" directly to the screen </source>

Online-Test: example002.htm

Processing 1

HTML-Datei: processing001.htm <source lang="html4strict"> <head>

  <title>ProcessingTest1</title>
      <script src="processing-1.1.0.min.js"></script>  
      <canvas data-processing-sources="processing001.pde"></canvas>

</head>

Processing-Datei: processing001.pde <source lang="java"> void setup() {

 size(320,365);
 background(80);

}

void draw() {

 stroke(200);
 smooth();
 line(0, 0, width, height);

} </source>

Uploade die Datei "processing-1.1.0.min.js" auf dem Web-Server neben die HTML-Datei und die Processing-Datei in den gleichen Ordner!

Online-Test: processing001.htm

Online-Test: processing002.htm

Javascript Tutorials

www.kostenlose-javascripts.de von Michael Antrag
www.schillmania.com Die Grundlagen von Animationen mit JavaScript
www.w3schools.com Beispiele mit Online Editor!
www.walterzorn.de JavaScript-Vektorgrafikbibliothek
www.processingjs.org von John Resig

Android Programmierung mit Processing

Tutorial von Daniel Sauter – Code-Examples
Androids widgets für Android Processing (GUI) – apwidgets

Javascript for Artists

Contents