Add 3 directory

This commit is contained in:
Yannick 2025-04-09 11:48:37 +02:00
parent 905ab331f4
commit eff0138135
7 changed files with 140 additions and 0 deletions

BIN
3/assets/image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

26
3/index.html Normal file
View 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
View 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

File diff suppressed because one or more lines are too long

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
View 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
View file

@ -0,0 +1,8 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}