Skip to content
Snippets Groups Projects
Commit 2ddf9acc authored by Sebastian Meier's avatar Sebastian Meier
Browse files

lectures/2d/loops

parent 032b06eb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 185 additions and 0 deletions
lectures/2d/loops/for/index.html 0 → 100644
+ 14
− 0
View file @ 2ddf9acc
<!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>
lectures/2d/loops/for/sketch.js 0 → 100644
+ 11
− 0
View file @ 2ddf9acc
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
fill(255);
for(let x = 1; x < 20; x += 1) {
circle(20 * x, 20, 10);
}
}
\ No newline at end of file
lectures/2d/loops/forfilling/index.html 0 → 100644
+ 14
− 0
View file @ 2ddf9acc
<!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>
lectures/2d/loops/forfilling/sketch.js 0 → 100644
+ 21
− 0
View file @ 2ddf9acc
const sketchWidth = 400;
const sketchHeight = 400;
const circleSize = 20;
const padding = 5;
const spacing = circleSize + 2 * padding;
// calculate how many rows and columns we need
const columns = Math.floor(sketchWidth / spacing);
const rows = Math.floor(sketchHeight / spacing);
function setup () {
createCanvas(sketchWidth, sketchHeight);
}
function draw () {
for(let x = 0; x <= columns; x += 1) {
for(let y = 0; y <= rows; y += 1) {
circle(x * spacing, y * spacing, circleSize);
}
}
}
\ No newline at end of file
lectures/2d/loops/forrandom/index.html 0 → 100644
+ 14
− 0
View file @ 2ddf9acc
<!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>
lectures/2d/loops/forrandom/sketch.js 0 → 100644
+ 17
− 0
View file @ 2ddf9acc
const sketchWidth = 400;
const sketchHeight = 400;
function setup () {
createCanvas(sketchWidth, sketchHeight);
// we add a random number as the distance to the next rectangle
for(let y = 0; y < sketchHeight; y += random(2, 10)) {
const rectHeight = random(10, 20);
rect(0, y, sketchWidth, rectHeight);
// next we add the random height of the last rectangle
y += rectHeight;
}
}
function draw () {
}
\ No newline at end of file
lectures/2d/loops/randomcolors/index.html 0 → 100644
+ 14
− 0
View file @ 2ddf9acc
<!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>
lectures/2d/loops/randomcolors/sketch.js 0 → 100644
+ 22
− 0
View file @ 2ddf9acc
const sketchWidth = 400;
const sketchHeight = 400;
const size = 20;
function setup() {
createCanvas(sketchWidth, sketchHeight);
}
function draw(){
background(255);
noStroke();
const columns = sketchWidth / size;
const rows = sketchHeight / size;
for (let x = 0; x < columns; x += 1) {
for (let y = 0; y < rows; y += 1) {
fill(random(125, 175), 100, 100);
rect(x * size, y * size, size, size);
}
}
}
\ No newline at end of file
lectures/2d/loops/while/index.html 0 → 100644
+ 14
− 0
View file @ 2ddf9acc
<!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>
lectures/2d/loops/while/sketch.js 0 → 100644
+ 13
− 0
View file @ 2ddf9acc
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
fill(255);
let x = 1;
while (x < 20) {
circle(20 * x, 20, 10);
x += 1;
}
}
\ No newline at end of file
lectures/2d/loops/whilenested/index.html 0 → 100644
+ 14
− 0
View file @ 2ddf9acc
<!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>
lectures/2d/loops/whilenested/sketch.js 0 → 100644
+ 17
− 0
View file @ 2ddf9acc
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
fill(255);
let x = 1;
while(x < 20) {
let y = 1;
while(y < 20) {
circle(20 * x, 20 * y, 10);
y += 1;
}
x += 1;
}
}
\ No newline at end of file
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