lectures/2d/drawing

cef23434 · Sebastian Meier · dc65149c · cef23434 · cef23434 · cef23434
Commit cef23434 authored 2 years ago by Sebastian Meier
--- a/lectures/2d/drawing/arc/index.html
+++ b/lectures/2d/drawing/arc/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sketch</title>
+    <link rel="stylesheet" type="text/css" href="../libraries/p5js/p5.css">
+  </head>
+  <body>
+    <script src="../libraries/p5js/p5.min.js"></script>
+    <script src="../libraries/p5js/libraries/p5.svg.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>
--- a/lectures/2d/drawing/arc/sketch.js
+++ b/lectures/2d/drawing/arc/sketch.js
+function setup() {
+  createCanvas(400,400);
+}
+
+function draw(){
+  background(255);
+  strokeWeight(10);
+
+  arc(
+    200, 200,
+    200, 200,
+    Math.PI / 180 * 0,
+    Math.PI / 180 * 90,
+    OPEN
+  );
+}
\ No newline at end of file
--- a/lectures/2d/drawing/fill/index.html
+++ b/lectures/2d/drawing/fill/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sketch</title>
+    <link rel="stylesheet" type="text/css" href="../libraries/p5js/p5.css">
+  </head>
+  <body>
+    <script src="../libraries/p5js/p5.min.js"></script>
+    <script src="../libraries/p5js/libraries/p5.svg.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>
--- a/lectures/2d/drawing/fill/sketch.js
+++ b/lectures/2d/drawing/fill/sketch.js
+function setup() {
+  createCanvas(400,400);
+}
+
+function draw(){
+  background(255);
+
+  stroke('black');
+  strokeWeight(1);
+  fill(200, 0, 0);
+  circle(200, 200, 150);
+
+  stroke(0);
+  strokeWeight(5);
+  fill('rgba(100, 200, 100, 0.5)');
+  circle(250, 250, 50);
+}
\ No newline at end of file
--- a/lectures/2d/drawing/klint/index.html
+++ b/lectures/2d/drawing/klint/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sketch</title>
+    <link rel="stylesheet" type="text/css" href="../libraries/p5js/p5.css">
+  </head>
+  <body>
+    <script src="../libraries/p5js/p5.min.js"></script>
+    <script src="../libraries/p5js/libraries/p5.svg.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>
--- a/lectures/2d/drawing/klint/sketch.js
+++ b/lectures/2d/drawing/klint/sketch.js
+function setup() {
+  createCanvas(400,400);
+}
+
+function draw(){
+  background('#CF5D42');
+
+  noStroke();
+
+  fill('#7CA2D7');
+  arc(
+    200, 200,
+    300, 300,
+    Math.PI / 180 * -90,
+    Math.PI / 180 * 90,
+    CHORD
+  );
+
+  fill('#E5C762');
+  arc(
+    200, 200,
+    200, 200,
+    Math.PI / 180 * -90,
+    Math.PI / 180 * 90,
+    CHORD
+  );
+
+  fill('#D8846A');
+  arc(
+    200, 200,
+    100, 100,
+    Math.PI / 180 * -90,
+    Math.PI / 180 * 90,
+    CHORD
+  );
+
+  fill('#D9D2C8');
+  arc(
+    200, 200,
+    300, 300,
+    Math.PI / 180 * 90,
+    Math.PI / 180 * 270,
+    CHORD
+  );
+
+  fill('#2D2D2D');
+  arc(
+    200, 200,
+    200, 200,
+    Math.PI / 180 * 90,
+    Math.PI / 180 * 270,
+    CHORD
+  );
+
+  noLoop();
+}
\ No newline at end of file