-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42 from brittni-and-the-polar-bear/22-create-basi…
…c-color-classes 22 create basic color classes
- Loading branch information
Showing
37 changed files
with
1,196 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /* | ||
| * Copyright (C) 2023-2024 Brittni Watkins. | ||
| * | ||
| * This file is a part of brittni and the polar bear's Generative Art Project Template, | ||
| * which is released under the GNU Affero General Public License, Version 3.0. | ||
| * You may not use this file except in compliance with the license. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. See LICENSE or go to | ||
| * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
| * See the GNU Affero General Public License for more details. | ||
| */ | ||
|
|
||
| import {sketch} from "sketch"; | ||
| import {Color, getSingleDimensionIndex} from "common"; | ||
|
|
||
| sketch.setup = (): void => { | ||
| sketch.createCanvas(500, 500); | ||
| } | ||
|
|
||
| sketch.draw = (): void => { | ||
| const complete: number = 6; | ||
| const rows: number = 10; | ||
| const cols: number = 10; | ||
| const black: Color = new Color(sketch.color('#000')); | ||
| const green: Color = new Color(sketch.color('#228B22')); | ||
| const white: Color = new Color(sketch.color('#F0F8F8')); | ||
| const boxWidth: number = sketch.width / cols; | ||
| const boxHeight: number = sketch.height / rows; | ||
| sketch.background(255); | ||
| sketch.stroke(black.color); | ||
| sketch.strokeWeight(3); | ||
|
|
||
| for (let row: number = 0; row < rows; row++) { | ||
| const y: number = boxHeight * row; | ||
|
|
||
| for (let col: number = 0; col < cols; col++) { | ||
| const x: number = boxWidth * col; | ||
| const index: number | undefined = getSingleDimensionIndex(row, col, rows, cols); | ||
|
|
||
| if (typeof index === 'number' && index < complete) { | ||
| sketch.fill(green.color); | ||
| } else { | ||
| sketch.fill(white.color); | ||
| } | ||
|
|
||
| sketch.rect(x, y, boxWidth, boxHeight); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| sketch.resizeCanvas = (): void => { | ||
| return; | ||
| } |
138 changes: 138 additions & 0 deletions
138
projects/genuary-2024/1-particles-lots-of-them/sketch.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| /* | ||
| * Copyright (C) 2024 Brittni Watkins. | ||
| * | ||
| * This file is a part of brittni and the polar bear's Generative Art Project Template, | ||
| * which is released under the GNU Affero General Public License, Version 3.0. | ||
| * You may not use this file except in compliance with the license. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. See LICENSE or go to | ||
| * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
| * See the GNU Affero General Public License for more details. | ||
| */ | ||
|
|
||
| import {sketch} from 'sketch'; | ||
| import {Color, P5Lib, randomFloat, randomInt, SketchContext} from 'common'; | ||
|
|
||
| let c1: Color; | ||
| let c2: Color; | ||
| let c3: Color; | ||
|
|
||
| let p1: P5Lib.Vector; | ||
| let p2: P5Lib.Vector; | ||
| let p3: P5Lib.Vector; | ||
|
|
||
| let p1Rate: P5Lib.Vector; | ||
| let p2Rate: P5Lib.Vector; | ||
| let p3Rate: P5Lib.Vector; | ||
|
|
||
| let points: P5Lib.Vector[] = []; | ||
| let pointRates: P5Lib.Vector[] = []; | ||
|
|
||
| sketch.setup = (): void => { | ||
| sketch.createCanvas(sketch.windowWidth, sketch.windowHeight); | ||
| SketchContext.initialize(sketch); | ||
|
|
||
| c1 = new Color(sketch.color(randomInt(0, 255), randomInt(0, 255), randomInt(0, 255))); | ||
| c2 = new Color(sketch.color(randomInt(0, 255), randomInt(0, 255), randomInt(0, 255))); | ||
| c3 = new Color(sketch.color(randomInt(0, 255), randomInt(0, 255), randomInt(0, 255))); | ||
|
|
||
| p1 = new P5Lib.Vector(randomFloat(0, sketch.width), randomFloat(0, sketch.height)); | ||
| p2 = new P5Lib.Vector(randomFloat(0, sketch.width), randomFloat(0, sketch.height)); | ||
| p3 = new P5Lib.Vector(randomFloat(0, sketch.width), randomFloat(0, sketch.height)); | ||
|
|
||
| p1Rate = new P5Lib.Vector(randomFloat(-3, 3), randomFloat(-3, 3)); | ||
| p2Rate = new P5Lib.Vector(randomFloat(-3, 3), randomFloat(-3, 3)); | ||
| p3Rate = new P5Lib.Vector(randomFloat(-3, 3), randomFloat(-3, 3)); | ||
|
|
||
| for (let i: number = 0; i < 5_000; i++) { | ||
| points.push(new P5Lib.Vector(randomFloat(0, sketch.width), randomFloat(0, sketch.height))); | ||
| pointRates.push(new P5Lib.Vector(randomFloat(-3, 3), randomFloat(-3, 3))); | ||
| } | ||
| } | ||
|
|
||
| sketch.draw = (): void => { | ||
| sketch.fill(0, 100); | ||
| sketch.rect(-10, -10, sketch.width + 10, sketch.height + 10); | ||
|
|
||
| const pc1: PointAndColor = { | ||
| point: p1, | ||
| color: c1 | ||
| } | ||
|
|
||
| const pc2: PointAndColor = { | ||
| point: p2, | ||
| color: c2 | ||
| } | ||
|
|
||
| const pc3: PointAndColor = { | ||
| point: p3, | ||
| color: c3 | ||
| } | ||
|
|
||
| points.forEach((p: P5Lib.Vector, index: number): void => { | ||
| let c: Color = calculateColor(new P5Lib.Vector(p.x, p.y), pc1, pc2, pc3); | ||
| sketch.fill(c.color); | ||
| sketch.noStroke(); | ||
| sketch.ellipse(p.x, p.y, 3, 3); | ||
| let rate: P5Lib.Vector = pointRates[index]; | ||
| moveVector(p, rate); | ||
| }); | ||
|
|
||
| moveVector(p1, p1Rate); | ||
| moveVector(p2, p2Rate); | ||
| moveVector(p3, p3Rate); | ||
| console.log(sketch.frameRate()); | ||
| } | ||
|
|
||
| type PointAndColor = { | ||
| point: P5Lib.Vector, | ||
| color: Color | ||
| }; | ||
|
|
||
| function calculateColor(point: P5Lib.Vector, | ||
| p1: PointAndColor, | ||
| p2: PointAndColor, | ||
| p3: PointAndColor): Color { | ||
| const dist1: number = sketch.dist(point.x, point.y, p1.point.x, p1.point.y); | ||
| const dist2: number = sketch.dist(point.x, point.y, p2.point.x, p2.point.y); | ||
| const dist3: number = sketch.dist(point.x, point.y, p3.point.x, p3.point.y); | ||
| const maxDist: number = sketch.max(sketch.max(dist1, dist2), dist3); | ||
|
|
||
| const r: number = (p1.color.red * ((maxDist - dist1) / maxDist)) | ||
| + (p2.color.red * ((maxDist - dist2) / maxDist)) | ||
| + (p3.color.red * ((maxDist - dist3) / maxDist)); | ||
| const g: number = (p1.color.green * ((maxDist - dist1) / maxDist)) | ||
| + (p2.color.green * ((maxDist - dist2) / maxDist)) | ||
| + (p3.color.green * ((maxDist - dist3) / maxDist)); | ||
| const b: number = (p1.color.blue * ((maxDist - dist1) / maxDist)) | ||
| + (p2.color.blue * ((maxDist - dist2) / maxDist)) | ||
| + (p3.color.blue * ((maxDist - dist3) / maxDist)); | ||
|
|
||
| return new Color(sketch.color(r, g, b)); | ||
| } | ||
|
|
||
| function moveVector(v: P5Lib.Vector, vRate: P5Lib.Vector) { | ||
| let x: number = v.x; | ||
| let y: number = v.y; | ||
| x += vRate.x | ||
| y += vRate.y; | ||
|
|
||
| if (x > sketch.width) { | ||
| x = 0; | ||
| } else if (x < 0) { | ||
| x = sketch.width; | ||
| } | ||
|
|
||
| if (y > sketch.height) { | ||
| y = 0; | ||
| } else if (y < 0) { | ||
| y = sketch.height; | ||
| } | ||
|
|
||
| v.set(x, y); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* | ||
| * Copyright (C) 2024 Brittni Watkins. | ||
| * | ||
| * This file is a part of brittni and the polar bear's Generative Art Project Template, | ||
| * which is released under the GNU Affero General Public License, Version 3.0. | ||
| * You may not use this file except in compliance with the license. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. See LICENSE or go to | ||
| * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
| * See the GNU Affero General Public License for more details. | ||
| */ | ||
|
|
||
| import {sketch} from 'sketch'; | ||
| import {P5Lib, randomFloat, randomInt, SketchContext} from 'common'; | ||
|
|
||
| type ColorLine = { | ||
| p1: P5Lib.Vector, | ||
| p2: P5Lib.Vector, | ||
| h1: number, | ||
| h2: number, | ||
| numSections: number | ||
| }; | ||
|
|
||
| const lines: ColorLine[] = []; | ||
|
|
||
| sketch.setup = (): void => { | ||
| sketch.createCanvas(sketch.windowWidth, sketch.windowHeight); | ||
| SketchContext.initialize(sketch); | ||
|
|
||
| const count: number = randomInt(20, 500); | ||
| const spacing: number = sketch.width / count; | ||
| const start: number = spacing / 2.0; | ||
|
|
||
| for (let i: number = 0; i < count; i++) { | ||
| const x1: number = randomFloat(0, sketch.width); | ||
| const y1: number = (i * spacing) + start + randomFloat(-spacing, spacing); | ||
| const x2: number = randomFloat(0, sketch.width); | ||
| const y2: number = (i * spacing) + start + randomFloat(-spacing, spacing); | ||
| const h1: number = randomInt(0, 360); | ||
| const h2: number = randomInt(0, 360); | ||
| const s: number = randomInt(5, 20); | ||
| lines.push({ | ||
| p1: (new P5Lib.Vector(x1, y1)), | ||
| p2: (new P5Lib.Vector(x2, y2)), | ||
| h1: h1, | ||
| h2: h2, | ||
| numSections: s | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| sketch.draw = (): void => { | ||
| sketch.background(0); | ||
|
|
||
| for (let line of lines) { | ||
| displayLine(line); | ||
| } | ||
| } | ||
|
|
||
| function displayLine(line: ColorLine): void { | ||
| let start: P5Lib.Vector = line.p1.copy(); | ||
| let end: P5Lib.Vector; | ||
|
|
||
| for (let i: number = 1; i <= line.numSections; i++) { | ||
| let colorPercentage: number = (i - 1) * (1.0 / line.numSections); | ||
| let percentage: number = i * (1.0 / line.numSections); | ||
| end = P5Lib.Vector.lerp(line.p1, line.p2, percentage); | ||
| let currentHue: number = Math.floor(sketch.lerp(line.h1, line.h2, colorPercentage)); | ||
| sketch.stroke(sketch.color(`hsl(${currentHue}, 100%, 50%)`)); | ||
| sketch.line(start.x, start.y, end.x, end.y); | ||
| start.set(end); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.