Add 3 directory
This commit is contained in:
parent
905ab331f4
commit
eff0138135
7 changed files with 140 additions and 0 deletions
BIN
3/assets/image.png
Normal file
BIN
3/assets/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
26
3/index.html
Normal file
26
3/index.html
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Sketch</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<div id="filterSketch"></div>
|
||||
<div id="sortSketch"></div>
|
||||
<div id="resize"></div>
|
||||
<div id="even_odd_pixel"></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>
|
10
3/jsconfig.json
Normal file
10
3/jsconfig.json
Normal file
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6"
|
||||
},
|
||||
"include": [
|
||||
"*.js",
|
||||
"**/*.js",
|
||||
"/home/melody/.vscode-oss/extensions/samplavigne.p5-vscode-1.2.16/p5types/global.d.ts"
|
||||
]
|
||||
}
|
2
3/libraries/p5.min.js
vendored
Normal file
2
3/libraries/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
3/libraries/p5.sound.min.js
vendored
Normal file
3
3/libraries/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
91
3/sketch.js
Normal file
91
3/sketch.js
Normal file
|
@ -0,0 +1,91 @@
|
|||
const filterSketch = function (p) {
|
||||
let img;
|
||||
p.setup = function () {
|
||||
const filterSketch = p.createCanvas(p.windowWidth, p.windowHeight);
|
||||
filterSketch.parent("filterSketch");
|
||||
};
|
||||
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image.png");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
img.loadPixels();
|
||||
p.image(img, 0, 0, 400, 400);
|
||||
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, p.windowHeight);
|
||||
sortSketch.parent("sortSketch");
|
||||
};
|
||||
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image.png");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
img.loadPixels();
|
||||
p.image(img, 0, 0, 400, 400);
|
||||
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) => parseInt(a[0]) - parseInt(b[0]));
|
||||
img.pixels = [];
|
||||
for (pixel of pixelArray) {
|
||||
img.pixels.push(...pixel);
|
||||
}
|
||||
console.log(img.pixels);
|
||||
|
||||
img.updatePixels();
|
||||
};
|
||||
};
|
||||
//let test = function (p) {
|
||||
// let img
|
||||
//
|
||||
// p.setup = function(){
|
||||
// const canvas = p.createCanvas(100, 100)
|
||||
// }
|
||||
//
|
||||
// p.preload = function () {
|
||||
// img = loadImage("assets/image.png")
|
||||
// p.pixelDensity(1)
|
||||
// }
|
||||
//
|
||||
//
|
||||
// p.draw = function () {
|
||||
// p.background(0)
|
||||
// p.image(img, 100, 100)
|
||||
// p.img.loadPixels()
|
||||
// for (let y = 1 y < img.pixels.height y += 4) {
|
||||
// imageArray[Math.round(img.width / y)][y - 1 % img.width / 4]
|
||||
// tempArray = imageArray[Math.round(img.width / y)][y - 1 % img.width / 4]
|
||||
// tempArray.red
|
||||
// let red = img.pixels[i + 0]
|
||||
// let green = img.pixels[i + 1]
|
||||
// let blue = img.pixels[i + 2]
|
||||
// let alpha = img.pixels[i + 3]
|
||||
// }
|
||||
// console.log(imageArray)
|
||||
// p.img.updatePixels()
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
p5Filter = new p5(filterSketch);
|
||||
p5Filter = new p5(sortSketch);
|
8
3/style.css
Normal file
8
3/style.css
Normal file
|
@ -0,0 +1,8 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
Loading…
Add table
Reference in a new issue