Commit de336c85 authored by christof's avatar christof
Browse files

more processing examples

parent 41abc1d7
......@@ -79,12 +79,12 @@
<li>Öffne Einstellungen ➜ Web Entwickler ➜ Console</li>
<li>Gehe auf google.de</li>
<li>Schreibe in die Eingabezeile <br>
<code style="font-size:33%">
<code class="lang-javascript" style="font-size:33%">
document.querySelector(".lnXdpd").srcset="https://i.kym-cdn.com/entries/icons/original/000/000/091/TrollFace.jpg"
</code>
</li>
<li> und
<code style="font-size:33%">
<code class="lang-javascript" style="font-size:33%">
document.querySelector("input[type='text']").style.backgroundColor="red"
</code>
</li>
......@@ -110,8 +110,8 @@
<li>Processing kann auf Eingabe (Maus, Tastatur, Handy-Bewegungen) reagieren</li>
<li>Ablauf meist:
<ul>
<li>Erstellen einer Umgebung mit <code>setup()</code></li>
<li>Kontinuierliches Zeichnen mit <code>draw()</code> (unter Berücksichtigung von Mausposition, Variable etc)</li>
<li>Erstellen einer Umgebung mit <code class="lang-javascript">setup()</code></li>
<li>Kontinuierliches Zeichnen mit <code class="lang-javascript">draw()</code> (unter Berücksichtigung von Mausposition, Variable etc)</li>
</ul>
</li>
</ul>
......@@ -121,7 +121,7 @@
<section data-background-color="#388e3c">Das einfachste Programm</section>
<section>
<h3>Das einfachste Programm</h3>
<pre><code>
<pre><code class="lang-javascript">
function setup() {
createCanvas(400, 400);
}
......@@ -133,7 +133,7 @@ function draw() {
</section>
<section>
<h3>Ein Kreis</h3>
<pre><code>
<pre><code class="lang-javascript">
function setup() {
createCanvas(400, 400)
}
......@@ -145,7 +145,7 @@ function draw() {
</section>
<section>
<h3>Ein Kreis 2</h3>
<pre><code>
<pre><code class="lang-javascript">
function setup() {
createCanvas(400, 400)
}
......@@ -157,7 +157,7 @@ function draw() {
</section>
<section>
<h3>Ein Kreis 3</h3>
<pre><code>
<pre><code class="lang-javascript">
function setup() {
createCanvas(400, 400)
}
......@@ -170,14 +170,14 @@ function draw() {
<section>
<h3>Ein paar mehr Funktionen</h3>
<ul>
<li>Variablen werden mit <code>let</code> eingeführt</li>
<li><code>fill</code> setzt den Füllmodus</li>
<li><pre><code>if</code></pre> für Wenn-Dann Bedingungen</li>
<li>Variablen werden mit <code class="lang-javascript">let</code> eingeführt</li>
<li><code class="lang-javascript">fill</code> setzt den Füllmodus</li>
<li><pre><code class="lang-javascript">if (bedingung) {</code></pre> für Wenn-Dann Bedingungen</li>
</ul>
</section>
<section>
<h3>Ein Kreis 3</h3>
<pre><code>let vy=1,vx=0,maxx=400,maxy=400
<pre><code class="lang-javascript">let vy=1,vx=0,maxx=400,maxy=400
function setup() {
createCanvas(maxx, maxy)
fill('red')
......@@ -215,8 +215,7 @@ function draw() {
<section>
<h3>Anziehung</h3>
<span onclick="document.getElementById('attr').style.visibility='visible'">Meine Lösung</span>
<pre id="attr" style="visibility:hidden"><code>let vy=1,vx=0,maxx=400,maxy=400
let vy=1,vx=0.5,maxx=400,maxy=400
<pre id="attr" style="visibility:hidden"><code class="lang-javascript">let vy=1,vx=0,maxx=400,maxy=400
function setup() {
createCanvas(maxx, maxy)
fill('red')
......@@ -240,7 +239,54 @@ function draw() {
}</code></pre>
</section>
</section>
<section>
<section data-background-color="#388e3c">Was hat das mit Mathe zu tun?</section>
<section>
<h3>Beliebiges Mathe-Rätsel auf youtube</h3>
<ul>
<li><a target="_blank" href="https://www.youtube.com/watch?v=RY7YKSw1t_M">https://www.youtube.com/watch?v=RY7YKSw1t_M</a></li>
<li>Super-Schwer (Online-Mathe-Olympiade für Teams</li>
<li>6 Apfelkerne, jeder keimt pro Tag mit Wahrscheinlichkeit 50%. <br>
Wieviele Tage würde man <b>im Durchschnitt</b> warten müssen, bis alle
Kerne gekeimt sind?</li>
<li>Explizite Lösung ist schwer, aber simulieren ist einfach!</li>
</ul>
</section>
<section>
<h3>Lösung</h3>
<pre><code class="lang-javascript">let tage,sim
let gewartet = 0
let kerne=6
function setup() {
for (sim=0; sim < 100000; sim++) {
tage = 0
gekeimt = 0
while (gekeimt < kerne) {
tage = tage + 1
neugekeimt = 0
for (i=0;i < kerne-gekeimt;i++) {
if (Math.random() < 0.5) {
neugekeimt = neugekeimt + 1
}
}
gekeimt = gekeimt + neugekeimt
}
gewartet = gewartet + tage
}
createCanvas(400, 400)
text("Es sind: " + gewartet / sim + " Tage", 10,10)
}</code></pre>
</section>
<section>
<h3>Was können Computer gut?</h3>
<ul>
<li>Geschickt Milliarden verschiedene Lösungen durchprobieren</li>
<li>Entwicklungen simulieren</li>
<li>Flächen berechnen durch Pixel auszählen</li>
</ul>
</section>
</section>
</section>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment