update
This commit is contained in:
parent
0af49dd0a0
commit
e6fa24bda3
33
0.作品模板.html
Normal file
33
0.作品模板.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>作品模板</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script>
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 600);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
imageMode(CENTER);
|
||||||
|
cursor(CROSS);
|
||||||
|
frameRate(60);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(0);
|
||||||
|
|
||||||
|
drawGrid(32);
|
||||||
|
textInfo("作品模板", "2022-12-12");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
139
1.基础图形绘画练习一.html
Normal file
139
1.基础图形绘画练习一.html
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<title>基础图形绘画练习一</title>
|
||||||
|
<script>
|
||||||
|
function setup() {
|
||||||
|
createCanvas(400, 600);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
noStroke();
|
||||||
|
|
||||||
|
// 天空
|
||||||
|
background("lightblue");
|
||||||
|
|
||||||
|
// 地面
|
||||||
|
fill("lightgreen");
|
||||||
|
rect(0, 275, width, height);
|
||||||
|
|
||||||
|
stroke("#333333");
|
||||||
|
|
||||||
|
// 太阳
|
||||||
|
fill("#FF0000");
|
||||||
|
circle(100, 100, 75);
|
||||||
|
|
||||||
|
// 光
|
||||||
|
let a = frameCount % 50;
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
push();
|
||||||
|
translate(100, 100);
|
||||||
|
rotate((i / 4) * PI);
|
||||||
|
triangle(-5, 50 + a, 5, 50 + a, 0, 65 + a);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 烟囱
|
||||||
|
fill("#7733CC");
|
||||||
|
rect(275, 125, 25, 100);
|
||||||
|
|
||||||
|
// 房顶
|
||||||
|
fill("#DD66FF");
|
||||||
|
triangle(250, 150, 150, 200, 350, 200);
|
||||||
|
|
||||||
|
// 墙
|
||||||
|
fill("#FFDDAA");
|
||||||
|
rect(175, 200, 150, 100);
|
||||||
|
|
||||||
|
// 窗户
|
||||||
|
fill("#FFFF66");
|
||||||
|
let b = map(a, 0, 50, -10, 10);
|
||||||
|
if (b > 0) {
|
||||||
|
ellipse(225, 225, 25 + b);
|
||||||
|
ellipse(275, 225, 25 - b);
|
||||||
|
} else {
|
||||||
|
ellipse(225, 225, 25 - b);
|
||||||
|
ellipse(275, 225, 25 + b);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 门
|
||||||
|
fill("#DD33CC");
|
||||||
|
rect(235, 250, 30, 50);
|
||||||
|
|
||||||
|
bird(200, 75);
|
||||||
|
bird(300, 50);
|
||||||
|
|
||||||
|
// 树叶
|
||||||
|
fill("#66AA00");
|
||||||
|
triangle(100, 340, 40, 400, 160, 400);
|
||||||
|
fill("#AAFF00");
|
||||||
|
triangle(100, 325, 50, 375, 150, 375);
|
||||||
|
fill("#66AA00");
|
||||||
|
triangle(100, 305, 60, 350, 140, 350);
|
||||||
|
|
||||||
|
// 树干
|
||||||
|
fill("#FFDDAA");
|
||||||
|
rect(85, 400, 30, 50);
|
||||||
|
|
||||||
|
// 小路
|
||||||
|
fill("#DD66FF");
|
||||||
|
ellipse(275, 350, 50, 25);
|
||||||
|
fill("#7733CC");
|
||||||
|
ellipse(288, 400, 75, 35);
|
||||||
|
fill("#66AA00");
|
||||||
|
ellipse(300, 460, 100, 50);
|
||||||
|
fill("#FF9933");
|
||||||
|
ellipse(325, 550, 125, 70);
|
||||||
|
|
||||||
|
// 蘑菇
|
||||||
|
fill("#FF0000");
|
||||||
|
arc(175, 475, 50, 50, PI, 0, PIE);
|
||||||
|
fill("#FFDDAA");
|
||||||
|
circle(157, 470, 8);
|
||||||
|
circle(165, 462, 8);
|
||||||
|
circle(175, 457, 8);
|
||||||
|
circle(175, 470, 8);
|
||||||
|
circle(185, 462, 8);
|
||||||
|
circle(193, 470, 8);
|
||||||
|
fill("#FF9933");
|
||||||
|
rect(165, 475, 20, 20);
|
||||||
|
|
||||||
|
noStroke();
|
||||||
|
fill(0);
|
||||||
|
text("作品：基础图形绘画练习一", 50, 550);
|
||||||
|
text("作者：赵海洋爸爸 三(8)班", 50, 570);
|
||||||
|
}
|
||||||
|
|
||||||
|
function bird(x, y) {
|
||||||
|
push();
|
||||||
|
let a = frameCount % 10;
|
||||||
|
noFill();
|
||||||
|
stroke(0);
|
||||||
|
translate(x, y);
|
||||||
|
fill("#FFDDAA");
|
||||||
|
arc(0, 0, 50, 50, 0, PI, PIE);
|
||||||
|
ellipse(30, -10, 30);
|
||||||
|
fill("#FFFFFF");
|
||||||
|
ellipse(28, -10, 10);
|
||||||
|
fill("#333333");
|
||||||
|
ellipse(28, -10, 5);
|
||||||
|
fill("#FF3333");
|
||||||
|
triangle(40, -15, 40, -5, 60, -10);
|
||||||
|
fill("#FFFF66");
|
||||||
|
triangle(-20, -20 + a * 2, -10, 5, 10, -5);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,23 +0,0 @@
|
|||||||
const circles = [
|
|
||||||
{ x: 100, y: 100, color: "red", size: 40 },
|
|
||||||
{ x: 200, y: 100, color: "orange", size: 40 },
|
|
||||||
{ x: 300, y: 100, color: "yellow", size: 40 },
|
|
||||||
{ x: 100, y: 200, color: "green", size: 40 },
|
|
||||||
{ x: 200, y: 200, color: "cyan", size: 40 },
|
|
||||||
{ x: 300, y: 200, color: "blue", size: 40 },
|
|
||||||
{ x: 100, y: 300, color: "purple", size: 40 },
|
|
||||||
{ x: 200, y: 300, color: "gray", size: 40 },
|
|
||||||
{ x: 300, y: 300, color: "black", size: 40 },
|
|
||||||
];
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
noLoop();
|
|
||||||
createCanvas(400, 400);
|
|
||||||
background(255);
|
|
||||||
strokeWeight(1);
|
|
||||||
stroke(0);
|
|
||||||
circles.forEach((o) => {
|
|
||||||
fill(o.color);
|
|
||||||
circle(o.x, o.y, o.size);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
35
1001.醉汉模拟.js
35
1001.醉汉模拟.js
@ -1,35 +0,0 @@
|
|||||||
let walker;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(400, 400);
|
|
||||||
background(255);
|
|
||||||
strokeWeight(2);
|
|
||||||
stroke("rgba(0,0,0,0.4)");
|
|
||||||
walker = new Walker(200, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
walker.move();
|
|
||||||
walker.show();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Walker {
|
|
||||||
constructor(x, y) {
|
|
||||||
this.pos = createVector(x, y);
|
|
||||||
this.count = 0;
|
|
||||||
}
|
|
||||||
move() {
|
|
||||||
let step = p5.Vector.random2D().mult(2);
|
|
||||||
this.pos.add(step);
|
|
||||||
if (this.count++ > 10000) {
|
|
||||||
this.pos = createVector(200, 200);
|
|
||||||
background(255);
|
|
||||||
this.count = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
show() {
|
|
||||||
point(this.pos.x, this.pos.y);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
100
1002.引力模拟.js
100
1002.引力模拟.js
@ -1,100 +0,0 @@
|
|||||||
/**
|
|
||||||
* 引力模拟
|
|
||||||
*/
|
|
||||||
|
|
||||||
const planets = [];
|
|
||||||
const plantsNumber = 10;
|
|
||||||
let sun;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(1728, 972);
|
|
||||||
noStroke();
|
|
||||||
colorMode(HSB);
|
|
||||||
sun = createVector(width / 2, height / 2);
|
|
||||||
for (let i = 0; i < plantsNumber; i++) {
|
|
||||||
const planet = new Planet(random(width), random(height));
|
|
||||||
planet.vel = p5.Vector.random2D();
|
|
||||||
planets.push(planet);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(0);
|
|
||||||
for (let i = 0; i < plantsNumber; i++) {
|
|
||||||
planets[i].update();
|
|
||||||
planets[i].drawPath();
|
|
||||||
}
|
|
||||||
for (let i = 0; i < plantsNumber; i++) {
|
|
||||||
planets[i].show();
|
|
||||||
}
|
|
||||||
fill("#FFFF77");
|
|
||||||
circle(sun.x, sun.y, 8);
|
|
||||||
}
|
|
||||||
|
|
||||||
class Planet {
|
|
||||||
constructor(x, y) {
|
|
||||||
this.pos = createVector(x, y);
|
|
||||||
this.vel = createVector(0, 0);
|
|
||||||
this.acc = createVector(0, 0);
|
|
||||||
this.color = color(random(0, 255), 255, 255);
|
|
||||||
this.path = [];
|
|
||||||
}
|
|
||||||
update() {
|
|
||||||
this.acc = p5.Vector.sub(sun, this.pos);
|
|
||||||
const dist = this.acc.mag() / 10;
|
|
||||||
this.acc.normalize().div(dist * dist);
|
|
||||||
this.vel.add(this.acc);
|
|
||||||
this.pos.add(this.vel);
|
|
||||||
this.path.push(this.pos.copy());
|
|
||||||
if (this.path.length > 1024) this.path.shift();
|
|
||||||
}
|
|
||||||
drawPath() {
|
|
||||||
push();
|
|
||||||
noFill();
|
|
||||||
let h = hue(this.color);
|
|
||||||
stroke(color(h, 255, 32));
|
|
||||||
strokeWeight(1);
|
|
||||||
beginShape();
|
|
||||||
this.path.forEach((v, i) => {
|
|
||||||
vertex(v.x, v.y);
|
|
||||||
});
|
|
||||||
endShape();
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
show() {
|
|
||||||
push();
|
|
||||||
translate(this.pos.x, this.pos.y);
|
|
||||||
|
|
||||||
push();
|
|
||||||
rotate(this.vel.heading());
|
|
||||||
const vel = this.vel.copy().mult(10);
|
|
||||||
vel.limit(50);
|
|
||||||
stroke("#007700");
|
|
||||||
line(0, 0, vel.mag(), 0);
|
|
||||||
line(vel.mag(), 0, vel.mag() - 2, 2);
|
|
||||||
line(vel.mag(), 0, vel.mag() - 2, -2);
|
|
||||||
pop();
|
|
||||||
|
|
||||||
push();
|
|
||||||
rotate(this.acc.heading());
|
|
||||||
const dir = this.acc.copy().mult(1000);
|
|
||||||
dir.limit(50);
|
|
||||||
stroke("#770000");
|
|
||||||
line(0, 0, dir.mag(), 0);
|
|
||||||
line(dir.mag(), 0, dir.mag() - 2, 2);
|
|
||||||
line(dir.mag(), 0, dir.mag() - 2, -2);
|
|
||||||
pop();
|
|
||||||
|
|
||||||
noStroke();
|
|
||||||
fill(this.color);
|
|
||||||
circle(0, 0, 4);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mouseClicked() {}
|
|
||||||
|
|
||||||
function switchFullscreen() {
|
|
||||||
let fs = fullscreen();
|
|
||||||
fullscreen(!fs);
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
let v0, v1, v2, v3;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(600, 400);
|
|
||||||
cursor(CROSS);
|
|
||||||
v0 = createVector(200, 200);
|
|
||||||
v1 = createVector(300, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
v2 = createVector(mouseX, mouseY).sub(v0).div(2);
|
|
||||||
v3 = vectorProjection(v2, v1);
|
|
||||||
|
|
||||||
background(0);
|
|
||||||
stroke("#777777");
|
|
||||||
translate(v0.x, v0.y);
|
|
||||||
line(v2.x, v2.y, v3.x, v3.y);
|
|
||||||
drawVector(v1, "#FF0000");
|
|
||||||
drawVector(v2, "#00FF00");
|
|
||||||
drawVector(v3, "#FFFF00");
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawVector(vector, color = "#FFFFFF") {
|
|
||||||
push();
|
|
||||||
fill(color);
|
|
||||||
stroke(color);
|
|
||||||
line(0, 0, vector.x, vector.y);
|
|
||||||
circle(0, 0, 4);
|
|
||||||
translate(vector.x, vector.y);
|
|
||||||
rotate(vector.heading());
|
|
||||||
triangle(0, 0, -4, -2, -4, +2);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
function vectorProjection(v1, v2) {
|
|
||||||
const v2n = v2.copy().normalize();
|
|
||||||
const sp = v1.dot(v2n);
|
|
||||||
return v2n.setMag(sp);
|
|
||||||
}
|
|
||||||
29
2.动态数组.js
29
2.动态数组.js
@ -1,29 +0,0 @@
|
|||||||
const circles = [];
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(600, 400);
|
|
||||||
strokeWeight(1);
|
|
||||||
stroke(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(255);
|
|
||||||
circles.forEach((o, i, circles) => {
|
|
||||||
fill(o.color);
|
|
||||||
circle(o.x, o.y, o.size);
|
|
||||||
o.y += 5;
|
|
||||||
if (o.y > 420) {
|
|
||||||
circles.splice(i, 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
text(circles.length, 40, 40);
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousePressed() {
|
|
||||||
circles.push({
|
|
||||||
x: mouseX,
|
|
||||||
y: mouseY,
|
|
||||||
color: Math.floor(random(100, 201)),
|
|
||||||
size: Math.floor(random(20, 41)),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
112
2.太阳公公钟.html
Normal file
112
2.太阳公公钟.html
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>太阳公公钟</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script>
|
||||||
|
const 分钟毫秒数 = 60 * 1000;
|
||||||
|
const 小时毫秒数 = 3600 * 1000;
|
||||||
|
const 半天毫秒数 = 3600 * 12 * 1000;
|
||||||
|
const 一天毫秒数 = 3600 * 24 * 1000;
|
||||||
|
const 时针角度除数 = 半天毫秒数 / 360;
|
||||||
|
const 分针角度除数 = 小时毫秒数 / 360;
|
||||||
|
const 秒针角度除数 = 分钟毫秒数 / 360;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(400, 400);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
frameRate(60);
|
||||||
|
noCursor();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background("skyblue");
|
||||||
|
let x = width / 2 || mouseX;
|
||||||
|
let y = height / 2 || mouseY;
|
||||||
|
|
||||||
|
// 画阳光
|
||||||
|
push();
|
||||||
|
translate(x, y);
|
||||||
|
stroke(255, 255, 0, 128);
|
||||||
|
strokeWeight(4);
|
||||||
|
let distance = 1 + (frameCount % 30);
|
||||||
|
for (let i = 0, n = 36; i < n; i++) {
|
||||||
|
line(0, -50 - distance * 10, 0, -100 - distance * 10);
|
||||||
|
rotate(360 / n);
|
||||||
|
}
|
||||||
|
// 画太阳
|
||||||
|
stroke(255, 255, 0, 255);
|
||||||
|
fill("#FFCC00");
|
||||||
|
strokeWeight(8);
|
||||||
|
circle(0, 0, 100);
|
||||||
|
noFill();
|
||||||
|
arc(-20, 0, 20, 20, -135, -45);
|
||||||
|
arc(20, 0, 20, 20, -135, -45);
|
||||||
|
arc(0, 10, 40, 40, 45, 135);
|
||||||
|
// 画时刻度
|
||||||
|
strokeWeight(2);
|
||||||
|
for (let i = 0, n = 12; i < n; i++) {
|
||||||
|
line(0, 40, 0, 50);
|
||||||
|
rotate(360 / n);
|
||||||
|
}
|
||||||
|
// 画分刻度
|
||||||
|
strokeWeight(1);
|
||||||
|
for (let i = 0, n = 60; i < n; i++) {
|
||||||
|
line(0, 45, 0, 50);
|
||||||
|
rotate(360 / n);
|
||||||
|
}
|
||||||
|
pop();
|
||||||
|
|
||||||
|
const 当前时间 = Date.now() + 小时毫秒数 * 8;
|
||||||
|
const angleHour = (当前时间 % 半天毫秒数) / 时针角度除数;
|
||||||
|
const angleMinute = (当前时间 % 小时毫秒数) / 分针角度除数;
|
||||||
|
const angleSecond = (当前时间 % 分钟毫秒数) / 秒针角度除数;
|
||||||
|
|
||||||
|
push();
|
||||||
|
translate(x, y);
|
||||||
|
// 画时针
|
||||||
|
push();
|
||||||
|
stroke(0);
|
||||||
|
strokeWeight(3);
|
||||||
|
rotate(angleHour);
|
||||||
|
line(0, 5, 0, -30);
|
||||||
|
pop();
|
||||||
|
|
||||||
|
// 画分针
|
||||||
|
push();
|
||||||
|
stroke(0);
|
||||||
|
strokeWeight(3);
|
||||||
|
rotate(angleMinute);
|
||||||
|
line(0, 5, 0, -40);
|
||||||
|
pop();
|
||||||
|
|
||||||
|
// 画秒针
|
||||||
|
push();
|
||||||
|
stroke(255, 0, 0);
|
||||||
|
strokeWeight(1);
|
||||||
|
rotate(angleSecond);
|
||||||
|
line(0, 5, 0, -45);
|
||||||
|
circle(0, 0, 2);
|
||||||
|
pop();
|
||||||
|
pop();
|
||||||
|
|
||||||
|
translate(0, 0);
|
||||||
|
noStroke();
|
||||||
|
fill(0);
|
||||||
|
text("作品：太阳公公钟", 30, height - 70);
|
||||||
|
text("作者：赵海洋爸爸", 30, height - 50);
|
||||||
|
text("日期：2022/12/11", 30, height - 30);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
145
3.基础图形绘画练习一.js
145
3.基础图形绘画练习一.js
@ -1,145 +0,0 @@
|
|||||||
function setup() {
|
|
||||||
createCanvas(400, 600);
|
|
||||||
// 画线
|
|
||||||
// stroke("#00FF00");
|
|
||||||
// line(50, 50, 150, 150);
|
|
||||||
|
|
||||||
// 画(椭)圆
|
|
||||||
// stroke("#FF0000");
|
|
||||||
// circle(300, 100, 100);
|
|
||||||
// ellipse(300, 100, 100, 100);
|
|
||||||
|
|
||||||
// 画矩形
|
|
||||||
// stroke("#FFFF00");
|
|
||||||
// square(75, 275, 50);
|
|
||||||
// rect(50, 250, 100, 100);
|
|
||||||
|
|
||||||
// 画三角形
|
|
||||||
// stroke("#0000FF");
|
|
||||||
// triangle(100, 250, 50, 350, 150, 350);
|
|
||||||
|
|
||||||
// 辅助线
|
|
||||||
// stroke("#DDDDFF");
|
|
||||||
// for (let x = 0; x < width; x += 25) {
|
|
||||||
// line(x, 0, x, height);
|
|
||||||
// }
|
|
||||||
// for (let y = 0; y < height; y += 25) {
|
|
||||||
// line(0, y, width, y);
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
noStroke();
|
|
||||||
stroke("#333333");
|
|
||||||
|
|
||||||
// 天空
|
|
||||||
background("lightblue");
|
|
||||||
|
|
||||||
// 地面
|
|
||||||
fill("lightgreen");
|
|
||||||
rect(0, 275, width, height);
|
|
||||||
|
|
||||||
// 太阳
|
|
||||||
fill("#FF0000");
|
|
||||||
circle(100, 100, 75);
|
|
||||||
|
|
||||||
// 光
|
|
||||||
let a = frameCount % 50;
|
|
||||||
for (let i = 0; i < 8; i++) {
|
|
||||||
push();
|
|
||||||
translate(100, 100);
|
|
||||||
rotate((i / 4) * PI);
|
|
||||||
triangle(-5, 50 + a, 5, 50 + a, 0, 65 + a);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 烟囱
|
|
||||||
fill("#7733CC");
|
|
||||||
rect(275, 125, 25, 100);
|
|
||||||
|
|
||||||
// 房顶
|
|
||||||
fill("#DD66FF");
|
|
||||||
triangle(250, 150, 150, 200, 350, 200);
|
|
||||||
|
|
||||||
// 墙
|
|
||||||
fill("#FFDDAA");
|
|
||||||
rect(175, 200, 150, 100);
|
|
||||||
|
|
||||||
// 窗户
|
|
||||||
fill("#FFFF66");
|
|
||||||
let b = map(a, 0, 50, -10, 10);
|
|
||||||
if (b > 0) {
|
|
||||||
ellipse(225, 225, 25 + b);
|
|
||||||
ellipse(275, 225, 25 - b);
|
|
||||||
} else {
|
|
||||||
ellipse(225, 225, 25 - b);
|
|
||||||
ellipse(275, 225, 25 + b);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 门
|
|
||||||
fill("#DD33CC");
|
|
||||||
rect(235, 250, 30, 50);
|
|
||||||
|
|
||||||
bird(200, 75);
|
|
||||||
bird(300, 50);
|
|
||||||
|
|
||||||
// 树叶
|
|
||||||
fill("#66AA00");
|
|
||||||
triangle(100, 340, 40, 400, 160, 400);
|
|
||||||
fill("#AAFF00");
|
|
||||||
triangle(100, 325, 50, 375, 150, 375);
|
|
||||||
fill("#66AA00");
|
|
||||||
triangle(100, 305, 60, 350, 140, 350);
|
|
||||||
|
|
||||||
// 树干
|
|
||||||
fill("#FFDDAA");
|
|
||||||
rect(85, 400, 30, 50);
|
|
||||||
|
|
||||||
// 小路
|
|
||||||
fill("#DD66FF");
|
|
||||||
ellipse(275, 350, 50, 25);
|
|
||||||
fill("#7733CC");
|
|
||||||
ellipse(288, 400, 75, 35);
|
|
||||||
fill("#66AA00");
|
|
||||||
ellipse(300, 460, 100, 50);
|
|
||||||
fill("#FF9933");
|
|
||||||
ellipse(325, 550, 125, 70);
|
|
||||||
|
|
||||||
// 蘑菇
|
|
||||||
fill("#FF0000");
|
|
||||||
arc(175, 475, 50, 50, PI, 0, PIE);
|
|
||||||
fill("#FFDDAA");
|
|
||||||
circle(157, 470, 8);
|
|
||||||
circle(165, 462, 8);
|
|
||||||
circle(175, 457, 8);
|
|
||||||
circle(175, 470, 8);
|
|
||||||
circle(185, 462, 8);
|
|
||||||
circle(193, 470, 8);
|
|
||||||
fill("#FF9933");
|
|
||||||
rect(165, 475, 20, 20);
|
|
||||||
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
text("作品：基础图形绘画练习一", 50, 550);
|
|
||||||
text("作者：赵海洋爸爸 三(8)班", 50, 570);
|
|
||||||
}
|
|
||||||
|
|
||||||
function bird(x, y) {
|
|
||||||
push();
|
|
||||||
let a = frameCount % 10;
|
|
||||||
noFill();
|
|
||||||
stroke(0);
|
|
||||||
translate(x, y);
|
|
||||||
fill("#FFDDAA");
|
|
||||||
arc(0, 0, 50, 50, 0, PI, PIE);
|
|
||||||
ellipse(30, -10, 30);
|
|
||||||
fill("#FFFFFF");
|
|
||||||
ellipse(28, -10, 10);
|
|
||||||
fill("#333333");
|
|
||||||
ellipse(28, -10, 5);
|
|
||||||
fill("#FF3333");
|
|
||||||
triangle(40, -15, 40, -5, 60, -10);
|
|
||||||
fill("#FFFF66");
|
|
||||||
triangle(-20, -20 + a * 2, -10, 5, 10, -5);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
120
3.火把.html
Normal file
120
3.火把.html
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>火把</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script src="/lib/particle.js"></script>
|
||||||
|
<script>
|
||||||
|
let particles = [];
|
||||||
|
let img;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 600);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
imageMode(CENTER);
|
||||||
|
frameRate(60);
|
||||||
|
noStroke();
|
||||||
|
noCursor();
|
||||||
|
img = loadImage("/img/transparencyfade.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
火把();
|
||||||
|
// 落珠();
|
||||||
|
}
|
||||||
|
|
||||||
|
function 火把() {
|
||||||
|
clear();
|
||||||
|
background(0);
|
||||||
|
drawGrid();
|
||||||
|
const x = mouseIsPressed ? mouseX : 300;
|
||||||
|
const y = mouseIsPressed ? mouseY : 500;
|
||||||
|
// 添加新粒子
|
||||||
|
for (let i = 0; i < 1; i++) {
|
||||||
|
const p = new Particle(x, y);
|
||||||
|
p.velocity = p5.Vector.random2D().mult(random(10, 50));
|
||||||
|
p.life = 0.5;
|
||||||
|
particles.push(p);
|
||||||
|
}
|
||||||
|
// 绘制火把
|
||||||
|
fill("lightgray");
|
||||||
|
rect(x - 5, y, 10, 80);
|
||||||
|
fill("gray");
|
||||||
|
rect(x - 7, y, 14, 20);
|
||||||
|
// 更新并绘制所有粒子
|
||||||
|
push();
|
||||||
|
tint(255, 128, 64, 100);
|
||||||
|
image(img, x, y, 512, 512);
|
||||||
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||||||
|
const p = particles[i];
|
||||||
|
noiseDetail(2, 0.5);
|
||||||
|
let windForce = map(
|
||||||
|
noise(frameCount / 100),
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
-1000,
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
p.applyForce(createVector(windForce, 0));
|
||||||
|
p.applyForce(createVector(0, -1500));
|
||||||
|
p.move();
|
||||||
|
if (p.finished) {
|
||||||
|
particles.splice(i, 1);
|
||||||
|
} else {
|
||||||
|
const alpha = map(p.duration, 0, p.life, 255, 0);
|
||||||
|
const size = map(p.duration, 0, p.life, 32, 64);
|
||||||
|
tint(alpha, alpha / 3, alpha / 6, alpha);
|
||||||
|
blendMode(ADD);
|
||||||
|
image(img, p.position.x, p.position.y, size, size);
|
||||||
|
// fill(255, 128, 64, alpha);
|
||||||
|
// circle(p.position.x, p.position.y, size, size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pop();
|
||||||
|
textInfo("火把", "2022/12/11");
|
||||||
|
}
|
||||||
|
|
||||||
|
function 落珠() {
|
||||||
|
background(0);
|
||||||
|
drawGrid();
|
||||||
|
const x = mouseIsPressed ? mouseX : 300;
|
||||||
|
const y = mouseIsPressed ? mouseY : 50;
|
||||||
|
// 添加新粒子
|
||||||
|
if (particles.length < 1) {
|
||||||
|
for (let i = 0; i < 1; i++) {
|
||||||
|
const p = new Particle(x, y);
|
||||||
|
p.velocity.x = random(-50, 50);
|
||||||
|
p.life = 5;
|
||||||
|
particles.push(p);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
push();
|
||||||
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||||||
|
const p = particles[i];
|
||||||
|
p.applyForce(createVector(0, 100));
|
||||||
|
p.move(true);
|
||||||
|
if (p.finished) {
|
||||||
|
particles.splice(i, 1);
|
||||||
|
} else {
|
||||||
|
const alpha = map(p.duration, 0, p.life, 255, 0);
|
||||||
|
stroke(255, alpha);
|
||||||
|
fill(128, alpha);
|
||||||
|
circle(p.position.x, p.position.y, 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pop();
|
||||||
|
textInfo("落珠", "2022/12/12");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
4.太阳公公.js
35
4.太阳公公.js
@ -1,35 +0,0 @@
|
|||||||
function setup() {
|
|
||||||
createCanvas(400, 400);
|
|
||||||
angleMode(DEGREES);
|
|
||||||
frameRate(60);
|
|
||||||
noCursor();
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background("skyblue");
|
|
||||||
// 移动原点坐标
|
|
||||||
push();
|
|
||||||
translate(mouseX, mouseY);
|
|
||||||
// 画阳光
|
|
||||||
stroke("#FFFF00");
|
|
||||||
strokeWeight(8);
|
|
||||||
let distance = 1 + (frameCount % 30);
|
|
||||||
for (let i = 0, n = 36; i < n; i++) {
|
|
||||||
line(0, -50 - distance * 10, 0, -100 - distance * 10);
|
|
||||||
rotate(360 / n);
|
|
||||||
}
|
|
||||||
// 画太阳
|
|
||||||
fill("#FFCC00");
|
|
||||||
circle(0, 0, 100);
|
|
||||||
noFill();
|
|
||||||
arc(-20, 0, 20, 20, -135, -45);
|
|
||||||
arc(20, 0, 20, 20, -135, -45);
|
|
||||||
arc(0, 10, 40, 40, 45, 135);
|
|
||||||
pop();
|
|
||||||
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
text("作品：太阳公公", 30, height - 70);
|
|
||||||
text("作者：赵海洋爸爸", 30, height - 50);
|
|
||||||
text("日期：2022/12/11", 30, height - 30);
|
|
||||||
}
|
|
||||||
87
4.柏林噪声.html
Normal file
87
4.柏林噪声.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>柏林噪声</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script>
|
||||||
|
let x,
|
||||||
|
y,
|
||||||
|
time = 0,
|
||||||
|
size = 10,
|
||||||
|
path = [];
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 600);
|
||||||
|
noiseDetail(2, 0.5);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
colorMode(HSB);
|
||||||
|
cursor(CROSS);
|
||||||
|
frameRate(60);
|
||||||
|
x = width / 2;
|
||||||
|
y = height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
一维柏林噪声();
|
||||||
|
// 二维柏林噪声();
|
||||||
|
}
|
||||||
|
|
||||||
|
function 二维柏林噪声() {
|
||||||
|
background(0);
|
||||||
|
drawGrid(32);
|
||||||
|
noStroke();
|
||||||
|
time += deltaTime / 1000;
|
||||||
|
for (let j = 0; j < height; j += size) {
|
||||||
|
for (let i = 0; i < width; i += size) {
|
||||||
|
const r = map(
|
||||||
|
noise(i / 100 + time, j / 100),
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
10
|
||||||
|
);
|
||||||
|
circle(i, j, r);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textInfo("二维柏林噪声", "2022/12/12");
|
||||||
|
}
|
||||||
|
|
||||||
|
function 一维柏林噪声() {
|
||||||
|
background(0);
|
||||||
|
drawGrid(32);
|
||||||
|
time += deltaTime / 1000;
|
||||||
|
y = map(noise(time), 0, 1, 0, width);
|
||||||
|
h = map(y, 0, height, 0, 255);
|
||||||
|
path.push(h);
|
||||||
|
path = path.slice(-height);
|
||||||
|
push();
|
||||||
|
noFill();
|
||||||
|
stroke(255);
|
||||||
|
strokeWeight(2);
|
||||||
|
beginShape();
|
||||||
|
path.forEach((h, i) => vertex(i, h));
|
||||||
|
endShape();
|
||||||
|
strokeWeight(8);
|
||||||
|
path.forEach((h, i) => {
|
||||||
|
stroke(h, 255, 255, 1);
|
||||||
|
point(i, height / 2);
|
||||||
|
});
|
||||||
|
noStroke();
|
||||||
|
fill(h, 255, 255, 1);
|
||||||
|
circle(x, y, 16);
|
||||||
|
pop();
|
||||||
|
textInfo("一维柏林噪声", "2022/12/12");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
5.醉汉模拟.html
Normal file
59
5.醉汉模拟.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>醉汉模拟</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script>
|
||||||
|
let walker;
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 600);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
cursor(CROSS);
|
||||||
|
frameRate(60);
|
||||||
|
stroke(255, 32);
|
||||||
|
walker = new Walker(width / 2, height / 2);
|
||||||
|
background(0);
|
||||||
|
drawGrid(32);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
// background(255);
|
||||||
|
strokeWeight(1);
|
||||||
|
strokeWeight(4);
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
walker.move();
|
||||||
|
walker.show();
|
||||||
|
}
|
||||||
|
textInfo("醉汉模拟", "2022-12-10");
|
||||||
|
}
|
||||||
|
|
||||||
|
class Walker {
|
||||||
|
constructor(x, y) {
|
||||||
|
this.pos = createVector(x, y);
|
||||||
|
this.count = 0;
|
||||||
|
}
|
||||||
|
move() {
|
||||||
|
let step = p5.Vector.random2D().mult(2);
|
||||||
|
this.pos.add(step);
|
||||||
|
if (this.count++ > 10000) {
|
||||||
|
this.pos = createVector(width / 2, height / 2);
|
||||||
|
this.count = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
show() {
|
||||||
|
point(this.pos.x, this.pos.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
121
6.引力模拟.html
Normal file
121
6.引力模拟.html
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>引力模拟</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script>
|
||||||
|
const planets = [];
|
||||||
|
const plantsNumber = 10;
|
||||||
|
let sun;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(1728, 972);
|
||||||
|
noStroke();
|
||||||
|
colorMode(HSB);
|
||||||
|
cursor(CROSS);
|
||||||
|
frameRate(60);
|
||||||
|
sun = createVector(width / 2, height / 2);
|
||||||
|
for (let i = 0; i < plantsNumber; i++) {
|
||||||
|
const planet = new Planet(random(width), random(height));
|
||||||
|
planet.vel = p5.Vector.random2D();
|
||||||
|
planets.push(planet);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(0);
|
||||||
|
drawGrid(32);
|
||||||
|
|
||||||
|
for (let i = 0; i < plantsNumber; i++) {
|
||||||
|
planets[i].update();
|
||||||
|
planets[i].drawPath();
|
||||||
|
}
|
||||||
|
for (let i = 0; i < plantsNumber; i++) {
|
||||||
|
planets[i].show();
|
||||||
|
}
|
||||||
|
fill("#FFFF77");
|
||||||
|
circle(sun.x, sun.y, 8);
|
||||||
|
|
||||||
|
textInfo("引力模拟", "2022-12-12");
|
||||||
|
}
|
||||||
|
|
||||||
|
class Planet {
|
||||||
|
constructor(x, y) {
|
||||||
|
this.pos = createVector(x, y);
|
||||||
|
this.vel = createVector(0, 0);
|
||||||
|
this.acc = createVector(0, 0);
|
||||||
|
this.color = color(random(0, 255), 255, 255);
|
||||||
|
this.path = [];
|
||||||
|
}
|
||||||
|
update() {
|
||||||
|
this.acc = p5.Vector.sub(sun, this.pos);
|
||||||
|
const dist = this.acc.mag() / 10;
|
||||||
|
this.acc.normalize().div(dist * dist);
|
||||||
|
this.vel.add(this.acc);
|
||||||
|
this.pos.add(this.vel);
|
||||||
|
this.path.push(this.pos.copy());
|
||||||
|
if (this.path.length > 1024) this.path.shift();
|
||||||
|
}
|
||||||
|
drawPath() {
|
||||||
|
push();
|
||||||
|
noFill();
|
||||||
|
let h = hue(this.color);
|
||||||
|
stroke(color(h, 255, 32));
|
||||||
|
strokeWeight(1);
|
||||||
|
beginShape();
|
||||||
|
this.path.forEach((v, i) => {
|
||||||
|
vertex(v.x, v.y);
|
||||||
|
});
|
||||||
|
endShape();
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
show() {
|
||||||
|
push();
|
||||||
|
translate(this.pos.x, this.pos.y);
|
||||||
|
|
||||||
|
push();
|
||||||
|
rotate(this.vel.heading());
|
||||||
|
const vel = this.vel.copy().mult(10);
|
||||||
|
vel.limit(50);
|
||||||
|
stroke("#007700");
|
||||||
|
line(0, 0, vel.mag(), 0);
|
||||||
|
line(vel.mag(), 0, vel.mag() - 2, 2);
|
||||||
|
line(vel.mag(), 0, vel.mag() - 2, -2);
|
||||||
|
pop();
|
||||||
|
|
||||||
|
push();
|
||||||
|
rotate(this.acc.heading());
|
||||||
|
const dir = this.acc.copy().mult(1000);
|
||||||
|
dir.limit(50);
|
||||||
|
stroke("#770000");
|
||||||
|
line(0, 0, dir.mag(), 0);
|
||||||
|
line(dir.mag(), 0, dir.mag() - 2, 2);
|
||||||
|
line(dir.mag(), 0, dir.mag() - 2, -2);
|
||||||
|
pop();
|
||||||
|
|
||||||
|
noStroke();
|
||||||
|
fill(this.color);
|
||||||
|
circle(0, 0, 4);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseClicked() {}
|
||||||
|
|
||||||
|
function switchFullscreen() {
|
||||||
|
let fs = fullscreen();
|
||||||
|
fullscreen(!fs);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
203
7.幸运转盘.html
Normal file
203
7.幸运转盘.html
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>幸运转盘</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script src="/lib/particle.js"></script>
|
||||||
|
<script>
|
||||||
|
let 转盘;
|
||||||
|
let 抓住了指针 = false;
|
||||||
|
let 角度差 = 0;
|
||||||
|
let particles = [];
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 600);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
imageMode(CENTER);
|
||||||
|
img = loadImage("/img/transparencyfade.png");
|
||||||
|
cursor(CROSS);
|
||||||
|
frameRate(60);
|
||||||
|
转盘 = new 幸运转盘(width / 2, height / 2, [
|
||||||
|
"爸爸",
|
||||||
|
"海洋",
|
||||||
|
"妈妈",
|
||||||
|
"鱼儿",
|
||||||
|
"公公",
|
||||||
|
"婆婆",
|
||||||
|
"奶奶",
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
clear();
|
||||||
|
background(64);
|
||||||
|
drawGrid();
|
||||||
|
转盘.update();
|
||||||
|
转盘.draw();
|
||||||
|
textInfo("幸运转盘", "2022/12/13");
|
||||||
|
}
|
||||||
|
|
||||||
|
class 幸运转盘 extends p5.Vector {
|
||||||
|
constructor(x, y, options) {
|
||||||
|
super(x, y);
|
||||||
|
this.hand = new 指针(x, y);
|
||||||
|
this.options = options;
|
||||||
|
}
|
||||||
|
update() {
|
||||||
|
if (抓住了指针) {
|
||||||
|
this.计算鼠标移动的角度差();
|
||||||
|
}
|
||||||
|
this.hand.update();
|
||||||
|
}
|
||||||
|
计算鼠标移动的角度差() {
|
||||||
|
const vp = createVector(pmouseX, pmouseY);
|
||||||
|
const vc = createVector(mouseX, mouseY);
|
||||||
|
const v1 = vp.sub(this);
|
||||||
|
const v2 = vc.sub(this);
|
||||||
|
const angle = v1.angleBetween(v2);
|
||||||
|
this.hand.heading = (this.hand.heading + angle + 360) % 360;
|
||||||
|
this.hand.angleV = angle;
|
||||||
|
}
|
||||||
|
draw() {
|
||||||
|
push();
|
||||||
|
// 绘制盘面
|
||||||
|
fill(0);
|
||||||
|
stroke(200);
|
||||||
|
strokeWeight(2);
|
||||||
|
translate(this.x, this.y);
|
||||||
|
circle(0, 0, 500);
|
||||||
|
// 绘制选项
|
||||||
|
const 每一格的角度 = 360 / this.options.length;
|
||||||
|
rotate(90);
|
||||||
|
this.options.forEach((option, i) => {
|
||||||
|
// 绘制分割线
|
||||||
|
push();
|
||||||
|
strokeWeight(1);
|
||||||
|
rotate(每一格的角度 * (i + 1));
|
||||||
|
line(0, 0, 0, -250);
|
||||||
|
pop();
|
||||||
|
// 绘制文字
|
||||||
|
push();
|
||||||
|
noStroke();
|
||||||
|
fill(200);
|
||||||
|
if (i == Math.floor(this.hand.heading / 每一格的角度)) {
|
||||||
|
fill("red");
|
||||||
|
stroke("yellow");
|
||||||
|
textSize(48);
|
||||||
|
} else {
|
||||||
|
textSize(32);
|
||||||
|
}
|
||||||
|
rotate(每一格的角度 * (i + 0.5));
|
||||||
|
translate(0, -150);
|
||||||
|
rotate(-每一格的角度 * (i + 0.5) - 90);
|
||||||
|
textAlign(CENTER);
|
||||||
|
text(option, 0, 0);
|
||||||
|
pop();
|
||||||
|
});
|
||||||
|
pop();
|
||||||
|
|
||||||
|
// 绘制指针
|
||||||
|
this.hand.draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
class 指针 extends p5.Vector {
|
||||||
|
constructor(x, y) {
|
||||||
|
super(x, y);
|
||||||
|
this.heading = 360;
|
||||||
|
this.angleV = 0;
|
||||||
|
}
|
||||||
|
update() {
|
||||||
|
if (!抓住了指针) {
|
||||||
|
this.heading = (this.heading + this.angleV + 360) % 360;
|
||||||
|
if (this.angleV != 0) {
|
||||||
|
let s = this.angleV > 0 ? -1 : 1;
|
||||||
|
let d = map(this.angleV ** 2, 0, 10000, 0.1, 1);
|
||||||
|
this.angleV += d * s;
|
||||||
|
if (abs(this.angleV) < 0.1) this.angleV = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
draw() {
|
||||||
|
push();
|
||||||
|
fill(255);
|
||||||
|
stroke(128);
|
||||||
|
strokeWeight(2);
|
||||||
|
translate(this.x, this.y);
|
||||||
|
rotate(this.heading);
|
||||||
|
beginShape();
|
||||||
|
vertex(-200, -10);
|
||||||
|
vertex(-200, 10);
|
||||||
|
vertex(150, 10);
|
||||||
|
vertex(150, 20);
|
||||||
|
vertex(200, 0);
|
||||||
|
vertex(150, -20);
|
||||||
|
vertex(150, -10);
|
||||||
|
endShape(CLOSE);
|
||||||
|
circle(0, 0, 16);
|
||||||
|
pop();
|
||||||
|
let headingVector = createVector(0, 200).setHeading(
|
||||||
|
this.heading
|
||||||
|
);
|
||||||
|
let firePos = this.copy().add(headingVector);
|
||||||
|
火把(firePos.x, firePos.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousePressed() {
|
||||||
|
抓住了指针 = get(mouseX, mouseY)[0] == 255;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseReleased() {
|
||||||
|
抓住了指针 = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function 火把(x, y) {
|
||||||
|
// clear();
|
||||||
|
// 添加新粒子
|
||||||
|
for (let i = 0; i < 1; i++) {
|
||||||
|
const p = new Particle(x, y);
|
||||||
|
p.velocity = p5.Vector.random2D().mult(random(10, 50));
|
||||||
|
p.life = 0.5;
|
||||||
|
particles.push(p);
|
||||||
|
}
|
||||||
|
// 更新并绘制所有粒子
|
||||||
|
push();
|
||||||
|
tint(255, 128, 64, 100);
|
||||||
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||||||
|
const p = particles[i];
|
||||||
|
noiseDetail(2, 0.5);
|
||||||
|
let windForce = map(
|
||||||
|
noise(frameCount / 100),
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
-1000,
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
p.applyForce(createVector(windForce, 0));
|
||||||
|
p.applyForce(createVector(0, -1500));
|
||||||
|
p.move();
|
||||||
|
if (p.finished) {
|
||||||
|
particles.splice(i, 1);
|
||||||
|
} else {
|
||||||
|
const alpha = map(p.duration, 0, p.life, 255, 0);
|
||||||
|
const size = map(p.duration, 0, p.life, 32, 64);
|
||||||
|
tint(alpha, alpha / 3, alpha / 6, alpha);
|
||||||
|
blendMode(ADD);
|
||||||
|
image(img, p.position.x, p.position.y, size, size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
119
8.小车的运动.html
Normal file
119
8.小车的运动.html
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>小车的运动</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script src="/lib/vehicle.js"></script>
|
||||||
|
<script>
|
||||||
|
let vehicle1;
|
||||||
|
let vehicle2;
|
||||||
|
let path;
|
||||||
|
let time = 0;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 600);
|
||||||
|
cursor(CROSS);
|
||||||
|
frameRate(60);
|
||||||
|
vehicle1 = new Vehicle(300, 300, "#CCCCCC");
|
||||||
|
vehicle1.velocity = createVector(6, 0);
|
||||||
|
vehicle2 = new Vehicle(300, 300, "#CC3333");
|
||||||
|
vehicle2.velocity = randomVector(6);
|
||||||
|
path = new Path(0, 300, 600, 300, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(0);
|
||||||
|
drawGrid(32);
|
||||||
|
let n = Math.floor(frameCount / 300) % 6;
|
||||||
|
[追逐鼠标, 逃避鼠标, 小车追逐, 小车巡游, 小车巡线, 道路追逐][
|
||||||
|
n
|
||||||
|
]();
|
||||||
|
let b = [
|
||||||
|
"追逐鼠标",
|
||||||
|
"逃避鼠标",
|
||||||
|
"小车追逐",
|
||||||
|
"小车巡游",
|
||||||
|
"小车巡线",
|
||||||
|
"道路追逐",
|
||||||
|
][n];
|
||||||
|
textInfo(`小车的运动 - ${b}`, "2022-12-12");
|
||||||
|
}
|
||||||
|
|
||||||
|
function 追逐鼠标() {
|
||||||
|
vehicle1.seek(createVector(mouseX, mouseY));
|
||||||
|
vehicle1.move();
|
||||||
|
vehicle1.turn();
|
||||||
|
vehicle1.drawPath();
|
||||||
|
vehicle1.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function 逃避鼠标() {
|
||||||
|
vehicle1.flee(createVector(mouseX, mouseY));
|
||||||
|
vehicle1.move();
|
||||||
|
vehicle1.turn();
|
||||||
|
vehicle1.drawPath();
|
||||||
|
vehicle1.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function 小车追逐() {
|
||||||
|
vehicle1.seek(vehicle2.position, 20);
|
||||||
|
vehicle2.move();
|
||||||
|
vehicle1.move();
|
||||||
|
if (vehicle2.turn())
|
||||||
|
vehicle2.velocity = randomVector(random(2, 5));
|
||||||
|
vehicle1.turn();
|
||||||
|
vehicle1.drawPath();
|
||||||
|
vehicle2.show("point");
|
||||||
|
vehicle1.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function 小车巡游() {
|
||||||
|
vehicle1.wander();
|
||||||
|
vehicle1.move();
|
||||||
|
vehicle1.turn();
|
||||||
|
vehicle1.drawPath();
|
||||||
|
vehicle1.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function 小车巡线() {
|
||||||
|
path.end.y = mouseY;
|
||||||
|
vehicle1.follow(path, 20);
|
||||||
|
vehicle1.move();
|
||||||
|
vehicle1.turn();
|
||||||
|
path.show();
|
||||||
|
vehicle1.drawPath();
|
||||||
|
vehicle1.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 未完成
|
||||||
|
*/
|
||||||
|
function 道路追逐() {
|
||||||
|
// path.end.y = mouseY;
|
||||||
|
vehicle2.follow(path, 50);
|
||||||
|
vehicle1.seek(vehicle2.position, 100);
|
||||||
|
vehicle2.flee(vehicle1.position, 100);
|
||||||
|
|
||||||
|
vehicle2.move();
|
||||||
|
vehicle1.move();
|
||||||
|
vehicle2.turn();
|
||||||
|
vehicle1.turn();
|
||||||
|
path.show();
|
||||||
|
vehicle2.drawPath();
|
||||||
|
vehicle1.drawPath();
|
||||||
|
vehicle2.show();
|
||||||
|
vehicle1.show();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
999.呼吸.js
46
999.呼吸.js
@ -1,46 +0,0 @@
|
|||||||
const ball = {
|
|
||||||
x: 200,
|
|
||||||
y: 200,
|
|
||||||
size: 0,
|
|
||||||
speed: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(400, 400);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(255);
|
|
||||||
strokeWeight(4);
|
|
||||||
stroke("yellow");
|
|
||||||
fill(ball.size, 0, 0);
|
|
||||||
star(ball.x, ball.y, 100, ball.size, 6);
|
|
||||||
|
|
||||||
ball.size += ball.speed;
|
|
||||||
ball.speed *= 1.1;
|
|
||||||
|
|
||||||
if (ball.size >= 200) {
|
|
||||||
ball.size = 200;
|
|
||||||
ball.speed = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ball.size <= 0) {
|
|
||||||
ball.size = 0;
|
|
||||||
ball.speed = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function star(x, y, radius1, radius2, npoints) {
|
|
||||||
let angle = TWO_PI / npoints;
|
|
||||||
let halfAngle = angle / 2.0;
|
|
||||||
beginShape();
|
|
||||||
for (let a = 0; a < TWO_PI; a += angle) {
|
|
||||||
let sx = x + cos(a) * radius2;
|
|
||||||
let sy = y + sin(a) * radius2;
|
|
||||||
vertex(sx, sy);
|
|
||||||
sx = x + cos(a + halfAngle) * radius1;
|
|
||||||
sy = y + sin(a + halfAngle) * radius1;
|
|
||||||
vertex(sx, sy);
|
|
||||||
}
|
|
||||||
endShape(CLOSE);
|
|
||||||
}
|
|
||||||
12
css/style.css
Normal file
12
css/style.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
@ -1,82 +0,0 @@
|
|||||||
let x,
|
|
||||||
y,
|
|
||||||
time = 0,
|
|
||||||
size = 10,
|
|
||||||
path = [];
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(600, 600);
|
|
||||||
angleMode(DEGREES);
|
|
||||||
pixelDensity(1);
|
|
||||||
colorMode(HSB);
|
|
||||||
cursor(CROSS);
|
|
||||||
frameRate(60);
|
|
||||||
x = width / 2;
|
|
||||||
y = height / 2;
|
|
||||||
noiseDetail(2, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
一维柏林噪声();
|
|
||||||
// 二维柏林噪声();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 二维柏林噪声() {
|
|
||||||
background(0);
|
|
||||||
noStroke();
|
|
||||||
time += deltaTime / 1000;
|
|
||||||
for (let j = 0; j < height; j += size) {
|
|
||||||
for (let i = 0; i < width; i += size) {
|
|
||||||
const r = map(noise(i / 100 + time, j / 100), 0, 1, 0, 10);
|
|
||||||
circle(i, j, r);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
drawGrid();
|
|
||||||
textInfo("二维柏林噪声", "2022/12/12");
|
|
||||||
}
|
|
||||||
|
|
||||||
function 一维柏林噪声() {
|
|
||||||
background(0);
|
|
||||||
drawGrid();
|
|
||||||
time += deltaTime / 1000;
|
|
||||||
y = map(noise(time), 0, 1, 0, width);
|
|
||||||
h = map(y, 0, height, 0, 255);
|
|
||||||
path.push(h);
|
|
||||||
path = path.slice(-height);
|
|
||||||
push();
|
|
||||||
noFill();
|
|
||||||
stroke(255);
|
|
||||||
strokeWeight(2);
|
|
||||||
beginShape();
|
|
||||||
path.forEach((h, i) => vertex(i, h));
|
|
||||||
endShape();
|
|
||||||
strokeWeight(8);
|
|
||||||
path.forEach((h, i) => {
|
|
||||||
stroke(h, 255, 255, 1);
|
|
||||||
point(i, height / 2);
|
|
||||||
});
|
|
||||||
noStroke();
|
|
||||||
fill(h, 255, 255, 1);
|
|
||||||
circle(x, y, 16);
|
|
||||||
pop();
|
|
||||||
textInfo("一维柏林噪声", "2022/12/12");
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawGrid() {
|
|
||||||
push();
|
|
||||||
stroke(0, 0, 255, 0.1);
|
|
||||||
strokeWeight(1);
|
|
||||||
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
|
||||||
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
function textInfo(title, date, name = "赵海洋爸爸") {
|
|
||||||
push();
|
|
||||||
noStroke();
|
|
||||||
fill(255);
|
|
||||||
text(`作品：${title}`, 30, height - 70);
|
|
||||||
text(`作者：${name}`, 30, height - 50);
|
|
||||||
text(`日期：${date}`, 30, height - 30);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
106
demo_particle.js
106
demo_particle.js
@ -1,106 +0,0 @@
|
|||||||
let particles = [];
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(600, 600);
|
|
||||||
angleMode(DEGREES);
|
|
||||||
frameRate(60);
|
|
||||||
noStroke();
|
|
||||||
noCursor();
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
火把();
|
|
||||||
// 落珠();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 火把() {
|
|
||||||
background(0);
|
|
||||||
drawGrid();
|
|
||||||
const x = mouseIsPressed ? mouseX : 300;
|
|
||||||
const y = mouseIsPressed ? mouseY : 500;
|
|
||||||
// 添加新粒子
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
const p = new Particle(x, y);
|
|
||||||
p.velocity.x = random(-1, 1) * 30;
|
|
||||||
p.velocity.y = random(-5, -1) * 50;
|
|
||||||
p.life = 1;
|
|
||||||
particles.push(p);
|
|
||||||
}
|
|
||||||
// 绘制火把
|
|
||||||
fill("lightgray");
|
|
||||||
rect(x - 5, y - 10, 10, 80);
|
|
||||||
fill("gray");
|
|
||||||
rect(x - 7, y - 10, 14, 20);
|
|
||||||
// 更新并绘制所有粒子
|
|
||||||
push();
|
|
||||||
for (let i = particles.length - 1; i >= 0; i--) {
|
|
||||||
const p = particles[i];
|
|
||||||
noiseDetail(2, 0.5);
|
|
||||||
let windForce = map(noise(frameCount / 1000), 0, 1, -500, 500);
|
|
||||||
// let windForce = map(mouseX, 0, width,-1000,1000)
|
|
||||||
p.applyForce(createVector(windForce, 0));
|
|
||||||
p.applyForce(createVector(0, -100));
|
|
||||||
p.move();
|
|
||||||
if (p.finished) {
|
|
||||||
particles.splice(i, 1);
|
|
||||||
} else {
|
|
||||||
const alpha = map(p.duration, 0, p.life, 255, 0);
|
|
||||||
const size = map(p.duration, 0, p.life, 8, 32);
|
|
||||||
fill(255, alpha);
|
|
||||||
circle(p.position.x, p.position.y, size);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pop();
|
|
||||||
textInfo("火把", "2022/12/11");
|
|
||||||
}
|
|
||||||
|
|
||||||
function 落珠() {
|
|
||||||
background(0);
|
|
||||||
drawGrid();
|
|
||||||
const x = mouseIsPressed ? mouseX : 300;
|
|
||||||
const y = mouseIsPressed ? mouseY : 50;
|
|
||||||
// 添加新粒子
|
|
||||||
if (particles.length < 1) {
|
|
||||||
for (let i = 0; i < 1; i++) {
|
|
||||||
const p = new Particle(x, y);
|
|
||||||
p.velocity.x = random(-50, 50);
|
|
||||||
p.life = 5;
|
|
||||||
particles.push(p);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
push();
|
|
||||||
for (let i = particles.length - 1; i >= 0; i--) {
|
|
||||||
const p = particles[i];
|
|
||||||
p.applyForce(createVector(0, 100));
|
|
||||||
p.move(true);
|
|
||||||
if (p.finished) {
|
|
||||||
particles.splice(i, 1);
|
|
||||||
} else {
|
|
||||||
const alpha = map(p.duration, 0, p.life, 255, 0);
|
|
||||||
stroke(255, alpha);
|
|
||||||
fill(128, alpha);
|
|
||||||
circle(p.position.x, p.position.y, 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pop();
|
|
||||||
textInfo("落珠", "2022/12/12");
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawGrid() {
|
|
||||||
push();
|
|
||||||
stroke(255, 64);
|
|
||||||
strokeWeight(1);
|
|
||||||
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
|
||||||
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
function textInfo(title, date, name = "赵海洋爸爸") {
|
|
||||||
push();
|
|
||||||
noStroke();
|
|
||||||
fill(255);
|
|
||||||
text(`作品：${title}`, 30, height - 70);
|
|
||||||
text(`作者：${name}`, 30, height - 50);
|
|
||||||
text(`日期：${date}`, 30, height - 30);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
let vehicle1;
|
|
||||||
let vehicle2;
|
|
||||||
let path;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
cursor(CROSS);
|
|
||||||
createCanvas(600, 600);
|
|
||||||
vehicle1 = new Vehicle(300, 300, "#CCCCCC");
|
|
||||||
vehicle1.velocity = createVector(6, 0);
|
|
||||||
vehicle2 = new Vehicle(300, 300, "#CC3333");
|
|
||||||
vehicle2.velocity = randomVector(6);
|
|
||||||
path = new Path(0, 300, 600, 300, 20);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
追逐鼠标();
|
|
||||||
// 逃避鼠标();
|
|
||||||
// 小车追逐();
|
|
||||||
// 小车巡游();
|
|
||||||
// 小车巡线();
|
|
||||||
// 道路追逐();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 追逐鼠标() {
|
|
||||||
background(64);
|
|
||||||
vehicle1.seek(createVector(mouseX, mouseY));
|
|
||||||
vehicle1.move();
|
|
||||||
vehicle1.turn();
|
|
||||||
vehicle1.drawPath();
|
|
||||||
vehicle1.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 逃避鼠标() {
|
|
||||||
background(64);
|
|
||||||
vehicle1.flee(createVector(mouseX, mouseY));
|
|
||||||
vehicle1.move();
|
|
||||||
vehicle1.turn();
|
|
||||||
vehicle1.drawPath();
|
|
||||||
vehicle1.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 小车追逐() {
|
|
||||||
background(64);
|
|
||||||
vehicle1.seek(vehicle2.position, 20);
|
|
||||||
vehicle2.move();
|
|
||||||
vehicle1.move();
|
|
||||||
if (vehicle2.turn()) vehicle2.velocity = randomVector(random(2, 5));
|
|
||||||
vehicle1.turn();
|
|
||||||
vehicle1.drawPath();
|
|
||||||
vehicle2.show("point");
|
|
||||||
vehicle1.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 小车巡游() {
|
|
||||||
background(64);
|
|
||||||
vehicle1.wander();
|
|
||||||
vehicle1.move();
|
|
||||||
vehicle1.turn();
|
|
||||||
vehicle1.drawPath();
|
|
||||||
vehicle1.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
function 小车巡线() {
|
|
||||||
background(0);
|
|
||||||
path.end.y = mouseY;
|
|
||||||
vehicle1.follow(path, 20);
|
|
||||||
vehicle1.move();
|
|
||||||
vehicle1.turn();
|
|
||||||
path.show();
|
|
||||||
vehicle1.drawPath();
|
|
||||||
vehicle1.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 未完成
|
|
||||||
*/
|
|
||||||
function 道路追逐() {
|
|
||||||
background(0);
|
|
||||||
// path.end.y = mouseY;
|
|
||||||
vehicle2.follow(path, 50);
|
|
||||||
vehicle1.seek(vehicle2.position, 100);
|
|
||||||
vehicle2.flee(vehicle1.position, 100);
|
|
||||||
|
|
||||||
vehicle2.move();
|
|
||||||
vehicle1.move();
|
|
||||||
vehicle2.turn();
|
|
||||||
vehicle1.turn();
|
|
||||||
path.show();
|
|
||||||
vehicle2.drawPath();
|
|
||||||
vehicle1.drawPath();
|
|
||||||
vehicle2.show();
|
|
||||||
vehicle1.show();
|
|
||||||
}
|
|
||||||
BIN
img/transparency.png
Normal file
BIN
img/transparency.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
img/transparencyfade.png
Normal file
BIN
img/transparencyfade.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
31
index.html
31
index.html
@ -1,31 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
|
||||||
<title>p5.js</title>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: gray;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
height: 100vh;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="p5/p5.min.js"></script>
|
|
||||||
<script src="p5/addons/p5.sound.min.js"></script>
|
|
||||||
<script src="particle.js"></script>
|
|
||||||
<script src="demo_particle.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<main></main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -41,6 +41,22 @@ class Particle {
|
|||||||
this.acceleration.add(force.div(this.mass));
|
this.acceleration.add(force.div(this.mass));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 反弹算法未完成
|
||||||
|
move(bounce = false) {
|
||||||
|
// 重力加速度
|
||||||
|
this.acceleration.add(this.gravity); // G = 9.81
|
||||||
|
// 计算时间差
|
||||||
|
const duration = deltaTime / 1000; // 秒
|
||||||
|
this.duration += duration;
|
||||||
|
// 计算速度差及位移
|
||||||
|
const deltaVelocity = this.acceleration.mult(duration);
|
||||||
|
const averageVelocity = deltaVelocity.copy().div(2).add(this.velocity);
|
||||||
|
const displacement = averageVelocity.mult(duration);
|
||||||
|
// 更新速度及位置
|
||||||
|
this.velocity.add(deltaVelocity);
|
||||||
|
this.position.add(displacement);
|
||||||
|
}
|
||||||
|
|
||||||
// 未完成
|
// 未完成
|
||||||
bounce(rate) {
|
bounce(rate) {
|
||||||
if (this.position.x <= 0) {
|
if (this.position.x <= 0) {
|
||||||
@ -62,20 +78,4 @@ class Particle {
|
|||||||
if (rate > 0) this.velocity.mult(rate);
|
if (rate > 0) this.velocity.mult(rate);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 反弹算法未完成
|
|
||||||
move(bounce = false) {
|
|
||||||
// 重力加速度
|
|
||||||
this.acceleration.add(this.gravity); // G = 9.81
|
|
||||||
// 计算时间差
|
|
||||||
const duration = deltaTime / 1000; // 秒
|
|
||||||
this.duration += duration;
|
|
||||||
// 计算速度差及位移
|
|
||||||
const deltaVelocity = this.acceleration.mult(duration);
|
|
||||||
const averageVelocity = deltaVelocity.copy().div(2).add(this.velocity);
|
|
||||||
const displacement = averageVelocity.mult(duration);
|
|
||||||
// 更新速度及位置
|
|
||||||
this.velocity.add(deltaVelocity);
|
|
||||||
this.position.add(displacement);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
59
lib/utils.js
Normal file
59
lib/utils.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
function loadJavaScript(path) {
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = path;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(fade = 64) {
|
||||||
|
push();
|
||||||
|
colorMode(RGB);
|
||||||
|
stroke(200, fade);
|
||||||
|
strokeWeight(1);
|
||||||
|
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
||||||
|
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function textInfo(title, date, name = "赵海洋爸爸") {
|
||||||
|
push();
|
||||||
|
colorMode(RGB);
|
||||||
|
noStroke();
|
||||||
|
fill(200);
|
||||||
|
text(`作品：${title}`, 30, height - 70);
|
||||||
|
text(`作者：${name}`, 30, height - 50);
|
||||||
|
text(`日期：${date}`, 30, height - 30);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawVector(vector, color = "#FFFFFF") {
|
||||||
|
push();
|
||||||
|
fill(color);
|
||||||
|
stroke(color);
|
||||||
|
line(0, 0, vector.x, vector.y);
|
||||||
|
circle(0, 0, 4);
|
||||||
|
translate(vector.x, vector.y);
|
||||||
|
rotate(vector.heading());
|
||||||
|
triangle(0, 0, -4, -2, -4, +2);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function vectorProjection(v1, v2) {
|
||||||
|
const v2n = v2.copy().normalize();
|
||||||
|
const sp = v1.dot(v2n);
|
||||||
|
return v2n.setMag(sp);
|
||||||
|
}
|
||||||
|
|
||||||
|
function star(x, y, radius1, radius2, npoints) {
|
||||||
|
let angle = TWO_PI / npoints;
|
||||||
|
let halfAngle = angle / 2.0;
|
||||||
|
beginShape();
|
||||||
|
for (let a = 0; a < TWO_PI; a += angle) {
|
||||||
|
let sx = x + cos(a) * radius2;
|
||||||
|
let sy = y + sin(a) * radius2;
|
||||||
|
vertex(sx, sy);
|
||||||
|
sx = x + cos(a + halfAngle) * radius1;
|
||||||
|
sy = y + sin(a + halfAngle) * radius1;
|
||||||
|
vertex(sx, sy);
|
||||||
|
}
|
||||||
|
endShape(CLOSE);
|
||||||
|
}
|
||||||
@ -1,34 +0,0 @@
|
|||||||
function setup() {
|
|
||||||
createCanvas(600, 600);
|
|
||||||
angleMode(DEGREES);
|
|
||||||
pixelDensity(1);
|
|
||||||
colorMode(HSB);
|
|
||||||
cursor(CROSS);
|
|
||||||
frameRate(60);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(0);
|
|
||||||
|
|
||||||
drawGrid();
|
|
||||||
textInfo();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawGrid() {
|
|
||||||
push();
|
|
||||||
stroke(255, 64);
|
|
||||||
strokeWeight(1);
|
|
||||||
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
|
||||||
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
function textInfo(title, date, name = "赵海洋爸爸") {
|
|
||||||
push();
|
|
||||||
noStroke();
|
|
||||||
fill(255);
|
|
||||||
text(`作品：${title}`, 30, height - 70);
|
|
||||||
text(`作者：${name}`, 30, height - 50);
|
|
||||||
text(`日期：${date}`, 30, height - 30);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
34
sketch.js
34
sketch.js
@ -1,34 +0,0 @@
|
|||||||
function setup() {
|
|
||||||
createCanvas(600, 600);
|
|
||||||
angleMode(DEGREES);
|
|
||||||
pixelDensity(1);
|
|
||||||
colorMode(HSB);
|
|
||||||
cursor(CROSS);
|
|
||||||
frameRate(60);
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(0);
|
|
||||||
|
|
||||||
drawGrid();
|
|
||||||
textInfo();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawGrid() {
|
|
||||||
push();
|
|
||||||
stroke(255, 64);
|
|
||||||
strokeWeight(1);
|
|
||||||
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
|
||||||
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
function textInfo(title, date, name = "赵海洋爸爸") {
|
|
||||||
push();
|
|
||||||
noStroke();
|
|
||||||
fill(255);
|
|
||||||
text(`作品：${title}`, 30, height - 70);
|
|
||||||
text(`作者：${name}`, 30, height - 50);
|
|
||||||
text(`日期：${date}`, 30, height - 30);
|
|
||||||
pop();
|
|
||||||
}
|
|
||||||
62
卡牌生存/card.js
Normal file
62
卡牌生存/card.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
class BaseCard extends p5.Vector {
|
||||||
|
constructor(x, y, w, h, r) {
|
||||||
|
super(x, y);
|
||||||
|
this.w = w;
|
||||||
|
this.h = h;
|
||||||
|
this.r = r;
|
||||||
|
this.cardToInteract = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
get mouseIsOnMe() {
|
||||||
|
return (
|
||||||
|
abs(this.x - mouseX) * 2 < this.w &&
|
||||||
|
abs(this.y - mouseY) * 2 < this.h
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasCardOnMe() {
|
||||||
|
return (
|
||||||
|
cardDragging &&
|
||||||
|
cardDragging != this &&
|
||||||
|
abs(this.x - cardDragging.x) * 2 < this.w &&
|
||||||
|
abs(this.y - cardDragging.y) * 2 < this.h
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
followMouse() {
|
||||||
|
this.add(movedX, movedY);
|
||||||
|
}
|
||||||
|
|
||||||
|
moveToBegin() {
|
||||||
|
const index = cards.indexOf(this);
|
||||||
|
cards.splice(index, 1);
|
||||||
|
cards.unshift(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
if (!cardDragging && mouseIsPressed && this.mouseIsOnMe) {
|
||||||
|
cardDragging = this;
|
||||||
|
this.moveToBegin();
|
||||||
|
}
|
||||||
|
if (this.hasCardOnMe) {
|
||||||
|
this.cardToInteract = cardDragging;
|
||||||
|
cardDragging.cardToInteract = this;
|
||||||
|
} else if (cardDragging) {
|
||||||
|
this.cardToInteract = null;
|
||||||
|
cardDragging.cardToInteract = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
push();
|
||||||
|
fill(128);
|
||||||
|
if (this.hasCardOnMe) {
|
||||||
|
stroke("#FFFF00");
|
||||||
|
strokeWeight(2);
|
||||||
|
} else {
|
||||||
|
stroke(255);
|
||||||
|
}
|
||||||
|
rect(this.x, this.y, this.w, this.h, this.r);
|
||||||
|
pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
19
卡牌生存/index.html
Normal file
19
卡牌生存/index.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<title>卡牌生存</title>
|
||||||
|
<script src="/p5/p5.min.js"></script>
|
||||||
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||||
|
<script src="/lib/utils.js"></script>
|
||||||
|
<script src="card.js"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
卡牌生存/main.js
Normal file
34
卡牌生存/main.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
const width = 800;
|
||||||
|
const height = 600;
|
||||||
|
const cards = [];
|
||||||
|
let cardDragging = null;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(width, height);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
imageMode(CENTER);
|
||||||
|
rectMode(CENTER);
|
||||||
|
frameRate(60);
|
||||||
|
cursor(HAND);
|
||||||
|
|
||||||
|
cards.push(new BaseCard(100, 100, 40, 60, 5));
|
||||||
|
cards.push(new BaseCard(200, 100, 40, 60, 5));
|
||||||
|
cards.push(new BaseCard(300, 100, 40, 60, 5));
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(0);
|
||||||
|
drawGrid();
|
||||||
|
cards.forEach((card) => card.update());
|
||||||
|
for (let i = cards.length - 1; i >= 0; i--) {
|
||||||
|
cards[i].draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseReleased() {
|
||||||
|
cardDragging = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseDragged() {
|
||||||
|
if (cardDragging) cardDragging.followMouse();
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,3 +0,0 @@
|
|||||||
ID,Name,Flavor,Shape,Color
|
|
||||||
Blob1,Blobby,Sweet,Blob,Pink
|
|
||||||
Blob2,Saddy,Savory,Blob,Blue
|
|
||||||
|
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
@ -1,10 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Redirector</title>
|
|
||||||
<meta http-equiv="refresh" content="0;url=../">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a href="../">Click here to redirect</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,4 +0,0 @@
|
|||||||
id,species,name
|
|
||||||
0,Capra hircus,Goat
|
|
||||||
1,Panthera pardus,Leopard
|
|
||||||
2,Equus zebra,Zebra
|
|
||||||
|
@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0"?>
|
|
||||||
<mammals>
|
|
||||||
<animal id="0" species="Capra hircus">Goat</animal>
|
|
||||||
<animal id="1" species="Panthera pardus">Leopard</animal>
|
|
||||||
<animal id="2" species="Equus zebra">Zebra</animal>
|
|
||||||
</mammals>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 263 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
@ -1,15 +0,0 @@
|
|||||||
v 0.000000E+00 0.000000E+00 40.0000
|
|
||||||
v 22.5000 22.5000 0.000000E+00
|
|
||||||
v 22.5000 -22.5000 0.000000E+00
|
|
||||||
v -22.5000 -22.5000 0.000000E+00
|
|
||||||
v -22.5000 22.5000 0.000000E+00
|
|
||||||
v 0.000000E+00 0.000000E+00 -40.0000
|
|
||||||
|
|
||||||
f 1 2 3
|
|
||||||
f 1 3 4
|
|
||||||
f 1 4 5
|
|
||||||
f 1 5 2
|
|
||||||
f 6 5 4
|
|
||||||
f 6 4 3
|
|
||||||
f 6 3 2
|
|
||||||
f 6 2 5
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@ -1,22 +0,0 @@
|
|||||||
// Code adopted from "Creating a Gradient Color in Fragment Shader"
|
|
||||||
// by Bahadır on stackoverflow.com
|
|
||||||
// https://stackoverflow.com/questions/47376499/creating-a-gradient-color-in-fragment-shader
|
|
||||||
|
|
||||||
|
|
||||||
precision highp float; varying vec2 vPos;
|
|
||||||
uniform vec2 offset;
|
|
||||||
uniform vec3 colorCenter;
|
|
||||||
uniform vec3 colorBackground;
|
|
||||||
|
|
||||||
void main() {
|
|
||||||
|
|
||||||
vec2 st = vPos.xy + offset.xy;
|
|
||||||
|
|
||||||
// color1 = vec3(1.0,0.55,0);
|
|
||||||
// color2 = vec3(0.226,0.000,0.615);
|
|
||||||
|
|
||||||
float mixValue = distance(st,vec2(0,1));
|
|
||||||
vec3 color = mix(colorCenter,colorBackground,mixValue);
|
|
||||||
|
|
||||||
gl_FragColor = vec4(color,mixValue);
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
precision highp float; varying vec2 vPos;
|
|
||||||
uniform vec2 p;
|
|
||||||
uniform float r;
|
|
||||||
const int I = 500;
|
|
||||||
void main() {
|
|
||||||
vec2 c = p + vPos * r, z = c;
|
|
||||||
float n = 0.0;
|
|
||||||
for (int i = I; i > 0; i --) {
|
|
||||||
if(z.x*z.x+z.y*z.y > 4.0) {
|
|
||||||
n = float(i)/float(I);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;
|
|
||||||
}
|
|
||||||
gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
precision highp float; varying vec2 vPos;
|
|
||||||
attribute vec3 aPosition;
|
|
||||||
void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -1,6 +0,0 @@
|
|||||||
I am a cat
|
|
||||||
I like apples
|
|
||||||
I have three feet
|
|
||||||
I like my nose
|
|
||||||
I smell like butter
|
|
||||||
I talk like an orange
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,54 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="250px" height="114px" viewBox="0 0 250 114" enable-background="new 0 0 250 114" xml:space="preserve">
|
|
||||||
<path fill="#EC245E" d="M16.254,27.631v7.998h0.359c0.715-1.113,1.65-2.248,2.805-3.402c1.155-1.154,2.568-2.188,4.24-3.105
|
|
||||||
c1.67-0.912,3.561-1.67,5.67-2.268c2.107-0.596,4.477-0.896,7.104-0.896c4.059,0,7.799,0.777,11.223,2.328
|
|
||||||
c3.422,1.555,6.367,3.684,8.836,6.389c2.465,2.707,4.375,5.891,5.73,9.551c1.352,3.662,2.029,7.602,2.029,11.82
|
|
||||||
s-0.656,8.179-1.971,11.879c-1.312,3.701-3.184,6.925-5.611,9.67c-2.427,2.746-5.371,4.938-8.834,6.566
|
|
||||||
c-3.463,1.631-7.385,2.446-11.76,2.446c-4.061,0-7.781-0.836-11.164-2.506c-3.385-1.672-5.99-3.938-7.82-6.807h-0.238v36.295H2.525
|
|
||||||
V27.631H16.254z M49.684,56.045c0-2.229-0.338-4.438-1.014-6.627c-0.678-2.188-1.693-4.158-3.045-5.91
|
|
||||||
c-1.354-1.748-3.064-3.162-5.135-4.238c-2.07-1.074-4.496-1.611-7.281-1.611c-2.627,0-4.977,0.557-7.045,1.672
|
|
||||||
c-2.07,1.115-3.842,2.549-5.312,4.297c-1.475,1.752-2.588,3.742-3.344,5.971c-0.758,2.229-1.133,4.459-1.133,6.686
|
|
||||||
c0,2.229,0.375,4.438,1.133,6.625c0.756,2.191,1.869,4.16,3.344,5.912c1.471,1.75,3.242,3.164,5.312,4.236
|
|
||||||
c2.068,1.075,4.418,1.61,7.045,1.61c2.785,0,5.211-0.555,7.281-1.67c2.07-1.115,3.781-2.547,5.135-4.299
|
|
||||||
c1.352-1.75,2.367-3.74,3.045-5.97C49.346,60.502,49.684,58.273,49.684,56.045z M189.332,24.893v63.505
|
|
||||||
c0,3.422-0.279,6.666-0.836,9.73c-0.559,3.064-1.611,5.73-3.164,8c-1.551,2.27-3.662,4.078-6.328,5.432
|
|
||||||
c-2.668,1.354-6.146,2.029-10.445,2.029c-1.193,0-2.389-0.08-3.582-0.238c-1.193-0.16-2.148-0.319-2.865-0.479l1.195-12.178
|
|
||||||
c0.637,0.16,1.311,0.279,2.027,0.359c0.717,0.077,1.354,0.118,1.91,0.118c1.67,0,3.023-0.317,4.059-0.955
|
|
||||||
c1.033-0.639,1.83-1.514,2.391-2.627c0.555-1.114,0.914-2.407,1.074-3.881c0.156-1.474,0.236-3.043,0.236-4.715V24.893H189.332z
|
|
||||||
M238.162,42.912c-1.275-1.672-3.025-3.123-5.254-4.357c-2.229-1.234-4.656-1.852-7.283-1.852c-2.309,0-4.416,0.479-6.326,1.434
|
|
||||||
c-1.912,0.953-2.863,2.547-2.863,4.775s1.053,3.803,3.16,4.715c2.109,0.916,5.195,1.852,9.256,2.807
|
|
||||||
c2.146,0.479,4.314,1.115,6.506,1.91c2.189,0.795,4.18,1.85,5.971,3.164c1.789,1.312,3.242,2.945,4.357,4.895
|
|
||||||
c1.111,1.951,1.672,4.318,1.672,7.104c0,3.504-0.658,6.47-1.973,8.896c-1.311,2.428-3.062,4.397-5.254,5.91
|
|
||||||
c-2.189,1.512-4.734,2.606-7.641,3.283c-2.906,0.676-5.908,1.014-9.014,1.014c-4.459,0-8.795-0.816-13.014-2.447
|
|
||||||
c-4.219-1.629-7.721-3.959-10.506-6.982l9.432-8.836c1.592,2.07,3.66,3.781,6.209,5.133c2.547,1.354,5.371,2.029,8.477,2.029
|
|
||||||
c1.033,0,2.088-0.117,3.164-0.357c1.074-0.237,2.068-0.614,2.984-1.133c0.914-0.518,1.65-1.213,2.209-2.09
|
|
||||||
c0.555-0.877,0.834-1.949,0.834-3.225c0-2.389-1.094-4.098-3.281-5.133c-2.191-1.035-5.475-2.07-9.85-3.104
|
|
||||||
c-2.15-0.479-4.24-1.094-6.27-1.853c-2.029-0.756-3.84-1.75-5.432-2.983c-1.596-1.234-2.865-2.764-3.82-4.598
|
|
||||||
c-0.955-1.83-1.436-4.098-1.436-6.805c0-3.184,0.656-5.928,1.973-8.236c1.311-2.312,3.045-4.197,5.191-5.674
|
|
||||||
c2.148-1.471,4.576-2.566,7.283-3.281c2.705-0.717,5.492-1.076,8.357-1.076c4.137,0,8.178,0.717,12.117,2.148
|
|
||||||
c3.939,1.434,7.062,3.625,9.373,6.568L238.162,42.912z M153.559,72.816l8.533-2.576l1.676,5.156l-8.498,2.897l5.275,7.479
|
|
||||||
l-4.447,3.226l-5.553-7.349l-5.408,7.154l-4.318-3.289l5.275-7.223l-8.564-3.09l1.678-5.16l8.6,2.771v-8.896h5.754v8.897H153.559z
|
|
||||||
M124.086,45.836c-1.473-3.301-3.52-6.088-6.148-8.357c-2.625-2.268-5.711-4-9.252-5.193c-3.543-1.193-7.383-1.791-11.521-1.791
|
|
||||||
c-1.512,0-3.203,0.082-5.074,0.238c-1.871,0.162-3.482,0.439-4.834,0.838l0.834-18.268h34.503V0.41H74.481l-1.432,46.201
|
|
||||||
c1.271-0.635,2.725-1.232,4.357-1.791c1.631-0.555,3.301-1.053,5.014-1.49c1.711-0.438,3.463-0.775,5.254-1.016
|
|
||||||
c1.791-0.238,3.48-0.357,5.074-0.357c2.307,0,4.576,0.258,6.805,0.775c2.227,0.518,4.238,1.434,6.029,2.746s3.242,3.045,4.357,5.193
|
|
||||||
c1.113,2.148,1.672,4.855,1.672,8.119c0,2.547-0.418,4.836-1.254,6.865c-0.836,2.026-1.971,3.721-3.402,5.071
|
|
||||||
c-1.434,1.355-3.104,2.39-5.016,3.104c-1.91,0.719-3.939,1.076-6.088,1.076c-3.82,0-7.125-1.017-9.91-3.046
|
|
||||||
c-2.787-2.028-4.775-4.715-5.969-8.059l-0.16,0.059l-10.367,9.716c2.096,3.42,4.799,6.28,8.139,8.553
|
|
||||||
c4.854,3.302,10.824,4.955,17.91,4.955c4.217,0,8.197-0.678,11.938-2.028c3.741-1.352,7.004-3.304,9.791-5.853
|
|
||||||
c2.786-2.545,4.994-5.67,6.627-9.371c1.629-3.701,2.445-7.897,2.445-12.597C126.295,52.939,125.559,49.141,124.086,45.836z
|
|
||||||
M131.07,6.842h2.521c0.244,0,0.484,0.029,0.723,0.086c0.236,0.059,0.447,0.152,0.635,0.283c0.186,0.131,0.336,0.301,0.453,0.508
|
|
||||||
c0.115,0.207,0.172,0.457,0.172,0.749c0,0.365-0.104,0.667-0.311,0.904c-0.207,0.237-0.479,0.407-0.812,0.511v0.02
|
|
||||||
c0.408,0.055,0.742,0.213,1.006,0.475c0.262,0.262,0.393,0.611,0.393,1.051c0,0.354-0.07,0.65-0.209,0.891
|
|
||||||
c-0.143,0.24-0.324,0.434-0.555,0.58c-0.229,0.146-0.488,0.251-0.785,0.314c-0.295,0.064-0.596,0.096-0.898,0.096h-2.33V6.842
|
|
||||||
H131.07z M132.221,9.473h1.023c0.383,0,0.676-0.076,0.877-0.229c0.201-0.153,0.301-0.369,0.301-0.648c0-0.293-0.104-0.5-0.311-0.621
|
|
||||||
c-0.207-0.122-0.529-0.184-0.969-0.184h-0.924v1.682H132.221z M132.221,12.341h1.031c0.146,0,0.307-0.011,0.477-0.032
|
|
||||||
s0.328-0.064,0.471-0.133c0.143-0.066,0.262-0.164,0.355-0.292c0.096-0.128,0.143-0.298,0.143-0.511
|
|
||||||
c0-0.342-0.115-0.579-0.348-0.713c-0.23-0.135-0.582-0.201-1.051-0.201h-1.078V12.341z M136.936,6.842h4.283v1.004h-3.135v1.645
|
|
||||||
h2.969v0.969h-2.969v1.827h3.299v1.022h-4.447V6.842z M144.088,7.846h-1.982V6.842h5.117v1.004h-1.982v5.463h-1.152V7.846
|
|
||||||
L144.088,7.846z M149.449,6.842h0.996l2.787,6.467h-1.316l-0.602-1.479h-2.807l-0.584,1.479h-1.289L149.449,6.842z M150.912,10.843
|
|
||||||
l-0.996-2.631l-1.014,2.631H150.912z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 5.7 KiB |
@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
|
|
||||||
<path fill="#ED225D" stroke="#ED225D" stroke-miterlimit="10" d="M16.909,10.259l8.533-2.576l1.676,5.156l-8.498,2.899l5.275,7.48
|
|
||||||
l-4.447,3.225l-5.553-7.348L8.487,26.25l-4.318-3.289l5.275-7.223L0.88,12.647l1.678-5.16l8.598,2.771V1.364h5.754V10.259z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 727 B |
@ -1,84 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
|
||||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
|
||||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
|
||||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<title tabindex="1">reference | p5.js</title>
|
|
||||||
<meta name="description" content="p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.">
|
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="./css/all.css">
|
|
||||||
|
|
||||||
<script src="./js/vendor/jquery-1.12.4.min.js"></script>
|
|
||||||
<script src="./js/vendor/underscore-min.js"></script>
|
|
||||||
<script src="./js/vendor/backbone-min.js"></script>
|
|
||||||
<script src="./js/vendor/ace-nc/ace.js"></script>
|
|
||||||
<script src="./js/vendor/ace-nc/mode-javascript.js"></script>
|
|
||||||
<script src="./js/vendor/prism.js"></script>
|
|
||||||
<script src="./js/init.js"></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body id="reference-page">
|
|
||||||
<div id="container">
|
|
||||||
<!-- identity -->
|
|
||||||
<div id="lockup">
|
|
||||||
<img type="image/svg+xml" src="./img/p5js-beta.svg" id="logo_image" class="logo" />
|
|
||||||
<div id='p5_logo'></div>
|
|
||||||
</a>
|
|
||||||
<p>Processing intuition times JavaScript power</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column-span">
|
|
||||||
<section id="reference">
|
|
||||||
|
|
||||||
<a href="./index.html" id="home-button" class="anchor"><h2>Reference</h2></a>
|
|
||||||
|
|
||||||
<div id="search" class="search-wrapper"></div>
|
|
||||||
<div id="collection-list-nav">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--class="container-fluid"-->
|
|
||||||
<div id="list" class="list-wrapper allItems-collection"></div>
|
|
||||||
<div id="item" class="item-wrapper apidocs"></div>
|
|
||||||
<div id="file" class="file-wrapper"></div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>p5.js was created by <a href='https://lauren-mccarthy.com' target="_blank">Lauren McCarthy</a> and is developed by a community of collaborators,
|
|
||||||
with support from the <a href="https://processing.org/foundation/" target="_blank">Processing Foundation</a>
|
|
||||||
and <a href="https://itp.nyu.edu/itp/" target="_blank">NYU ITP</a>.
|
|
||||||
<a href="https://p5js.org/copyright.php">© Info.</a></p>
|
|
||||||
</footer>
|
|
||||||
</div><!-- end column-span -->
|
|
||||||
|
|
||||||
<!-- outside of column for footer to go across both -->
|
|
||||||
|
|
||||||
<p class="clearfix"> </p>
|
|
||||||
|
|
||||||
<object type="image/svg+xml" data="./img/thick-asterisk-alone.svg" id="asterisk-design-element">
|
|
||||||
*<!-- to do: add fallback image in CSS -->
|
|
||||||
</object>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="./js/p5.min.js"></script>
|
|
||||||
<script src="./js/p5.sound.min.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
window.requireNode = window.require;
|
|
||||||
window.require = undefined;
|
|
||||||
</script>
|
|
||||||
<script src="./js/vendor/require.min.js"></script>
|
|
||||||
<script src="./js/render.js"></script>
|
|
||||||
<script src="./js/data.js"></script>
|
|
||||||
<script src="./js/reference.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user