Differences

This shows you the differences between two versions of the page.

--- yiler-huang-generating-photos-with-code [2023/06/05 23:13] – yiler.huang
+++ yiler-huang-generating-photos-with-code [2023/06/05 23:33] (current) – yiler.huang
@@ Line 5: / Line 5: @@
 ===== First round =====
-{{:yiler-jimp-photo-1.jpeg?500|}}
+{{:yiler-jimp-photo-1.jpeg?400|}}
-{{:yiler-jimp-photo-2.jpeg?500|}}
+{{:yiler-jimp-photo-2.jpeg?400|}}
-{{:yiler-jimp-photo-3.jpeg?500|}}
+{{:yiler-jimp-photo-3.jpeg?400|}}
-{{:yiler-jimp-photo-4.jpeg?500|}}
+{{:yiler-jimp-photo-4.jpeg?400|}}
-{{:yiler-jimp-photo-5.jpeg?500|}}
+{{:yiler-jimp-photo-5.jpeg?400|}}
-{{:yiler-jimp-photo-6.jpeg?500|}}
+{{:yiler-jimp-photo-6.jpeg?400|}}
-{{:yiler-jimp-photo-7.jpeg?500|}}
+{{:yiler-jimp-photo-7.jpeg?400|}}
-{{:yiler-jimp-photo-8.jpeg?500|}}
+{{:yiler-jimp-photo-8.jpeg?400|}}
-{{:yiler-jimp-photo-9.jpeg?500|}}
+{{:yiler-jimp-photo-9.jpeg?400|}}
-{{:yiler-jimp-photo-10.jpeg?500|}}
+{{:yiler-jimp-photo-10.jpeg?400|}}
-{{:yiler-jimp-photo-11.jpeg?500|}}
+{{:yiler-jimp-photo-11.jpeg?400|}}
-{{:yiler-jimp-photo-12.jpeg?500|}}
+{{:yiler-jimp-photo-12.jpeg?400|}}
 ===== Second round =====
 {{:yiler-jimp-second-round-1.jpg?400|}} {{:yiler-jimp-second-round-2.jpg?400|}} {{:yiler-jimp-second-round-3.jpg?400|}} {{:yiler-jimp-second-round-4.jpg?400|}} {{:yiler-jimp-second-round-5.jpg?400|}}
+===== Third round =====
+==== First program ====
+{{:yiler-jimp-round-3-1.jpg?400|}} {{:yiler-jimp-round-3-2.jpg?400|}} {{:yiler-jimp-round-3-3.jpg?400|}} {{:yiler-jimp-round-3-4.jpg?400|}} {{:yiler-jimp-round-3-5.jpg?400|}} {{:yiler-jimp-round-3-6.jpg?400|}} {{:yiler-jimp-round-3-7.jpg?400|}} {{:yiler-jimp-round-3-8.jpg?400|}} {{:yiler-jimp-round-3-9.jpg?400|}} {{:yiler-jimp-round-3-10.jpg?400|}}
+==== Second program ====
+{{:yiler-jimp-round-3-11.jpg?400|}} {{:yiler-jimp-round-3-12.jpg?400|}} {{:yiler-jimp-round-3-13.jpg?400|}} {{:yiler-jimp-round-3-14.jpg?400|}} {{:yiler-jimp-round-3-15.jpg?400|}} {{:yiler-jimp-round-3-16.jpg?400|}} {{:yiler-jimp-round-3-17.jpg?400|}} {{:yiler-jimp-round-3-18.jpg?400|}} {{:yiler-jimp-round-3-19.jpg?400|}}
+<code javascript>
+// import the JIMP library
+const Jimp = require("jimp");
+const fs = require('fs');
+// knuth shuffle from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+//shuffle
+function shuffle(array) {
+    var currentIndex = array.length,
+        randomIndex;
+    // While there remain elements to shuffle...
+    while (currentIndex != 0) {
+        // Pick a remaining element...
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [
+            array[randomIndex], array[currentIndex]
+        ];
+    }
+    return array;
+}
+//randomRange
+function randomRange(min, max) {
+    return min + ((max - min) * Math.random())
+}
+//pickFromArray
+function pickFromArray(array) {
+    return array[Math.floor(Math.random() * array.length)];
+}
+//from https://jeremyresearch.medium.com/node-js-count-the-numbers-of-files-in-a-directory-9562dec64a45
+// set the path data in an array
+let pathArray = [
+    "pics/input1.jpg",
+    "pics/input2.jpg",
+    "pics/input3.jpg",
+    "pics/input4.jpg",
+    "pics/input5.jpg",
+    "pics/input6.jpg",
+    "pics/input7.jpg",
+    "pics/input8.jpg",
+];
+function trueOrFalse() {
+    let output = Math.random() < 0.5 ? true : false;
+    return output
+}
+// use map to read the path data and produce JIMP Promises
+let newPA = shuffle(pathArray).slice(0, 3)
+let jimpData = newPA.map(path => Jimp.read(path));
+// through Promise.all, get the data from the Promises and process it through the methods provided by JIMP
+// the data processing will proceed in parallel, just as it does in Hydra
+for (let i = 0; i < 50; i++) {
+    Promise.all(jimpData).then((pictures) => {
+        return pictures[0]
+            .grayscale()
+            //composite argument1: shiftX, argument2: shiftY
+            .composite(pictures[1].color([{
+                apply: "tint",
+                params: [randomRange(0, 30)]
+            }]).mirror(trueOrFalse(), trueOrFalse()), 0, 0, {
+                mode: Jimp.BLEND_LIGHTEN,
+                opacitySource: 1
+            })
+            .composite(pictures[2].grayscale().dither565().dither565(), 0,0, {
+                mode:Jimp.BLEND_DARKEN,
+                opacitySource: 0.6
+            })
+            .color([{
+                apply: "hue",
+                params: [randomRange(-360, 360)]
+            }])
+            .resize(2000, 2000)
+            .write(`./output-3/output-${i}.jpg`);
+    }).catch((err) => {
+        console.error(err)
+    })
+    newPA = shuffle(pathArray).slice(0, 2)
+    jimpData = newPA.map(path => Jimp.read(path));
+}
+</code>
+==== Program 3 ====
+{{:yiler-jimp-round-3-20.jpg?400|}} {{:yiler-jimp-round-3-21.jpg?400|}} {{:yiler-jimp-round-3-22.jpg?400|}} {{:yiler-jimp-round-3-23.jpg?400|}} {{:yiler-jimp-round-3-24.jpg?400|}} {{:yiler-jimp-round-3-25.jpg?400|}} {{:yiler-jimp-round-3-26.jpg?400|}} {{:yiler-jimp-round-3-27.jpg?400|}} {{:yiler-jimp-round-3-28.jpg?400|}} {{:yiler-jimp-round-3-29.jpg?400|}} {{:yiler-revised-photo-porfolio-3.jpg?400|}} {{:yiler-revised-photo-porfolio-2.jpg?400|}} {{:yiler-revised-photo-porfolio-1.jpg?400|}}
+<code>
+// import the JIMP library
+const Jimp = require("jimp");
+const fs = require('fs');
+// knuth shuffle from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+//shuffle
+function shuffle(array) {
+    var currentIndex = array.length,
+        randomIndex;
+    // While there remain elements to shuffle...
+    while (currentIndex != 0) {
+        // Pick a remaining element...
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [
+            array[randomIndex], array[currentIndex]
+        ];
+    }
+    return array;
+}
+//randomRange
+function randomRange(min, max) {
+    return min + ((max - min) * Math.random())
+}
+//pickFromArray
+function pickFromArray(array) {
+    return array[Math.floor(Math.random() * array.length)];
+}
+//from https://jeremyresearch.medium.com/node-js-count-the-numbers-of-files-in-a-directory-9562dec64a45
+// set the path data in an array
+let pathArray = [
+    "pics/input1.jpg",
+    "pics/input2.jpg",
+    "pics/input3.jpg",
+    "pics/input4.jpg",
+    "pics/input5.jpg",
+    "pics/input6.jpg",
+    "pics/input7.jpg",
+    "pics/input8.jpg",
+    "pics/input9.jpg",
+    "pics/input10.jpg",
+    "pics/input11.jpg",
+    "pics/input12.jpg",
+];
+function trueOrFalse() {
+    let output = Math.random() < 0.5 ? true : false;
+    return output
+}
+// use map to read the path data and produce JIMP Promises
+let newPA = shuffle(pathArray).slice(0, 3)
+let jimpData = newPA.map(path => Jimp.read(path));
+// through Promise.all, get the data from the Promises and process it through the methods provided by JIMP
+// the data processing will proceed in parallel, just as it does in Hydra
+for (let i = 0; i < 100; i++) {
+    Promise.all(jimpData).then((pictures) => {
+        return pictures[0]
+            .grayscale()
+            //composite argument1: shiftX, argument2: shiftY
+            .composite(pictures[1].grayscale().invert(), 0,0, {
+                mode:Jimp.BLEND_DARKEN,
+                opacitySource: 0.8
+            })
+            .composite(pictures[2].color([{
+                apply: "tint",
+                params: [randomRange(0, 30)]
+            }]).mirror(trueOrFalse(), trueOrFalse()), 0, 0, {
+                mode: Jimp.BLEND_LIGHTEN,
+                opacitySource: 1
+            })
+            .color([{
+                apply: "hue",
+                params: [randomRange(-360, 360)]
+            }])
+            .resize(2000, 2000)
+            .write(`./output-5/output-${i}.jpg`);
+    }).catch((err) => {
+        console.error(err)
+    })
+    newPA = shuffle(pathArray).slice(0, 3)
+    jimpData = newPA.map(path => Jimp.read(path));
+}
+</code>