Spiral Context (Animated)


Author: Vincent Berger
Created: Jan 21, 2019






Canvas drawed spiral context.
Written in pure OOP Javascript(ES6) which is a plessure to script!

Javascript:

window.onload=()=>{
    H=window.innerHeight;
    W=window.innerWidth;
    
    document.body.style.margin="0";
    document.body.style.backgroundColor="#000";
    document.body.style.overflowX="hidden";
    document.body.style.overflowY="hidden";
    
    canvas=document.createElement("canvas");
    canvas.width=W;
    canvas.height=H;
    canvas.style.backgroundColor="#000";
    document.body.appendChild(canvas);
    var draw=canvas.getContext('2d');
    
    class Circle{
    	constructor(x,y,radius,sAngle,eAngle,ccw){
    		this.x=x;
    		this.y=y;
    		this.radius=radius;
    		this.sAngle=sAngle;
    		this.eAngle=eAngle;
    		this.ccw=ccw;
    	}
    
    	create(x,y,radius,sAngle,eAngle,ccw){
    		var color1=Math.floor((Math.random()*255)+5),
    		color2=Math.floor((Math.random()*255)+100),
    		color3=Math.floor((Math.random()*255)+200);
    
    		draw.arc(x, y, radius, sAngle, eAngle, ccw);
    		draw.strokeStyle="rgba("+color1+","+color1+","+color1+",1)";
    		draw.stroke();
    	}
    }
    
    const spiral=new Circle();
    
    var cnt=0;
    setI=setInterval(()=>{
    	spiral.create(W/2, H/2, Math.PI*cnt, Math.PI/cnt, Math.PI*2, false);
    	if(cnt==300){
    		clearInterval(setI);
    		draw.clearRect(0,0,W,H);
    	}
    	cnt+=1;
    },100);
}
                

Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top