fin
This commit is contained in:
parent
d6c8ae6f21
commit
117f99087f
36 changed files with 123064 additions and 249 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 MiB |
50
3/index.html
50
3/index.html
|
|
@ -1,26 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sketch</title>
|
||||
|
||||
<title>Sketch</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<div id="filterSketch"></div>
|
||||
<div id="sortSketch"></div>
|
||||
<div id="resizeSketch"></div>
|
||||
<div id="evenOddPixelSketch"></div>
|
||||
<script src="libraries/p5.min.js"></script>
|
||||
<script src="libraries/p5.sound.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#sketch {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
#defaultCanvas0 {
|
||||
border: solid white 1px;
|
||||
width: auto;
|
||||
align-content: center;
|
||||
margin: auto auto;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="sketch"></div>
|
||||
|
||||
|
||||
<script src="libraries/p5.min.js"></script>
|
||||
<script src="libraries/p5.sound.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6"
|
||||
},
|
||||
"include": [
|
||||
"*.js",
|
||||
"**/*.js",
|
||||
"/home/melody/.vscode-oss/extensions/samplavigne.p5-vscode-1.2.16/p5types/global.d.ts"
|
||||
]
|
||||
}
|
||||
182
3/sketch.js
182
3/sketch.js
|
|
@ -1,121 +1,75 @@
|
|||
const filterSketch = function (p) {
|
||||
let img;
|
||||
const sketch = function (p) {
|
||||
const gridSize = [200, 200]; // min ~31, smaller is faster
|
||||
const cellSize = 4; // Smaller is also faster
|
||||
|
||||
let agent = { x: cellSize * 30, y: cellSize * 30, angle: 0 };
|
||||
let cols, rows;
|
||||
let grid = [];
|
||||
let cActive, cInactive;
|
||||
|
||||
p.setup = function () {
|
||||
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
||||
sketch.parent("filterSketch");
|
||||
};
|
||||
const sketch = p.createCanvas(
|
||||
gridSize[0] * cellSize,
|
||||
gridSize[1] * cellSize
|
||||
);
|
||||
sketch.parent("sketch");
|
||||
cols = p.width / cellSize;
|
||||
rows = p.height / cellSize;
|
||||
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image.png");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
img.loadPixels();
|
||||
p.image(img, 0, 0, p.windowHeight / 4, p.windowHeight / 4);
|
||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||
img.pixels[px] += 50;
|
||||
}
|
||||
img.updatePixels();
|
||||
};
|
||||
};
|
||||
|
||||
const sortSketch = function (p) {
|
||||
let img;
|
||||
p.setup = function () {
|
||||
const sortSketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
||||
sortSketch.parent("sortSketch");
|
||||
};
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image2.jpg");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
p.draw = function () {
|
||||
img.loadPixels();
|
||||
p.image(img, 0, 0, 1920, 1080);
|
||||
let pixelArray = [];
|
||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||
pixelArray.push([
|
||||
img.pixels[px],
|
||||
img.pixels[px + 1],
|
||||
img.pixels[px + 2],
|
||||
img.pixels[px + 3],
|
||||
]);
|
||||
}
|
||||
pixelArray.sort((a, b) => a[0] - b[0]);
|
||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||
img.pixels[px] = (pixelArray[px / 4][0] * 9 + img.pixels[px]) / 10;
|
||||
img.pixels[px + 1] =
|
||||
(pixelArray[px / 4][1] * 9 + img.pixels[px + 1]) / 10;
|
||||
img.pixels[px + 2] =
|
||||
(pixelArray[px / 4][2] * 9 + img.pixels[px + 2]) / 10;
|
||||
img.pixels[px + 3] =
|
||||
(pixelArray[px / 4][3] * 9 + img.pixels[px + 3]) / 10;
|
||||
}
|
||||
console.log(img.pixels);
|
||||
img.updatePixels();
|
||||
img.filter(p.BLUR, 100);
|
||||
p.image(img, 0, 0, 1920, 1080);
|
||||
p.noLoop();
|
||||
};
|
||||
};
|
||||
|
||||
const resizeSketch = function (p) {
|
||||
let img;
|
||||
p.setup = function () {
|
||||
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
||||
sketch.parent("resizeSketch");
|
||||
};
|
||||
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image.png");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
p.background(255);
|
||||
p.image(img, 0, 0, p.mouseX / 8, p.mouseX / 8);
|
||||
};
|
||||
};
|
||||
|
||||
const evenOddPixelSketch = function (p) {
|
||||
let img;
|
||||
let img2;
|
||||
let finImg;
|
||||
p.setup = function () {
|
||||
const sketch = p.createCanvas(p.windowWidth / 2, p.windowHeight / 2);
|
||||
sketch.parent("evenOddPixelSketch");
|
||||
};
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image3.jpg");
|
||||
img2 = p.loadImage("assets/image4.jpg");
|
||||
finImg = p.createImage(3840, 2160);
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
p.draw = function () {
|
||||
img.loadPixels();
|
||||
img2.loadPixels();
|
||||
finImg.loadPixels();
|
||||
for (let i = 0; i < img.pixels.length; i += 4) {
|
||||
if (i % 8 == 0) {
|
||||
finImg.pixels[i] = img.pixels[i];
|
||||
finImg.pixels[i + 1] = img.pixels[i + 1];
|
||||
finImg.pixels[i + 2] = img.pixels[i + 2];
|
||||
finImg.pixels[i + 3] = img.pixels[i + 3];
|
||||
} else {
|
||||
finImg.pixels[i] = img2.pixels[i];
|
||||
finImg.pixels[i + 1] = img2.pixels[i + 1];
|
||||
finImg.pixels[i + 2] = img2.pixels[i + 2];
|
||||
finImg.pixels[i + 3] = img2.pixels[i + 3];
|
||||
for (let i = 0; i < cols; i++) {
|
||||
grid[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
grid[i][j] = 0;
|
||||
}
|
||||
}
|
||||
finImg.updatePixels();
|
||||
p.image(finImg, 0, 0, p.windowWidth / 2, p.windowHeight / 2);
|
||||
noLoop();
|
||||
|
||||
cActive = p.color(255, 105, 180, 255);
|
||||
cInactive = p.color(0, 0, 0, 255);
|
||||
p.background(0);
|
||||
p.frameRate(1000);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
// console.log(p.frameRate());
|
||||
p.noStroke();
|
||||
|
||||
const col = agent.x / cellSize;
|
||||
const row = agent.y / cellSize;
|
||||
|
||||
if (grid[col][row] === 1) {
|
||||
agent.angle += 90;
|
||||
grid[col][row] = 0;
|
||||
p.fill(cInactive);
|
||||
} else {
|
||||
agent.angle -= 90;
|
||||
grid[col][row] = 1;
|
||||
p.fill(cActive);
|
||||
}
|
||||
|
||||
agent.angle = (agent.angle + 360) % 360;
|
||||
|
||||
p.rect(agent.x, agent.y, cellSize, cellSize);
|
||||
|
||||
switch (agent.angle) {
|
||||
case 0:
|
||||
agent.y -= cellSize;
|
||||
break;
|
||||
case 90:
|
||||
agent.x += cellSize;
|
||||
break;
|
||||
case 180:
|
||||
agent.y += cellSize;
|
||||
break;
|
||||
case 270:
|
||||
agent.x -= cellSize;
|
||||
break;
|
||||
}
|
||||
|
||||
if (agent.x < 0) agent.x = p.width - cellSize;
|
||||
if (agent.x >= p.width) agent.x = 0;
|
||||
if (agent.y < 0) agent.y = p.height - cellSize;
|
||||
if (agent.y >= p.height) agent.y = 0;
|
||||
};
|
||||
};
|
||||
|
||||
p5Filter = new p5(filterSketch);
|
||||
p5Filter = new p5(sortSketch);
|
||||
p5Filter = new p5(resizeSketch);
|
||||
p5Filter = new p5(evenOddPixelSketch);
|
||||
p5Sketch = new p5(sketch);
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue