Is there a way to create a macular grid using Javascript, with circles arranged in a 'V' shape pattern?
How can we generate dotted circles in the shape of a 'V'? Any suggestions on how to tackle this challenge?
If you want to visualize what a Macular grid looks like, check out the screenshot I've linked below.
Screenshot of Macular Grid
This unique graph type is quite fascinating to me as I have never come across it before. I'm unable to find any information about it, but if it's mathematically derived, I would love to learn more about how it functions.
My observations on the rules of this graph are as follows:
Here is my attempt at replicating it: http://jsfiddle.net/lannymcnie/sbmaLed1/
Below is the main function code snippet:
function drawMac(radius, start, end, degenerate) {
var g = new createjs.Graphics().f("#f00").dc(0,0,5);
for (var i=start, l=end; i<=l; i+=degenerate) {
var segments = i;
var d = segments/end * radius;
var counter = segments%(degenerate*2) == 0;
var offset = Math.PI*2 * 1/segments;
for (var j=0; j<segments; j++) {
var angle = Math.PI*2 * (j/segments);
var s = new createjs.Shape(g);
s.x = Math.sin(angle) * d;
s.y = Math.cos(angle) * d;
container.addChild(s);
}
}
container.rotation = 45;
}
I hope this explanation helps. It was enjoyable trying to decipher this pattern.
After making some minor adjustments, I managed to get much closer to the original design:
Below is the final function code snippet:
function drawMac(radius, start, end, degenerate) {
var g = new createjs.Graphics().f("#f00").dc(0,0,5);
for (var i=start, l=end; i<=l; i+=degenerate) {
var segments = i;
var d = Math.pow(segments/end, 0.75) * radius;
var counter = segments%(degenerate*2) == 0;
var offset = Math.PI*2 * 1/segments;
for (var j=0; j<segments; j++) {
var angle = Math.PI*2 * (j/segments+i*0.002);
var s = new createjs.Shape(g);
s.x = Math.sin(angle) * d;
s.y = Math.cos(angle) * d;
container.addChild(s);
}
}
container.rotation = 45;
}
With these adjustments, it now matches about 98% to the original. I compared the results in Photoshop and overlaid my version (dark red) over the original.
Furthermore, here is the updated fiddle with the final result. http://jsfiddle.net/lannymcnie/sbmaLed1/6/
Response for GridX:
website.com/gridx
I'm working on a registration form that requires some basic details. I want to dynamically change a question based on the user's input without having to submit the form first. For example, when the page loads the question might be, "Is Attendee ...
In my display area, which is a div element, I have rendered some text using spans. I utilized the map function to render the text from an array. The issue arises when I apply a color class to the span elements within the map function, causing all text to ...
Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...
When working with my map, I attempt to toggle the layer's selection using a mouse click. Initially, my map looks like this: https://i.sstatic.net/lOI95.png Upon clicking a layer, my goal is to highlight and select it: https://i.sstatic.net/63Rx2.pn ...
My goal is to save a new post into MongoDB using Mongoose with Node/Express. This step is crucial for me to kickstart the process of building a blog website using Node. I will be sharing code snippets from: 'routes': posts, verifyToken, and aut ...
In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...
I am currently working with three models: User, Product, and Orders. These models have references to each other. Here is my Orders Schema: const orderSchema = Schema({ buyerId:{ type: Schema.Types.ObjectId, ref: 'User' }, totalAmount: { ...
I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...
I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...
As I receive data from a server, my goal is to categorize it into various buckets for presentation. The dataset appears in the following format: Array [ Object { "name": "1.00", "value": 17, }, Object { "name": "1.01", "value": ...
I am struggling with correctly disabling a button in my React code when it is clicked. I attempted to pass in an array and handle the button click, but it consistently results in errors. This task seems more complicated than it should be. How can I ensure ...
Encountering some issues on the live server with this code. It's functioning perfectly fine on my local machine, but once I try to deploy it on Netlify, I'm running into this error message: ⨯ useSearchParams() should be wrapped in a suspense bo ...
Here is a basic modal setup: <div id="info" style="display: none;"> <h3 class="title">User Information</h3> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td width="50%" align="right ...
Below, you'll find a simple express server I've put together: // check out my basic Express server var express = require("express"); var app = express(); var bodyparser = require("body-parser"); app.use("/public/", express.static("./public/")); ...
Is there a way to input a string in an 'input type="time"' field in my HTML code? <label class="item item-input"> <span class="input-label">Departure Time </span> <input type="time" ng-model="heur ...
I have developed a Rest service in WCF (demo), which provides me with the following output: {"GetEmployeeJSONResult":{"Id":101,"Name":"Sumanth","Salary":5000}} Now, I have created an ASP.NET website where I am utilizing AJAX JSON to call this rest service ...
After numerous attempts to embed a YouTube video in a WebView, I'm still struggling with a persistent small margin on the right side of the video. I've researched similar issues and attempted to address it through JavaScript adjustments without ...
Currently diving into Redux and encountering a problem that is new to me as I usually work with React without redux. The issue arises when I attempt to showcase a portion of my state within a component named loginStatus. Despite setting up the state in the ...
Not the HTML DOM element tag, the JSX tag, the react class name. As I work on creating an editor, adding items to the canvas array requires me to check and call the appropriate method based on what is being added. A simplified version of my idea: changeS ...
I am currently working on incorporating a matcap shader into a 3D scene, inspired by this example: However, when I attempt to implement it, the colors appear washed out: You can compare it to my original matcap here: https://i.sstatic.net/46PS9.jpg (so ...