quaintitative

Manipulating vertices in three.js

We had a simple primer on three.js here.

Now, let’s do something a little more fancy, but not overly complicated. It also gives us a good idea of how to objects are created in three.js and how to manipulate them at the vertice-level.

The code is almost identical to what we have previously. We ..

• set up the scene
• add the camera
• add the renderer
• attach it to the DOM
• add lights
• add spheres
• render and animate

We just do one more step within the animation loop.

sphere_one.geometry.vertices.forEach(function(i){
                    var noisy = noise.simplex3(i.x,i.y,i.z)*0.05;
                    i.x+=noisy*direction;
                    i.y+=noisy*direction;
                    i.z+=noisy*direction;
                });

What we are doing here is to run through each of the vertices of the sphere, and add a small noise to its x, y and z position. This causes the sphere to be a jaggy blob.

We also make one more small change here, which is to check the time elapsed since the start, and change the direction of the noise when it hits 100.

if (Math.floor(clock.getElapsedTime())%100==0){
                    direction*=-1;
                };

The full code is here.

Articles

Comparing Prompts for Different Large Language Models (Other than ChatGPT)

AI and UIs

Listing NFTs

Extracting and Processing Wikidata datasets

Extracting and Processing Google Trends data

Extracting and Processing Reddit datasets from PushShift

Extracting and Processing GDELT GKG datasets from BigQuery

Some notes relating to Machine Learning

Some notes relating to Python

Using CCapture.js library with p5.js and three.js

Introduction to PoseNet with three.js

Topic Modelling

Three.js Series - Manipulating vertices in three.js

Three.js Series - Music and three.js

Three.js Series - Simple primer on three.js

HTML Scraping 101

(Almost) The Simplest Server Ever

Tweening in p5.js

Logistic Regression Classification in plain ole Javascript

Introduction to Machine Learning Right Inside the Browser

Nature and Math - Particle Swarm Optimisation

Growing a network garden in D3

Data Analytics with Blender

The Nature of Code Ported to Three.js

Primer on Generative Art in Blender

How normal are you? Checking distributional assumptions.

Monte Carlo Simulation of Value at Risk in Python

Measuring Expected Shortfall in Python

Style Transfer X Generative Art

Measuring Market Risk in Python

Simple charts | crossfilter.js and dc.js

d3.js vs. p5.js for visualisation

Portfolio Optimisation with Tensorflow and D3 Dashboard

Setting Up a Data Lab Environment - Part 6

Setting Up a Data Lab Environment - Part 5

Setting Up a Data Lab Environment - Part 4

Setting Up a Data Lab Environment - Part 3

Setting Up a Data Lab Environment - Part 2

Setting Up a Data Lab Environment - Part 1

Generating a Strange Attractor in three.js

(Almost) All the Most Common Machine Learning Algorithms in Javascript

3 Days of Hand Coding Visualisations - Day 3

3 Days of Hand Coding Visualisations - Day 2

3 Days of Hand Coding Visualisations - Day 1

3 Days of Hand Coding Visualisations - Introduction