The p5js function pixelDensity() does not provide improved resolution on retina screens

Currently, I am working on a project that involves generating collages from sets of photos. This process includes averaging the pixels' colors of the images and then using that averaged color to plot points on the canvas. However, when I zoom in on retina screens with high resolutions, it becomes evident that the collage is made up of individual points rather than appearing as one cohesive image.

I have tried experimenting with the pixelDensity() function to address this issue, but so far, it hasn't provided a solution. An example of the problem can be seen in the zoomed crop image linked below:

https://i.sstatic.net/k7cWM.jpg

The main loop responsible for combining the pixels follows a basic structure outlined as:

for (let y = 0; y <= imgOne.height; y++) {
    for (let x = 0; x <= imgOne.width; x++) {
      // Get the colors.
      const colorOne = imgOne.get(x, y);
      const colorTwo = imgTwo.get(x, y);

      let avgRed = (red(colorOne) + red(colorTwo)) / 2;
      let avgGreen = (green(colorOne) + green(colorTwo)) / 2;
      let avgBlue = (blue(colorOne) + blue(colorTwo)) / 2;
      stroke(avgRed, avgGreen, avgBlue);
      point(x, y);      
    }
}

Answer №1

To create precise point shapes, the point function draws tiny round shapes with a diameter matching the pixel density. When you enlarge the canvas through CSS transform or browser zoom functions, sub-pixel artifacts may become visible. To ensure that your color points are square and fully fill the plane even when zoomed in, there are two approaches: 1) use the set() function to explicitly draw pixels, or 2) use the square() or rect() functions to intentionally draw squares. (Alternatively, direct manipulation of the pixels array is possible but significantly more complex).

Below is an example showcasing the original issue along with various solutions.

// code snippet here
// CSS snippet here
<script src="https://cdn.example.com/script.js"></script>

If you want to replicate the issue, adjust the browsers zoom first before executing the code. The behavior may vary depending on whether you zoom before or after running the code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting information to a server

I have a simple Angular 6 app with follow and unfollow buttons. When you click follow, the number increases. I want to save these follower numbers to a JSON server. Here is the link to the JSON server documentation: JSON Server Documentation To see a dem ...

Utilizing Unix timestamps for x-values while displaying dates as x-labels in an ECharts line chart

I'm struggling with incorporating date-converted unix timestamps as values in my ECharts graph. The x-axis of my chart is meant to display the recording time for each buy or sell price, represented by respective lines. Everything functions properly wh ...

Place the Drawer element at the bottom of the menu

Is there a way to position the menu point at the bottom of the screen? It would be great if we could easily customize the style of the navigation options for each element. Check out my App Navigator below: const AppNavigator = createDrawerNavigator( ...

Retrieving a single item from an array of objects with the help of body parser

I need assistance with sending an array of objects to a post route in my express app. Here is my form (written in ejs format): <form action="/archiveList/<%= list._id %>" method="POST"> <input type="hidden" name="list" value = <%= items ...

Can we utilize the elements in Array<keyof T> as keys in T?

Hello, I am trying to develop a function that accepts two parameters: an array of objects "T[]" and an array of fields of type T. However, I am encountering an issue when I reach the line where I invoke el[col] Argument of type 'T[keyof T]' i ...

Selecting a specific element and attaching a particular class to this element, but directing it towards a different element that shares the same index in a separate node list

I am working on a project where I have two sets of identical images - one is displayed in a gallery format and the other set is hidden until its corresponding gallery image is clicked, creating a lightbox effect. For example: <ul id="gallery"> ...

tips for getting two ajax json Data from .net

When working with .NET, I am encountering an issue where I need to send two sets of JSON data (test1 and test2) to a .NET controller using JavaScript (ajax). Here is the code snippet for sending the data: .ajax({ type: 'POST', url ...

Load the index file using any URL parameter in the Express.js Router's "catchall" feature

I have a simple setup for my project, including server.js file in the root directory with the following code: app.use('/', express.static(__dirname + '/public/')); In addition, there is a public folder containing index.html, styles, a ...

Tips on deleting CSS comments from a CSS file

Currently, I am utilizing nextjs + reactjs. My objective is to eliminate all CSS comments from my existing css file. Despite using next-purgecss in order to get rid of unnecessary CSS code, the comments are still persisting. What could be the reason behind ...

Reserved space for both double and single quotation marks

I've created a function that generates a table of specified size with predetermined content in each cell, and displays it within a designated div ID. generate_table(4, 4, 'Cell Content', 'display') To test this function, I added a ...

Exploring the gridview with JQuery to iterate through and verify if any checkboxes have been selected

I am currently working on a jQuery-based application. In this application, I have an ASP.net GridView that contains checkboxes in each row. My goal is to determine whether any of the checkboxes are checked or not. Below is the code snippet where I loop thr ...

Angular.js is throwing an error at line 13708, stating: "Error: [ng:areq] Function 'homeController' is missing or undefined."

Encountered an issue while trying to reach HomeController (module controller). Upon clicking the "home" link, an error appeared in the console stating that "HomeController is not a function; undefined. Could you advise on where I should register this cont ...

Modify the starting URL in a Node.js application to /foo instead of just /

I am looking to visit a website with a default index URL like localhost:XXXX/foo, instead of the usual localhost:XXXX/. How can I achieve this specific setup? Any suggestions on how to make this happen? ...

Instructions on how to insert a hyperlink into the information within the generated div utilizing an API

Currently, I am fetching information from an API based on the user's input (zipcode). The data retrieved includes the name of the institution, address, and webpage. I've been trying to make the webpage link clickable by adding a hyperlink to the ...

Iterating over a JSON object with an embedded index in Angular using ng-repeat

Here is the structure of a JSON object: { "0": { "Order_Id": "100000001", "prodct_Status": "Pending", "Price": "8.0000", "date_created": "Jun 4, 2014 7:55:42 AM", "Shipping_Address": "vbccv", "Region": ...

Turning spring form data into a JSON object via automation (with a mix of Spring, jQuery, AJAX, and JSON)

Recently, I've set up a spring form that utilizes ajax for submission. Here's an overview of my form... <form:form action="addToCart" method="POST" modelAttribute="cartProduct"> <form:input type="hidden" ...

What is the method for setting the content-type in an AJAX request for Android browsers?

I am facing an issue with my ajax call to the Rails server. The response from the server varies between HTML and JSON based on the content type. Surprisingly, this works smoothly on iPhone and desktop browsers like Chrome, but I am encountering a problem o ...

Tips on utilizing CSS modules in React without changing class names

After starting to use css modules in my react project, I quickly realized the struggle of changing classnames to fit the requirements of css modules. For example, if we have a component using regular css: import React from 'react' import ". ...

Implementing Knockout.js with JqueryUI Autocomplete: Access the complete object instead of just the value

I have implemented a custom binding for a JQueryUI auto complete feature that works well. However, I am looking to modify it so that it returns the Item object, which can then be pushed to another array. Can someone provide guidance on how to achieve this ...

Ways to incorporate sass:math into your vue.config.js file

While using vue-cli with Vue 2.6 and sass 1.49, I encountered errors in the console related to simple division calculations: Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. I attempted to ...