Skip to content

GitLab

Commit 41abc1d7 authored by christof's avatar christof
Browse files

Merge branch 'master' of git.sc.uni-leipzig.de:cu268hafe/lsgm

parents 69c7be81 7671d3ca
Hide whitespace changes
Inline Side-by-side
casino/processing.html 0 → 100644
View file @ 41abc1d7
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Spass mit Processing</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<style>
h3 {
font-size: 110% !important;
}
#spoiler {
opacity: 0;
}
#spoiler:hover {
opacity: 1;
}
.hand {
cursor:pointer;
}
.btn {
cursor:pointer;
border-style:dotted;
border-width:3px;
border-radius: 5px;
border-color:white;
}
.btn:hover {
border-style:dotted;
border-width:3px;
border-radius: 5px;
border-color:red;
}
.slot {
float:left;
margin: 5px;
padding: 5px;
border-color: yellow;
border-style: solid;
border-width: 3px;
background: grey;
}
a {
cursor: pointer;
}
.unitable {
table-layout: fixed;
width: 500px;
font-size: 5px;
}
th,
td {
border-bottom: 0px solid !important;
width: 5px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Spaß mit Processing</section>
<section>
<section data-background-color="#388e3c">Was Ist JavaScript?</section>
<section>
<h3>Die Programmiersprache direkt in deinem Browser</h3>
<ul>
<li>Öffne Einstellungen ➜ Web Entwickler ➜ Console</li>
<li>Gehe auf google.de</li>
<li>Schreibe in die Eingabezeile <br>
<code 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%">
document.querySelector("input[type='text']").style.backgroundColor="red"
</code>
</li>
</ul>
</section>
<section>
<h3>JavaScript + Processing</h3>
<ul>
<li>JavaScript Steuert Aktionen auf Webseiten</li>
<li>Processing stellt zusätzlich einige nette Zeichenanweisungen zur Verfügung</li>
<li>Der <a href="https://editor.p5js.org/" target="_blank">Online-Editor</a> stellt eine
Möglichkeit zur Verfügung, diese Anweisungen direkt in Eurem Browser auszuführen</li>
<li> Eigentlich <i>keine</i> speziellen mathematischen Funktionen (wie Julia) ... dafür
keine Installation, kein Online-Service, ... und trotzdem eine "richtige" Programmiersprache
</li>
</ul>
</section>
<section>
<h3>Referenz</h3>
<ul>
<li><a href="https://p5js.org/reference/" target="_blank">Liste aller Zeichenfunktionen</a></li>
<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>
</ul>
</li>
</ul>
</section>
</section>
<section>
<section data-background-color="#388e3c">Das einfachste Programm</section>
<section>
<h3>Das einfachste Programm</h3>
<pre><code>
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
</code></pre>
</section>
<section>
<h3>Ein Kreis</h3>
<pre><code>
function setup() {
createCanvas(400, 400)
}
function draw() {
// ?? schaue in der Referenz, wie man einen Kreis (circle) zeichnet
}
</code></pre>
</section>
<section>
<h3>Ein Kreis 2</h3>
<pre><code>
function setup() {
createCanvas(400, 400)
}
function draw() {
// Zeichne den Kreis an X/Y-Position der Maus
}
</code></pre>
</section>
<section>
<h3>Ein Kreis 3</h3>
<pre><code>
function setup() {
createCanvas(400, 400)
}
function draw() {
// Zeichne den Kreis an Y/X-Position der Maus
}
</code></pre>
</section>
<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>
</ul>
</section>
<section>
<h3>Ein Kreis 3</h3>
<pre><code>let vy=1,vx=0,maxx=400,maxy=400
function setup() {
createCanvas(maxx, maxy)
fill('red')
posx=200
posy=0
}
function draw() {
clear()
posx=posx + vx
posy=posy + vy
if (posy > maxy) {
console.log("Ooops")
}
circle(posx, posy, 20)
}
</code></pre>
</section>
<section>
<h3>Ein sich bewegender Kreis</h3>
<ul>
<li>Der Kreis soll unten abprallen</li>
<li>Der kreis soll auch oben abprallen</li>
<li>Der Kreis soll mit vx=0.5 starten und auch links/rechts abprallen</li>
<li>Tipp: Oder (bei Bedingungen) schreibt man <pre><code>||</code></pre>
</ul>
</section>
<section>
<h3>Anziehung</h3>
<ul>
<li>Der Kreis soll von der Maus "angezogen" werden</li>
<li>Was heißt das? Er soll sich in "Richtung" der Maus bewegen. </li>
<li>Das muß also irgendwas mit der Differenz der posx/posy zur Mausposition zu tun haben?!</li>
</ul>
</section>
<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
function setup() {
createCanvas(maxx, maxy)
fill('red')
posx=200
posy=0
}
function draw() {
clear()
posx=posx + vx
posy=posy + vy
vx = vx + (mouseX -posx) / maxx / 5
vy = vy + (mouseY - posy) / maxy / 5
if ((posy > maxy) || (posy < 0)) {
vy = -vy
}
if ((posx > maxx) || (posx < 0)) {
vx = -vx
}
circle(posx, posy, 20)
}</code></pre>
</section>
</section>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>
casino/ziffern.html
View file @ 41abc1d7
......@@ -178,7 +178,8 @@
<section>
<h3> Was könnte Spass machen?</h3>
<ul>
<li> Doch nochmal weiter mit Julia machen?</li>
<li> Doch nochmal weiter mit Julia machen (aber wie?)?</li>
<li> Auf der Google-Forschungsplattform mit Python arbeiten? (Link im Chat)</li>
<li> Ein bißchen ähnliche Programmiersprache, aber mit Fokus auf Grafik +
direkt im Browser: <a href="https://editor.p5js.org/p5/sketches/Hello_P5:_animate" target="_blank">Processing</a>
<li>Rumspielen mit Logik-Blöcken (keine lästigen Tippfehler ;-) ):
......
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