What are the steps to create a spinning spiral using WebGL?

Is there anyone willing to incorporate this specific animation into a WebGL shader example? This would be extremely helpful for individuals, such as myself, who are trying to learn WebGL.

Reference:

Answer №1

I have incorporated your animation into my website at . If WebGL is not supported by your browser, you will receive a "WebGL not supported" message. This animation is inspired by a sandbox created by mrdoob, showcasing a rectangular surface made up of two triangles with the shader applied to it.

Here is the actual shader code:

uniform float time;
uniform vec2 resolution;
uniform vec2 aspect;

void main( void ) {

    vec2 position = -aspect.xy + 2.0 * gl_FragCoord.xy / resolution.xy * aspect.xy;
    float angle = 0.0 ;
    float radius = length(position) ;
    if (position.x != 0.0 && position.y != 0.0){
        angle = degrees(atan(position.y,position.x)) ;
    }
    float amod = mod(angle+30.0*time-120.0*log(radius), 30.0);
    if (amod<15.0){
        gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );
    } else{
        gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );                    
    }
}

The spiral's size adjusts with the browser window, but you also have the option to use a fixed canvas size instead.

Update: Just for entertainment purposes, here is the same implementation in a jsfiddle: http://jsfiddle.net/z9EmN/

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

"Create a HTML Form with a Submit Button that Does Not Refresh the Page

I created a form with fields for Name and Email, along with a submit button. The submit button is set to trigger the invite() JavaScript method upon being clicked. <form id="inviteForm" action=""> <div class="modal-body"> ...

(Is it even necessary to use a timezone library for this straightforward scenario?)

As I delve into the realm of time zones for the first time, I've heard tales of how challenging it can be for developers. To ensure I am on the right track, I am posing this question as a safeguard to make sure nothing is overlooked. My scenario is q ...

Delaying Ajax request

I've encountered some strange behavior. After the initial ajax call triggered by selecting a city from a dropdown menu, I then have a continuous ajax call on a delay. The first call stores the selected city value in a global variable. $('.sele ...

The unexpected actions while altering the direction of iteration in a 2D array and sorting elements

If we consider a 2D array: ┌─────────┬───┬───┬───┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───┼───┼───┤ │ 0 │ 2 │ 3 │ 2 │ │ 1 │ 3 │ ...

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

I encountered an issue while trying to implement react-fancybox and received an error. https://i.sstatic.net/vgFha.png To resolve the error, I executed the following commands: npm install --save-dev @babel/preset-react, npm install --save-dev @babel/plugi ...

Create a Vue application that utilizes a promise to display content and then waits for user input

Seeking guidance for a design query, I am dealing with a JavaScript script that is heavy on logic. It is structured using promises as shown below: init() .then(result => doSomethingA(result)) .then(result => doSomethingB(result)) .then( ...

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?

This code snippet uses ChakraUI styling and retrieves images from SanityCMS: <Box w="500px" h="500px" bg="red"> <Image src={allArtPieces[0].imageUrl} alt={allArtPieces[0].title} width="500px" ...

The functionality of jQuery animation appears to fail upon the second attempt

Can you tell me why, in THIS CODE, the "I" button at the bottom right works perfectly the first time, but on the second click it only shows a pink background? (function(){ 'use strict'; var $mainButton = $(".main-button"), $closeBut ...

"Utilizing NodeJS in conjunction with socket.io and PostgreSQL's LISTEN feature

My goal is to create a frontend that can detect events whenever a specific table in my Postgres database is modified. The Postgres events are triggering correctly and I am able to transmit them through the Socket.io connection. However, I am experiencing ...

Updating components in Angular4 when route changesHow to update components on route

How can I ensure my component updates when the route changes? Here is the code for my component : import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ListService } from '.. ...

AngularJS: Setting the hash prefix for $locationProvider to "!"

Is there a way to show the URL as "www.test.com/!#" instead of "www.test.com/#!" when using $locationProvider.hashPrefix("!")? I want the exclamation mark before the hash, not after it. Thanks var app = angular.module('app', []); app.config(fu ...

Directive ng-click not executing as expected

Currently, I am developing an Angular application that involves a controller named visualization and a directive named force-layout. Within the HTML template of the directive, I have implemented three buttons with corresponding functions attached to them. ...

Using jQuery to append a single AJAX response at a time

I wrote a piece of code that utilizes an ajax request to communicate with json-server, retrieving data which is then displayed in an html div using jquery .html(). The content shown in the div depends on the button clicked by the user. While .append() work ...

Display hyperlink depending on spinner value

I stumbled upon this JavaScript spinner that displays a countdown feature, which I find quite interesting. The spinner counts down from 15 seconds. I'm curious if it's feasible to customize it so that if you land on a specific category like geogr ...

Dividing a U8IntArray in JavaScript

Looking to divide a U8IntArray that contains 20 bytes into two parts: the first 8 bytes and the remaining byte 9 to 20. var u8Array = new Uint8Array(20); var part1 = u8Array.subarray(0, 8); var part2 = u8Array.subarray(8); console.log(part1, part2); Th ...

Can you explain the logic behind the continuation of the "if" condition even when it returns false? What causes it to persist despite being untrue

Specific conditions were established where a number should be greater than those surrounding it, but unfortunately the condition did not hold true. for (var i = 0; i + 1 < n; i++) { if (arr[i] < arr[i + 1] || arr[i + 1] > arr[i + 2]) { ...

Tips for effectively combining the map and find functions in Typescript

I am attempting to generate an array of strings with a length greater than zero. let sampleArray2:string[] = ["hello","world","angular","typescript"]; let subArray:string[] = sampleArray2 .map(() => sampleArray2 .find(val => val.length & ...

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

Get your hands on the ReactJS PDF download module today and

Help! My supervisor is looking to add a premium feature for downloading PDFs in our web application using React. Can anyone recommend a paid third-party library or plugin that specializes in this? It must be compatible with ReactJS. Any tips or suggestion ...

The method continues to receive null values from Ajax despite successfully retrieving the data from Facebook

My current challenge involves creating a login using Facebook. The console indicates that the requested data (email, first_name, etc.) is being retrieved successfully, but for some reason, the AJAX request keeps sending null data to the PHP method. Below ...