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

clean up repo

parent 0e42c72f
Branches main
No related tags found
No related merge requests found
Showing
with 0 additions and 639 deletions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
createCanvas(400, 400);
noStroke();
fill("red");
circle(50, 50, 20);
}
function draw() {
background("#ffffffd3");
circle(random(width), random(height), 10)
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
pixelDensity(1)
createCanvas(400, 400, SVG);
}
function draw() {
background(237, 209, 232);
fill(255, 255, 255);
noStroke();
circle(200, 200, 200);
fill(214, 139, 201);
noStroke();
arc(201, 250, 100, 100,
0.5 * Math.PI,
1.5 * Math.PI,
OPEN);
fill(214, 139, 201);
noStroke();
arc(200, 200, 200, 200,
1.5 * Math.PI,
0.5 * Math.PI,
OPEN);
fill(255, 255, 255);
noStroke();
arc(199, 150, 100, 100,
1.5 * Math.PI,
0.5 * Math.PI,
OPEN);
fill(255, 255, 255);
noStroke();
circle(200, 250, 30);
fill(214, 139, 201);
noStroke();
circle(200, 150, 30);
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
createCanvas(400, 400);
}
let pieChart = 0;
function draw() {
background(255);
fill(214, 139, 201);
stroke("black");
arc(
200, 200,
200, 100,
0,
pieChart * Math.PI,
PIE
);
pieChart += 0.01;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
createCanvas(400, 400, SVG);
}
function draw() {
background(242, 158, 12);
stroke(145,6,9)
strokeWeight(5);
line(100, 100, 100, 300);
fill(255, 0, 0);
ellipse(100, 200, 150, 80);
fill(0, 0, 0);
rect(50, 150, 50, 50);
fill(0, 255, 0);
rect(100, 200, 50, 50);
//2.Form x+150
stroke(145,6,9)
strokeWeight(5);
line(250, 100, 250, 300);
fill(255, 0, 0,);
ellipse(250, 200, 150, 80);
fill(0, 0, 255,100);
rect(200, 150, 50, 50);
fill(0, 255, 0);
rect(250, 200, 50, 50);
//1.Halbkreis
fill(255, 208, 56);
arc(100, 100,
50, 50,
Math.PI / 180 * 270,
Math.PI / 180 * 90,
OPEN);
stroke(145,6,9)
strokeWeight(5);
line(100, 75, 100, 125);
// 2.Halbkreis
fill(0, 20, 70);
arc(250, 300,
50, 50,
Math.PI / 180 * 270,
Math.PI / 180 * 90,
OPEN);
stroke(145,6,9)
strokeWeight(5);
line(250, 275, 250, 325);
fill(186, 94, 28)
circle(280, 50, 90);
//line(250, 275, 250, 325);
//fill(186, 94, 28)
//circle(260, 30, 90);
noLoop();
save("bild.svg");
}
function keyReleased() {
save("bild.svg");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
// pixelDensity(1)
// createCanvas(400, 400, SVG);
createCanvas(400, 400);
colorMode(HSL);
background("#1a1a1a"); // Kann auch in die draw funktion für einen anderen Effekt, beis statischen Ergebnissen macht es keinen Unterschied
// Color definition options: 0-255; rgb; rgba; css-Farben (in Anführungszeichen; hier nebne Wort auch hex, rgb, rgba möglich), u.v.m.
// background(0,0,255,0) = background("rgba(0,0,255,0)")
angleMode(DEGREES); // oder RADIANS
randomSeed()
}
// Color var
let c = 0;
// Coordinate starting points
let x1 = 1;
let x2 = 1;
let y1 = 1;
let y2 = 1;
// direction of change
let x1vz = 1;
let x2vz = 1;
let y1vz = 1;
let y2vz = 1;
// To be able to count and stop the loop
let runCount = 0
function draw() {
// Format and enable rotating colors by plugging a variable into the hsl color code
stroke(c,100,50)
strokeWeight(1)
line(x1,x2,y1,y2);
// Take care of keeping lines in the windows, bounce back from walls
if ( (x1 >= 400) || (x1 <= 0) ) { x1vz = -x1vz; };
if ( (x2 >= 400) || (x2 <= 0) ) { x2vz = -x2vz; };
if ( (y1 >= 400) || (y1 <= 0) ) { y1vz = -y1vz; };
if ( (y2 >= 400) || (y2 <= 0) ) { y2vz = -y2vz; };
// Move the line
x1 += 1 * x1vz;
x2 += 6 * x2vz;
y1 += 4 * y1vz;
y2 += 2 * y2vz;
// Rotate through color wheel
if (c >=360) { c = 0; }
else { c+=1 }
// End Loop after 2000 runs
runCount++;
if (runCount >= 2000) {
noLoop(); // This stops the draw loop
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function setup() {
createCanvas(400, 400);
background(193, 205, 205);
// Mickey Mouse Face
// White Face
fill('white');
ellipse(200, 200, 200, 200);
// Left Ear
fill('black');
ellipse(120, 110, 100, 100);
// Right Ear
fill('black');
ellipse(280, 110, 100, 100);
// Eyes
fill('white');
ellipse(170, 170, 70, 70);
ellipse(230, 170, 70, 70);
// Pupils
fill('black');
ellipse(170, 170, 30, 30);
ellipse(230, 170, 30, 30);
// Nose
fill('black');
ellipse(200, 220, 40, 40);
// mouth 2
fill (255,255,255)
ellipse (250,260,30,30);
strokeWeight (6)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
createCanvas(400, 400);
frameRate(2);
}
let wechselVariable = 0;
function draw() {
background(240);
noStroke();
strokeWeight(1);
let x = random(width); // Zufällige x-Koordinate
let y = random(height); // Zufällige y-Koordinate
// Zeichne ein Element an der zufälligen Position
fill(random(255), random(255), random(255));
ellipse(x, y, 5, 5);
text(wechselVariable, 20, 20);
if (wechselVariable === 0) {
fill(70, 0, 0)
stroke(90, 0, 0)
strokeWeight (5)
circle(50, 50, 10)
circle(100, 50, 10)
circle(150, 50, 10)
circle(200, 50, 10)
circle(250, 50, 10)
circle(300, 50, 10)
circle(350, 50, 10)
circle(50, 100, 10)
circle(100, 100, 10)
circle(150, 100, 10)
circle(200, 100, 10)
circle(250, 100, 10)
circle(300, 100, 10)
circle(350, 100, 10)
circle(50, 150, 10)
circle(100, 150, 10)
circle(150, 150, 10)
circle(200, 150, 10)
circle(250, 150, 10)
circle(300, 150, 10)
circle(350, 150, 10)
fill(70, 0, 200)
stroke(90, 0, 200)
strokeWeight (1)
circle(50, 200, 10)
circle(100, 200, 10)
circle(150, 200, 10)
circle(200, 200, 10)
circle(250, 200, 10)
circle(300, 200, 10)
circle(350, 200, 10)
circle(50, 250, 10)
circle(100, 250, 10)
circle(150, 250, 10)
circle(200, 250, 10)
circle(250, 250, 10)
circle(300, 250, 10)
circle(350, 250, 10)
circle(50, 300, 10)
circle(100, 300, 10)
circle(150, 300, 10)
circle(200, 300, 10)
circle(250, 300, 10)
circle(300, 300, 10)
circle(350, 300, 10)
circle(50, 350, 10)
circle(100, 350, 10)
circle(150, 350, 10)
circle(200, 350, 10)
circle(250, 350, 10)
circle(300, 350, 10)
circle(350, 350, 10)
}
wechselVariable += 1;
if (wechselVariable > 1) {
wechselVariable = 0;
}
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function setup() {
createCanvas(400, 400);
background('ghostwhite');
}
function draw() {
stroke(0);
strokeWeight(5);
noFill();
rect (5, 5, 390, 390);
strokeWeight(2);
// 11 Kreise im Halbkreis
for (let i = 0; i < 11; i++) {
let angle = map(i, 0, 11, 0.9 * PI, 0);
let x = width / 2 + 100 * cos(angle); // x-Achse
let y = height / 2 + 100 * sin(angle); // y-Achse
ellipse(x, y, 35, 35);
}
line (200, 280, 260, 100);
line (200, 280, 140, 100);
// Rechteck rechts
rotate(radians(20)); // Ursprung zum Zentrum
rect(280, 0, 100, 15);
rect(280, 16, 100, 15);
rect(280, 32, 100, 15);
// Rechteck links
rotate(radians(-35));
rect(10, 130, 100, 15);
rect(10, 146, 100, 15);
rect(10, 162, 100, 15);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
stroke ('green');
strokeWeight(5);
translate(200, 200)
for(let angle = 0; angle < 720; angle += 15) {
const radius = angle / 3;
const x = radius * cos(Math.PI / 180 * angle);
const y = radius * sin(Math.PI / 180 * angle);
strokeWeight(radius / 20);
circle(x, y, radius / 5);
console.log(angle, "radius", radius, "strokeWeight", radius / 20, "radiusCircle", radius / 5);
}
noLoop();
// circle(50, 50, 100);
// circle(147, 60, 95);
// circle(240, 75, 90);
// circle(310, 124, 83);
// circle(340, 200, 75);
// circle(330, 274, 70);
// circle(300, 338, 65);
// circle(238, 361, 58);
// circle(180, 355, 55);
// circle(130, 335, 50);
// circle(100, 298, 45);
// circle(80, 256, 40);
// circle(90, 219, 35);
// circle(120, 198, 30);
// circle(150, 190, 25);
// circle(171, 200, 20);
// circle(180, 215, 15);
// circle(80, 280, 10);
// circle(80, 280, 5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch1</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>
function preload(){
// preload assets
}
function setup() {
createCanvas(400, 400, WEBGL);
// Canvas created: Width (400) and Height (400)
// WebGL renderer enables 3D rendering
background(255);
// sets background color of the canvas to white with RGB
}
function draw() {
// stroke("black");
//
noFill();
// ensures the mesh has no fill
stroke(0, 255, 0);
// stroke color is set to green
strokeWeight(1);
// stroke thickness to 1
rotateZ(PI / 4);
// rect(100, 10, 0, 50, 50);
// rotateY(PI / 4);
// rotateX(PI / 4);
// // rotates drawing on the Z-axis by 45 degrees (Pi/4 radians)
for (let x = -302; x <= 302; x += 20) {
beginShape();
// defines start of the shape: where the lines start connecting to vertices
for (let y = -302; y <= 302; y += 20) {
// for loop: the wavy lines run from z1=-302 to z2=302 in the 3D space and 20 is the incremention between waves
const z = sin(radians(x + y)) * 80;
// calculates the z-cordinate of each vertex, sin makes wavy shape in the 3D space
vertex(x, y, z);
// creates vertex at calculated shape
//circle(x,y,5);
}
endShape();
// defines end of the shape: where lines stop connecting to vertices
}
// for (let i = -302; i <= 302; i += 20) {
// beginShape();
// for (let j = -302; j <= 302; j += 20) {
// const z = sin(radians(i + j)) * 40;
// vertex(j, i, z);
// }
// endShape();
// }
noLoop();
// makes sure the drawing doesnt change with a reaload
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment