Is there a way to manipulate the triangular side zones on an icosahedron so that they vary in size without altering the overall shape of the object?

Is there a way to create an icosahedron that rotates while the triangular sides increase in size, similar to what is shown in this video: Watch here.

Check out this JavaScript code using THREE.js

THREE.IcosahedronGeometry = function ( radius, detail ) {

var t = ( 1 + Math.sqrt( 5 ) ) / 2;

var vertices = [ - 1, t, 0, 1, t, 0, - 1, - t, 0, 1, - t, 0, 0, - 1, t, 0, 1, t, 0, - 1, - t, 0, 1, - t, t, 0, - 1, t, 0, 1, - t, 0, - 1, - t, 0, 1 ];

var indices = [ 0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11, 1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8, 3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9, 4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1 ];

THREE.PolyhedronGeometry.call( this, vertices, indices, radius, detail );

this.type = 'IcosahedronGeometry';

this.parameters = { radius: radius, detail: detail }; };

THREE.IcosahedronGeometry.prototype = Object.create( THREE.Geometry.prototype );

This code snippet was authored by timothypratley available at: https://github.com/timothypratley

javascriptanimationthree.jsgeometryvisualization

Answer №1

In order to adjust the size and position of each triangle, it is essential to ensure that they are centered around zero when constructed. By determining the midpoint of the 3 vertices in a triangle and subtracting it from each point, the triangle can be easily scaled without straying from the origin.

These triangles are then incorporated into a parent object and placed at the previously calculated midpoint. As a result, when scaling the triangles, they maintain their position relative to the overall shape of the icosahedron.

Below is the snippet of code for generating the separate triangles:

(defn icos []
  (let [icosahedron (js/THREE.Object3D.)]
    (doseq [triangle indices
            :let [vs (map vertices triangle)
                  [x y z :as face-center] (map average (transpose vs))
                  normalized-vertices (for [v vs]
                                        (map - v face-center))
                  face-mesh (geo normalized-vertices)]]
      (.set (.-position face-mesh) x y z)
      (.add icosahedron face-mesh))
    icosahedron))

For every triangle, retrieve its vertices, determine the center of the face, subtract this center from each vertex, create the geometry, and position it according to the face center within the icosahedron. The complete rendering code can be found on github.

Experience the final outcome: Icopop offers the ability to scale both the triangles and the spinning icosahedron.

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

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Creating an original list by iterating through a given list

I understand that some may consider this a duplicate, but I have yet to come across a similar example that I can relate to with my limited knowledge. So, I apologize in advance :) This should be pretty simple for an experienced JS developer, I assume. My ...

javascriptecmascript-6vue.jsvuejs2

Update the input field's placeholder with the current date

Is it possible to dynamically set the placeholders for <input type='date' placeholder='{{ 'currentDate' }}'>? I have tried using the following variable: currentDate = this.datePipe.transform(new Date(), "yyyy-MM-dd& ...

javascriptangulartypescript

Struggling to understand why I'm having trouble connecting my AJAX handler within WordPress

Following the instructions here as a guide seems to be leading me astray. After submitting the form below, a POST request to http://thesite/wp-admin/member-update results in a 404 error. I believed that this request should trigger my function member_update ...

javascriptphpjqueryajaxwordpress

Guidance on editing list items individually using jQuery from separate input fields

Working with li presents some challenges for me. On my webpage, I have an input field that dynamically adds values to a list. However, the function to edit these values is not working properly. After editing an li element, it deletes all classes and span ...

javascriptjquery

Issue: listen EADDRINUSE - The address is already in use on port 3306

Currently, my project involves creating a logging system using MySQL and Node.JS. Despite my best efforts, I have encountered the error displayed below and have been actively seeking a solution without success. At this point, I have decided to reach out fo ...

javascriptmysqlnode.jsdatabase

removing the mapStateToProps function will result in an undefined value

I am new to React and I'm in the process of converting a class component to functional components using hooks. I need some guidance on safely removing 'mapStateToProps' without encountering undefined errors. I have two pages, A.js and B.js. ...

javascriptreactjstypescriptfunctionreact-hooks

Showing the ng-controller contents post executing AJAX request using the "as" method

My goal is to display the contents of ng-repeat after making an AJAX call using $http. <table ng-controller="TableController as tc"> <tr> <th>Date</th> <!-- other headers are here --> ...

javascriptangularjsajax

How to prevent jQuery from continually recalculating width on window resize?

Here is the code I've been working on: http://jsfiddle.net/7cXZj/ var callback = function () { $('.progress-bar').width($('.progress-bar').parent().width() - 190); $(".mainpart-background").animate({ width: "80%" }, 80 ...

javascriptjquerycssjquery-animate

Angular JS failing to display error messages

I'm experiencing difficulties displaying login validation errors with the following code. After clicking on the Login button, it redirects to the next page without showing error messages as expected. Any suggestions? index.html:- <!DOCTYPE ht ...

javascripthtmlangularjs

What is the process for invoking an asynchronous cleanup function?

Is it possible to trigger an async cleanup function within useEffect? useEffect(() => { return () => Voice.destroy().then(Voice.removeAllListeners); }, []); Keep in mind that the EffectCallback requires a return of void, not Promise<void> ...

javascriptreactjstypescriptreact-native

How can I connect PHP table data with unique identifiers to JavaScript using arrays?

Allow me to clarify my question/task: 1) I currently have a PHP table that displays temperature data for a specific date and time using an API from a weather forecast. 2) The task at hand is to convert this table into a line graph using Javascript. 3) I a ...

javascriptphparrayslinegraph

Is it necessary for NPM to execute scripts labeled as dependencies during the npm i command execution?

When npm i is run, should it execute the scripts named dependencies? I've observed this behavior in the latest version of Node (v19.8.1) and I'm curious if it's a bug. To replicate this, follow these steps: mkdir test cd test npm init -y T ...

javascriptnode.jsnpm

Converting Array Class into an Array of Arrays using Typescript

Looking to convert an array class in typescript and pass it to another source. Seeking help on achieving this task in a clean and efficient manner. data : target[] = [{Name : "XXX", Age : "31",DOB : "20-12-1988", Resource: "Java"}, {Name : "YYY", Age : "2 ...

javascriptjquerytypescript

Issues with jQuery AJAX functionality and updating a div with JSON results

I am attempting to retrieve data from a database, convert it to JSON, and then display the results within a div that is updated using AJAX triggered by a form submission button labeled Go! Unfortunately, the code is not functioning as expected, and I am a ...

javascriptphpjqueryajaxjson

Vue Application experiences issues resizing Three.js Animation in Canvas

Currently, I am deep diving into learning Three.js within a Vue.js component. Take a look at my code snippet: <script> import * as THREE from "three"; export default { name: "Scene", mounted() { this.initializeThree(); ...

javascriptvue.jsthree.js

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

I am new to advanced coding and currently working on my first responsive Wordpress site. I have a "Product Search" database/site that I'm trying to integrate into my website using an iFrame. I want the integration to look seamless without scroll bars ...

javascripthtmlcssiframe

React Sortable JS is causing the bootstrap grid style to disappear

As I work on developing a straightforward React application, my goal is to integrate React Sortable Js into my Bootstrap grid layout. However, when I enclose within <ReactSortable>, the grid layout no longer displays two boxes side by side in two ro ...

javascriptreactjsreact-sortablejs

`Trigger a page reload when redirecting`

Currently, I am tackling some bug fixes on an older Zend Framework 1.10 project and encountering difficulties with redirection and page refresh. The issue: The task at hand is to make an AJAX call, verify if a person has insurance assigned, and prevent de ...

javascriptphpjqueryajaxzend-framework

Closing Browser Tabs with Javascript or jQuery

I've included a div with survey questions that is hidden by default. When the user tries to close the window or navigate away from the page, I want to display the survey div for confirmation instead of using the browser's default confirm box meth ...

javascriptjqueryhtml