Justus: Unterschied zwischen den Versionen
Aus exmediawiki
Justus (Diskussion | Beiträge) |
Justus (Diskussion | Beiträge) |
||
| Zeile 131: | Zeile 131: | ||
===='''Code04'''==== | ====='''Code04'''===== | ||
Rectangles und Funktion "for" | Rectangles und Funktion "for" | ||
Version vom 2. Juni 2025, 11:12 Uhr
050525
design a cover for a book with one rule, that gets repeated.
rule: connect a corner with the center of a line at (one of) the opposite side(s) with masking tape.
(inconsistent) outcome:

120525
Exmediawiki Into
break
https://bmoren.github.io/p5js-cheat-sheet/
Code01:
function setup() {
createCanvas(400, 400); noFill();
}
function draw() {
background(220);
rect(width / 2 - 100 / 2, height / 2 - 100 / 2, 100, 100); rect(width / 2 - 200 / 2, height / 2 - 250 / 2, 200, 250); rect(width / 2 - 150 / 2, height / 2 - 230 / 2, 150, 230); rect(width / 2 - 40 / 2, height / 2 - 40 / 2, 40, 40); rect(width / 2 - 190 / 2, height / 2 - 260 / 2, 190, 260);
}
https://editor.p5js.org/jkfmn/full/-Do64urgx
Code02:
function setup() {
createCanvas(400, 600); //noLoop(); //Loop an/aus noFill();
}
function draw() {
background(220); let rectHeight = random(50, 100); //variable für die des dreiecks vergeben let rectWidth = random(50, 100); let rectX = width/2 - random(50,100)/2; //einfach Wert durch random() ersetzt let rectY = height/2 - random(50,100)/2; rect(rectX,rectY,rectWidth,rectHeight) //how to safe the singular frames???
}
https://editor.p5js.org/jkfmn/full/pf3QVzbWD
Code03:
function setup() {
createCanvas(500, 600); noFill();
}
function draw() {
background(220);
rect(100,300,200,100); rect(300,250,100,150); rect(150,250,75,50); rect(225,250,75,50); rect(300,200,100,50); rect(325,175,50,25); triangle(100,300,150,300,150,250) triangle(300,200,325,175,325,200) triangle(375,200,375,175,400,200) triangle(325,175,375,175,350,50) let FB = 25; //Breite, Höhe und X, Y des ersten Fensters let FH = 50; let FX = 125; let FY = 335; let AB = 17.5; //Abstand der Fenster
rect(FX, FY, FB, FH); rect(FX+FB+AB,FY, FB,FH); rect(FX+(FB+AB)*2,FY, FB,FH); rect(FX+(FB+AB)*3,FY, FB,FH); ellipse(FX+FB/2,FY,FB); ellipse(FX+FB/2+(FB+AB),FY,FB); ellipse(FX+FB/2+(FB+AB)*2,FY,FB); ellipse(FX+FB/2+(FB+AB)*3,FY,FB);
}
https://editor.p5js.org/jkfmn/full/-Do64urgx
190525
Lichtenberg pattern
karlsims.com
Code04
Rectangles und Funktion "for"
function setup() {
createCanvas(400, 500); //noLoop(); //loop aus für animation frameRate(2); noFill(); rectMode(CENTER);
}
function draw() {
background(220);
drawSquare(); // bevor wir mit der "for" function gearbeitet haben, haben wir hier drawSqaure() einfach copy pasted. Die Funktion hatte wir vorher bestimmt.
}
function drawSquare() {
//alles was in der function steht wird ausgeführt, wenn die oben erwähnt wird. Also wie eine Variable nur das darin was passiert.
for (let i = 0; i < 20; i++) { //loop "for" 20 times. // "10" könnte auch Variable "maxRectangles" oÄ. sein.
let tileW = width; //variablen können "let" und "var" sein! Unterschied: "let" ist local - also die variable bezieht sich nur auf die Funktion in den klammern {} in der die steht. "var" ist universell über den ganzen code. Also klammerÜBERGREIFEND. Deshalb stehen die auch immer am anfang! Wenn _ vor variable dann verbinde ich zwei gleiche
let tileH = height;
let rectW = random(50, tileW / 2);
let rectH = random(50, tileW / 2);
let rectDiff = 10; //offset von x und y (rectDIFF)
rect(tileW / 2 + random(-rectDiff, rectDiff), tileH / 2 + random(-rectDiff, rectDiff), rectW, rectH); }
} //mouseX, mouseY folgt der Computermaus