Additive color mix with triangles

Developer
Matthias Dittgen
Size
2,760 Kb
Views
34,408
  1. Additive color mix with triangles Previews
  2. Additive color mix with triangles HTML Codes
  3. Additive color mix with triangles CSS Codes
  4. Additive color mix with triangles JS Codes

How do I make an additive color mix with triangles?

Some fun with triangles, colors and math. What is a additive color mix with triangles? How do you make a additive color mix with triangles? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.

Additive color mix with triangles Previews
IQ Test

Additive color mix with triangles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Additive color mix with triangles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- playing with additive color mixing -->
<canvas id="space"></canvas>
<div id="info"> <h1>Additive color mix with triangles</h1> <p>switch RGB/CMY: <input id="switch" type="checkbox"></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Additive color mix with triangles - Script Codes CSS Codes

body{ position: relative;
}
#info { position: absolute; top: 0px; left: 0px; margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
p, a { margin: 3px 0 0 0; color: #cccccc; font-size: 13px; line-height: 21px;
}

Additive color mix with triangles - Script Codes JS Codes

var ns = {}
ns.html = document.documentElement;
ns.body = ns.html.getElementsByTagName('body')[0];
for (key in ns) { ns[key].style.width = '100%'; ns[key].style.height = '100%'; ns[key].style.margin = '0'; ns[key].style.backgroundColor = '#333333';
}
ns.cr = [255, 0, 0];
ns.cg = [ 0, 255, 0];
ns.cb = [ 0, 0, 255];
ns.cc = [ 0, 255, 255];
ns.cm = [255, 0, 255];
ns.cy = [255, 255, 0];
ns.ck = [ 0, 0, 0];
ns.isRGB = false;
function pointOnCircle(centerX, centerY, radius, angle) { return { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }
}
function middle(s, e) { return { x: s.x + (e.x-s.x)/2, y: s.y + (e.y-s.y)/2 };
}
function triangle(ctx, x, y, r, rgb, t) { var a = pointOnCircle(x, y, r, 0); var b = pointOnCircle(x, y, r, Math.PI*2/3); var c = pointOnCircle(x, y, r, Math.PI*4/3); if (t==1) { s = a; e = middle(b,c); } if (t==2) { s = b; e = middle(c,a); } if (t==3) { s = c; e = middle(a,b); } var lg = ctx.createLinearGradient(s.x, s.y, e.x, e.y); lg.addColorStop(ns.isRGB?1:0, 'rgba('+rgb.join(',')+', 0.0)'); lg.addColorStop(ns.isRGB?0:1, 'rgba('+rgb.join(',')+', 1.0)'); ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.lineTo(c.x, c.y); ctx.fillStyle = lg; ctx.fill(); ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(e.x, e.y); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.stroke();
}
function draw(ctx, r) { ctx.clearRect (0 ,0 ,ns.ctx.canvas.width ,ns.ctx.canvas.height); var d; d = pointOnCircle(200, 200, r, 0); triangle(ctx, d.x, d.y, 120, ns.cr, 1); d = pointOnCircle(200, 200, r, Math.PI*2/3); triangle(ctx, d.x, d.y, 120, ns.cg, 2); d = pointOnCircle(200, 200, r, Math.PI*4/3); triangle(ctx, d.x, d.y, 120, ns.cb, 3);
}
ns.count = -100;
ns.dir = +1;
function loop() { ns.count+=ns.dir; if (ns.count>100) ns.dir = -1; if (ns.count<-100) ns.dir = 1; draw(ns.ctx, ns.count); setTimeout(arguments.callee, 1000/60);
}
ns.switch = document.getElementById('switch');
ns.switch.addEventListener('change', function () { ns.isRGB = !ns.isRGB;
});
function main() { ns.canvas = document.getElementById('space'); ns.canvas.width = window.innerWidth; ns.canvas.height = window.innerHeight; ns.ctx = ns.canvas.getContext('2d'); ns.ctx.globalAlpha = 0.9; ns.ctx.globalCompositeOperation = "lighter"; loop();
}
window.addEventListener('load', function() { setTimeout(main, 0);
});
Additive color mix with triangles - Script Codes
Additive color mix with triangles - Script Codes
Home Page Home
Developer Matthias Dittgen
Username matths
Uploaded August 26, 2022
Rating 3
Size 2,760 Kb
Views 34,408
Do you need developer help for Additive color mix with triangles?

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!

Matthias Dittgen (matths) Script Codes
Name
SVG Button
Moving lines illusion while scrolling
1x1 trainer
Text-shadow fireworks
Animating non-CSS property
Draw some line art
Timebox
Outline demo
D3 bar chart experiment
WIP
Create amazing SEO content with AI!

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!