Difference between revisions of "Javascript for Artists"
(→Android Programmierung mit Processing) |
(→Android Programmierung mit Processing) |
||
| Line 127: | Line 127: | ||
== Android Programmierung mit Processing == | == Android Programmierung mit Processing == | ||
| − | Tutorial von Daniel Sauter | + | * Tutorial von Daniel Sauter – [http://pragprog.com/titles/dsproc/source_code Code-Examples] |
| − | [http://pragprog.com/titles/dsproc/source_code Code-Examples] | + | * Androids widgets für Android Processing (GUI) – [https://code.google.com/p/apwidgets/w/list apwidgets] |
| − | + | ||
| − | Androids widgets für Android Processing (GUI) | + | |
| − | [https://code.google.com/p/apwidgets/w/list apwidgets] | + | |
<br> | <br> | ||
Latest revision as of 17:03, 15 July 2013
Contents
Javascript for Artists
Javascript-Tutorial mit kreativer Zielsetzung.
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>
<body> </body> </source>
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>
<body> <script language="JavaScript" src="graphic001.js" type="text/javascript"></script> </body> </source>
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>
<body> </body> </source>
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
