![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project-11-Composition
//section D
var myTurtle;
var step = 10; // each tick (segment) is a multiple of 10
var angle = 60; // the turtle almost always turns 60 degrees on its way
var snow = []; // an array of all snow particles
function setup() {
createCanvas(462, 400);
// initialize snow
for (var s = 0; s < 1500; s++){ // loop through snows
var snowPositionX = random(width); // the x position of the snow is
// random along the width of canvas
var snowPositionY = random(0, height);
snow[s] = makeSnow(snowPositionX, snowPositionY);
}
}
function draw() {
//gradient background
// draw the gradient background for the blue snowy sky
var top = color(188, 232, 231); // light blue
var bottom = color(35, 232, 227); // darker sky blue
Gradient(0, width, top, bottom);
myTurtle1 = makeTurtle(3, 75 * sqrt(3) + 4); // place the first turtle
myTurtle2 = makeTurtle(3, 150 * sqrt(3) + 4); // place the second turtle
myTurtle3 = makeTurtle(3, 225 * sqrt(3) + 4); // place the second turtle
turtleX = 3; // keep track of turtle's x position
// while the distance between turtle1 and the end of canvas is greater
// than 0, keep drawing the pattern
while (myTurtle1.x < width) {
turtleX = turtleX + 320; //disposition of each Sierpinski tri. is 320
myTurtle1.penDown(); // snowt Sierpinski Triangle
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.right(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.forward(step);
myTurtle1.left(angle);
myTurtle1.penUp(); // end Sierpinski Triangle
}
while (myTurtle2.x < width) {
turtleX = turtleX + 320;
myTurtle2.penDown(); // snowt Sierpinski Triangle
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.right(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.forward(step);
myTurtle2.left(angle);
myTurtle2.penUp(); // end Sierpinski Triangle
}
while (myTurtle3.x < width) {
turtleX = turtleX + 320;
myTurtle3.penDown(); // snowt Sierpinski Triangle
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.right(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.forward(step);
myTurtle3.left(angle);
myTurtle3.penUp(); // end Sierpinski Triangle
}
//SNOW
animateSnow();
hideSnow();
addSnow();
}
//BACKGROUND (SKY GRADIENT)
function Gradient (a, b, top, bottom) {
// top to bottom gradient (background)
for (var i = a; i <= height; i++) {
var mappedC = map(i, a, a+b, 0, 1);
var c = lerpColor(top, bottom, mappedC);
stroke(c);
strokeWeight(2);
line(a, i, a+b, i);
}
}
//SNOW FLAKES FUNCTIONS
function drawSnow() {
noStroke();
// make snows seem like they're shining by manipulating transparency
var transparency = random(20, 100);
fill(255, transparency);
ellipse(this.x, this.y, 4, 4);
}
function animateSnow() {
for (var s = 0; s < snow.length; s++) {
snow[s].move();
snow[s].draw();
}
}
function hideSnow() {
// make the snow particles that are actually within the canvas to stay
// if not, hide them
var snowOnCanvas = [];
for (var s = 0; s < snow.length; s++){ // go through all snow
// if the snow is on the canvas
if (0 < snow[s].x < width) {
snowOnCanvas.push(snow[s]); // draw the snows that are on the
// canvas
}
}
snow = snowOnCanvas; // update the snows to the ones that are actually
// on the canvas
}
function addSnow() {
var randomValSnow = 0.01; // a really small chance of snows randomly
// being added/generated
if (random(0,1) < randomValSnow) { // because it is not that likely for a
// randomly chosen value to be less than
// 0.0001, this will be a rare occasion
var snowPositionX = random(0, width);
var snowPositionY = random(0, height);
snow.push(makeSnow(snowPositionX, snowPositionY)); // generate new
// snows along
// the canvas
}
}
function snowMove() {
//move snows by updating x coordinate
this.x += this.speed;
}
function makeSnow(snowPositionX, snowPositionY) {
var snow = {x: snowPositionX,
y: snowPositionY,
speed: -random(0, .005),
move: snowMove,
draw: drawSnow}
return snow;
}
function turtleLeft(d) {
this.angle -= d;
}
function turtleRight(d) {
this.angle += d;
}
function turtleForward(p) {
var rad = radians(this.angle);
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}
function turtleBack(p) {
this.forward(-p);
}
function turtlePenDown() {
this.penIsDown = true;
}
function turtlePenUp() {
this.penIsDown = false;
}
function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
strokeJoin(MITER);
strokeCap(PROJECT);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}
function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}
function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}
function turtleSetColor(c) {
this.color = c;
}
function turtleSetWeight(w) {
this.weight = w;
}
function turtleFace(angle) {
this.angle = angle;
}
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(255),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
function turtleLeft(d) {
this.angle -= d;
}
function turtleRight(d) {
this.angle += d;
}
function turtleForward(p) {
var rad = radians(this.angle);
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}
function turtleBack(p) {
this.forward(-p);
}
function turtlePenDown() {
this.penIsDown = true;
}
function turtlePenUp() {
this.penIsDown = false;
}
function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
strokeJoin(MITER);
strokeCap(PROJECT);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}
function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}
function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}
function turtleSetColor(c) {
this.color = c;
}
function turtleSetWeight(w) {
this.weight = w;
}
function turtleFace(angle) {
this.angle = angle;
}
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(120, 180, random(180, 255)),
weight: 3,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
For this project, I used a turtle to draw a different form. I used three different turtles that generate lines of Sierpinski triangles. These geometries formed by turtles come together to suggest at a crystal, snowflake-like form. By adding dynamic elements to the colors of the background and the stroke of turtles, as well as adding sparking snowflakes, I was able to create an interesting winter themed pattern. I used this opportunity to apply mathematics to generate natural forms and to create a wallpaper inspired by the movie Frozen, expanding on the project that we had before.
