Browse Source

Walking cocotte 'awful

master
Samuel ORTION 1 year ago
parent
commit
435ca80beb
  1. BIN
      public/favicon.ico
  2. 25
      public/index.html
  3. 0
      public/scripts/script.js
  4. 77
      public/scripts/sketch.js
  5. 15
      public/styles/style.css

BIN
public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

25
public/index.html

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cot Cot ? Cot !</title>
<link rel="stylesheet" href="/styles/style.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="/scripts/script.js"></script>
<script src="/scripts/sketch.js"></script>
</head>
<body>
<main>
</main>
<footer>
&#127279; 2021 - Les Cocottes Minutes
</footer>
</body>
</html>

0
public/scripts/script.js

77
public/scripts/sketch.js

@ -0,0 +1,77 @@
let angles;
function setup() {
createCanvas(windowWidth, windowHeight);
angles = [
[0, true],
[0, false]
];
frameRate(60);
}
function draw() {
background(255);
draw_field();
draw_cotcot(1 / 4 * width, height / 2);
for (let i = 0; i < angles.length; i++) {
if (angles[i][1]) {
angles[i][0] += 1;
if (angles[i][0] > 20)
angles[i][1] = false;
} else {
angles[i][0] -= 1;
if (angles[i][0] < 0)
angles[i][1] = true;
}
}
}
function draw_field() {
// line(0, 3 / 4 * height, width, 3 / 4 * height);
noStroke();
fill(0, 255, 120);
rect(0, 2.5 / 4 * height, width, height - 2.5 / 4 * height);
fill(100, 100, 255);
rect(0, 0, width, 2.5 / 4 * height);
fill(255);
}
function draw_cotcot(x, y) {
fill(0);
let size = height / 4;
// rect(x, y, size, si]ze);
// Draw
let leg_length = height / 4;
draw_leg(x, y, leg_length, 90 + angles[0][0]);
draw_leg(x, y, leg_length, 90 - angles[1][0]);
fill(255);
noStroke();
ellipse(x, y - size / 4, size, size * 3 / 4);
ellipse(x + size / 2, y - size / 2, size / 3, size / 2);
fill(255, 255, 0);
let beak_size = 10;
let lap = 1.57 * size / 2;
triangle(x + lap, y - lap - beak_size / 2, x + lap, y - lap + beak_size / 2, x + lap + beak_size, y - lap - beak_size / 2)
fill(255);
ellipse(x + 1.25 * size / 2, y - 1.5 * size / 2, size / 3, size / 3)
fill(0);
ellipse(x + 1.30 * size / 2, y - 1.55 * size / 2, 10, 10);
}
function draw_leg(x, y, length, theta) {
stroke(0);
angleMode(DEGREES);
ex1 = x + (length * cos(theta));
ex2 = y + (length * sin(theta));
line(x, y, ex1, ex2);
draw_fingers(ex1, ex2, length / 10);
}
function draw_fingers(x, y, length) {
stroke(0);
line(x, y, x + length * cos(30), y + length * sin(30));
line(x, y, x + length, y);
line(x, y, x + length * cos(-30), y + length * sin(-30));
}

15
public/styles/style.css

@ -0,0 +1,15 @@
body {
margin: 0;
padding: 0;
}
main {
width: 100vw;
height: 100vh;
}
footer {
text-align: center;
background-color: rgba(0, 0, 0, 0.75);
color: white;
}
Loading…
Cancel
Save