andre/UoL
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add completed color triads

Browse Source
This commit is contained in:
Lev
2021-07-28 01:24:03 -05:00
parent 33ca84b194
commit cd958becac
3 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
CM2030 Graphics Programming/Week 13/13.2.6 Colour Harmony/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>

3
CM2030 Graphics Programming/Week 13/13.2.6 Colour Harmony/p5.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

38
CM2030 Graphics Programming/Week 13/13.2.6 Colour Harmony/sketch.js Normal file
View File

@ -0,0 +1,38 @@
let color1 = 0;
function setup() {
createCanvas(720, 400);
colorMode(HSB);
noStroke();
rectMode(CENTER);
}
function draw() {
// complementary colors
background(0);
fill(0, 100, 100);
rect(120, 120, 200, 200);
fill(180, 100, 100);
rect(120, 120, 100, 100);
// triatic colors
let startColor = 0;
let colorDiff = 360/3;
fill(startColor, 100, 100);
rect(340, 120, 200, 200);
fill(startColor + colorDiff, 100, 100);
rect(340, 120, 150, 150);
fill(startColor + colorDiff * 2, 100, 100);
rect(340, 120, 100, 100);
//if(frameCount % 10 == 0)
color1 + 1 == 360 ? color1 = 0 : color1 += 1;
//startColor = 40;
fill(color1, 100, 100);
rect(560, 120, 200, 200);
fill(color1 + colorDiff, 100, 100);
rect(560, 120, 150, 150);
fill(color1 + colorDiff * 2, 100, 100);
rect(560, 120, 100, 100);
}