Rose curve animation
How do I make an rose curve animation?
What is a rose curve animation? How do you make a rose curve animation? This script and codes were developed by Takashi on 20 October 2022, Thursday.
Rose curve animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rose curve animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.21/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Rose curve animation - Script Codes CSS Codes
body {padding: 0; margin: 0;}
Rose curve animation - Script Codes JS Codes
var pSize = 6;
var maxAngle = 0;
var g_freq = 0;
var g_col_h = 0;
var g_col_i = 0;
var freq_increase = true;
var col_increase = true;
var radius = 0;
function setup(){ createCanvas(windowWidth, windowHeight); background(0); blendMode(ADD); colorMode(HSB); init();
}
function draw(){ clear(); background(0); translate(windowWidth/2, windowHeight/2); noStroke(); if(freq_increase){ g_freq += 0.01; }else{ g_freq -= 0.01; } if(g_freq>1000){ g_freq = 1000; freq_increase = false; }else if(g_freq<0){ g_freq = 0; freq_increase = true; } rose_curve();
}
function windowResized() { resizeCanvas(windowWidth, windowHeight); init();
}
/*
カスタム関数
-------------------------------*/
function rose_curve(){ var maxAngle = 360; for(var i=0; i<maxAngle; i+=1){ var a = sin(radians(i*5)); var r = a * radius; var x = cos(radians(i*g_freq)) * r; var y = sin(radians(i*g_freq)) * r; //g_col_h = g_col_h%360; //g_col_h = map(i,0,maxAngle,0,360); //g_col_h = map(a,-1,1,0,360); if(col_increase){ g_col_i += 0.003; }else{ g_col_i -= 0.003; } if(g_col_i>360){ col_increase = false; g_col_i = 360; }else if(g_col_i<0){ col_increase = true; g_col_i = 0; } g_col_h = map(a,-1,1,0,g_col_i); fill(g_col_h,100,100,1); ellipse(x,y,pSize,pSize); }
}
function init(){ if(windowWidth>windowHeight){ radius = windowHeight * 0.4; }else{ radius = windowWidth * 0.4; }
}
![Rose curve animation - Script Codes](http://shots.codepen.io/tksiiii/pen/OMExex-512.jpg)
Developer | Takashi |
Username | tksiiii |
Uploaded | October 20, 2022 |
Rating | 3 |
Size | 2,083 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sierpinski | 3,208 Kb |
Lines circle | 1,959 Kb |
Rose curve animation | 2,083 Kb |
Wave2D | 4,772 Kb |
Magic circle1 | 3,558 Kb |
Polar Rose Generator | 5,055 Kb |
Glitch Effect | 215,738 Kb |
Magic circle5 | 3,614 Kb |
Colorful smoke | 2,247 Kb |
Mosaic Pixel Effect | 358,869 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
Videogular - Overlay Play Plugin | 2fdevs | 2,432 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!