Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Compare duplicates of images in arrays

Tags:

javascript

compare

duplicates

I have tried following this previous question: Comparing 2 Image's sources in Javascript However, there is no solution to this on the page

I am trying to generate random images from 2 arrays, the same image can not be compared to each other. Duplicates continue to appear when i run this code from the if statement. However, what i intended to happen if if the same image is generated then a new pair of images would be displayed, and the duplicates would not be displayed.

function start2AFC() {
        var answers = {};
        window.sessionStorage.setItem("answers", JSON.stringify(answers))

        var myImages = new Array();
        var testImages = new Array();

        testImages[0] = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg" ];
        testImages[1] = ["images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice1.jpg" ];

        
        var myImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
        "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
        "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
        "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
        "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
        "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

        var secondImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
        "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
        "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
        "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
        "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
        "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]



        window.sessionStorage.setItem("practiceImages", JSON.stringify(testImages))
        window.sessionStorage.setItem("images", JSON.stringify(myImages))
        window.sessionStorage.setItem("images_2", JSON.stringify(secondImages))
    

    var counter = 0;
    window.sessionStorage.setItem("counter", counter);

    total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length )
    count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) +  - 1);
    window.sessionStorage.setItem("total", total)


    document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total
    random2AFC();



}

function random2AFC() {
    var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages"));
    var counter = JSON.parse(window.sessionStorage.getItem("counter"))
    var image = document.getElementById("image");
    var images = JSON.parse(window.sessionStorage.getItem("images"));
    var images_2 = JSON.parse(window.sessionStorage.getItem("images_2"))
    var rnd = Math.floor(Math.random() * images.length);
    var rnd_2 = Math.floor(Math.random() * images_2.length);

    counter += 1
    window.sessionStorage.setItem("counter", counter)

    // iterate through practice array 
    if (practiceImages.length > 0) {
        image.src = practiceImages[0][0];;
        image2.src = practiceImages[0][1];;
        practiceImages.splice(0, 1);
        window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages));
        

    } else {
        // after every 15 images, display break image
        if (counter % 15 == 0) {
            image.src = "images/images/break_2afc.png"
            image2.src = "images/images/break_2afc2.png"
        } else { 
        // once every image has been displayed from both arrays, send to the database
       if (images.length == 0 && images_2.length == 0) { 
                send2AFC();
       } else {

            // if icon1 and icon2 are not the same
            // do not display duplicate, and generate new comparison
            if ((images[rnd] != images_2[rnd_2])) {
                image.src = images[rnd]
                image2.src = images_2[rnd_2];
                console.log("not duplicate")
            } else { 

            // if icon 1 and icon2 are not the same, then continue
            var random1 = Math.floor(Math.random() * images.length);
            var random2 = Math.floor(Math.random() * images_2.length);
            image.src = images[random1]
            console.log("found duplicate")
            image2.src = images_2[random2];
            rnd = random1;
            rnd_2 = random2;
            }
        }
            counter = counter + 1
            images.splice(rnd, 1);
            images_2.splice(rnd_2, 1)
            window.sessionStorage.setItem("images", JSON.stringify(images))
            window.sessionStorage.setItem("images_2", JSON.stringify(images_2))
        }
    }
}

function store2AFC(id) {

    total = window.sessionStorage.getItem("total")
    count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) - 1);
    document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;

    var answers = JSON.parse(window.sessionStorage.getItem("answers"))
    var img = document.getElementById("image");
    var img2 = document.getElementById("image2");

    var img_file = img.src.slice(-9);
    var img_file2 = img2.src.slice(-9);


    var selected = id;
    console.log(selected);
    var question = [img_file, img_file2]

        if (selected == "image") {
            answers[question] = [img_file]
        } else {
            answers[question] = [img_file2]
        }

        console.log(answers)
        window.sessionStorage.setItem("answers", JSON.stringify(answers));

    
    random2AFC();
}
<!DOCTYPE html>

<html>

<head>
    <title> App Icons? </title>
    <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-storage.js"></script>
</head>

<body class=body onload="start2AFC()">
    <div>
        <div>
            <hr>
            <div class=topbar>
                <h1> Which app icon is more beautiful?</h1>
            </div>
            <hr>

            <div class=imageContainer>
                <div class=image>
                    <img onclick="store2AFC(this.id)" id="image" alt="Experimental Image" width="400px" height="200px">
                </div>

                <div class=image>
                    <img onclick="store2AFC(this.id)" type="image" id="image2" alt="Experiment Image" width="400px" height="200px">
                </div>
            </div>
        </div>

        <hr>
            <div class=counter id=counter>
            </div>

        </div> 

        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
like image 390
user14578710 Avatar asked Dec 09 '20 15:12

user14578710

People also ask

How to find duplicate images in Photoshop?

Go through all image tensors one by one and computing their MSE. During this process we make sure to rotate our images by 90 degrees so we can also find duplicate images even though these did not have the same initial orientation. If the MSE of our two images < 200, classify them as duplicates. Check the file size of the original two files.

How to make a comparison between two images?

Both of the images have has to be the same size and channels. Each of the pixels has to be the same value. We can do it in the following seven steps: Load the original image and the second one Check the size of the images   Find what’s different between two images Convert them into grayscale Increasing the size of the differences

What is duplicate image finder (DIF) Python?

✅ The Duplicate Image Finder (DIF) Python script automates this task for you! The DIF searches for images in a… The DIF is now also available as Python package difPy for you to install via the pip installer. The Duplicate Image Finder (DIF) searches for images in a folder, compares the images and checks whether these are duplicates.

How to compare two NumPy arrays?

We generally use the == operator to compare two NumPy arrays to generate a new array object. Call ndarray.all () with the new array object as ndarray to return True if the two NumPy arrays are equivalent. We can also use greater than, less than and equal to operators to compare. To understand, have a look at the code below. Attention geek!

2 Answers

let images1 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

let images2 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

function randomPair(array1, array2) {
  // create an array of all the images, including the duplicates
  const allImages = [...array1, ...array2]
  let n = allImages.length;
  let i, j;
  // an empty array for the unique pairs
  let uniquePairs = [];

  for (i = 0; i < n; i++) {
    for (j = i + 1; j < n; j++) {
      // don't allow an image pair that contains 2 of the same image
      if (allImages[i] !== allImages[j])
        uniquePairs.push([allImages[i], allImages[j]])
    }
  }

  // randomly choose a pair from the list of all unique pairs
  let uniqueItem = uniquePairs[Math.floor(Math.random() * uniquePairs.length)];

  console.log("There are " + uniquePairs.length + " unique combinations between the two arrays")
  console.log("The returned unique pair is: " + uniqueItem.join(" + "))

  return uniqueItem;
}

randomPair(images1, images2)

I'm not sure if I am completely understanding your desired outcome, but why not approach it this way:

I'm understanding this as you want to compare 2 images chosen randomly, from 2 separate arrays that may include the same image, while avoiding comparing an image to itself.

This combines the two arrays, creates all of the possible pairs, filters out when any duplicates (image vs. itself), and returns a random pair.

From here you could display the combinations, and just make sure that the display itself does not duplicate. This isn't a truly random selection, but it randomly selects from all of the possible random combinations, so it should suffice.

like image 85
Berti Avatar answered Sep 20 '22 05:09

Berti

I am not entirely sure by your intended or desired output but from what I got, I would approach this problem like this:

var myImages = [
  "images/images/icon1.jpg",
  "images/images/icon2.jpg",
  "images/images/icon3.jpg",
  "images/images/icon4.jpg",
  "images/images/icon5.jpg",
  "images/images/icon6.jpg",
  "images/images/icon7.jpg",
  "images/images/icon8.jpg",
  "images/images/icon9.jpg",
  "images/images/icon10.jpg",
  "images/images/icon11.jpg",
  "images/images/icon12.jpg",
  "images/images/icon13.jpg",
  "images/images/icon14.jpg",
  "images/images/icon15.jpg",
];

var secondImages = [
  "images/images/icon1.jpg",
  "images/images/icon2.jpg",
  "images/images/icon3.jpg",
  "images/images/icon4.jpg",
  "images/images/icon5.jpg",
  "images/images/icon6.jpg",
  "images/images/icon7.jpg",
  "images/images/icon8.jpg",
  "images/images/icon9.jpg",
  "images/images/icon10.jpg",
  "images/images/icon11.jpg",
  "images/images/icon12.jpg",
  "images/images/icon13.jpg",
  "images/images/icon14.jpg",
  "images/images/icon15.jpg",
  "images/images/icon16.jpg",
  "images/images/icon17.jpg",
  "images/images/icon18.jpg",
  "images/images/icon19.jpg",
  "images/images/icon20.jpg",
];

function getRandomPair() {
    let image1 = '';
    let image2 = '';

    uniquePairOfImage = [];

    while(image1 === image2) {
        image1 = myImages[Math.floor(Math.random() * myImages.length)];
        image2 = secondImages[Math.floor(Math.random() * secondImages.length)];
    }


    uniquePairOfImage.push(image1);
    uniquePairOfImage.push(image2);

    return uniquePairOfImage;
}

console.log(getRandomPair());

This would generate a pair of random pictures.

like image 37
Kati Avatar answered Sep 21 '22 05:09

Kati
Sign in to Comment

Related questions

Scroll to top of a bubble in botframework webchat
How to make Material-UI Dialog resizable
rxjs: Subscriber does not fire on all changes in different class
How to make specific options to appear in select menu?
New eslint errors with the @typescript-eslint/no-unsafe-* rules
Is there a difference between `this.function()` and `function.call(this)`?
Displaying content of Component that i fetched with @ContentChildren or @ViewChild
Does [history.push] in useEffect dependency array cause rerenders?
JavaScript Promises confusion anti-pattern?
Vue Router save scroll position on a route and go back to that position when navigating back?
How to properly bind this to a getter/setter in Javascript
Do not fail whole task even if one of promises rejected
Fit SVG transformed element into the rect bounds with JavaScript
Angularjs: Local storage contenteditable not saving
AngularJS ng-repeat through complex and dynamic JSON Array
cant get length of m4a audio file on webpage
Next.js: Module not found: Can't resolve 'canvg'
Typescript generates declaration d.ts file with `#private;` field
How to stream Base64 data into a video
React Flash Message: How to make the message show without refreshing the page but refresh on 200

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!