Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Cat in a storm (Animated)
ID	5165045920251904
Created	5 years ago, 1601989707196
Updated	5 years ago, 1605070117309
Code	/* Cat in a storm (CAnTober - Tuesday, Week 1) Gray Wolf, October 2020 Having fun with: - bezier \| bezierVertex - Masking - Slanted Rain system with puddles/spashes - Refactored my previous fractal Lightning system to use arrays for the forks and fading out effect for better display Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/computer-programming/gray-wolf/4876588413698048 Graphic/animation based of: https://www.pinterest.com.au/pin/AU3qos4cUrsEU6NZhJZEvyDyMBbqL-9omAExfDiGf7n3PQyC-j7FEu4/?nic_v2=1a1wPl432 / angleMode = "degrees"; //Lightning object var Lightning = function(config) { this.min = config.min \|\| width/6; this.max = config.max \|\| width-width/6; this.y = config.y \|\| 0; this.length = config.length \|\| ~~(height / 11); this.depth = config.depth \|\| ~~(height / 32); this.weight = config.weight \|\| 5; this.forkColor = config.forkColor \|\| color(255); this.flashColor = config.flashColor \|\| color(200); this.angleRange = config.angleRange \|\| 60; this.arr = []; //Recursive function for displaying the lightning forks this.fork = function(length, depth, weight, px, py) { var angle = random(-this.angleRange, this.angleRange); depth--; //calculate the next x/y coordinate for the fork var x = px + cos(angle - 90) length; var y = py + sin(angle + 90) * length; //add fork to the start of the array this.arr.unshift({ weight: weight, stroke: this.forkColor, px: px, py: py, x: x, y: y, length: length, opacity: 255, angle: angle }); //Only generate more forks for given depth if (depth >= 0) { this.fork(length, depth, weight0.8, x, y); //Randomly add a new fork if(random() < 0.15) { angle = random(-this.angleRange, this.angleRange); this.fork(length0.85, depth, weight0.5, x, y); } } }; this.draw = function() { for(var i = this.arr.length - 1; i >= 0; i--) { strokeWeight(this.arr[i].weight); stroke(this.arr[i].stroke, this.arr[i].opacity); line(this.arr[i].px, this.arr[i].py+this.arr[i].weight, this.arr[i].x, this.arr[i].y); this.arr[i].opacity-=10; if(this.arr[i].opacity <= 0) { this.arr.splice(i, 1); } } }; //Generate the lighting this.generate = function() { this.fork( this.length, //length of each strike this.depth, //how deep you want to recurse this.weight, //starting weight of the strike random(this.min, this.max), //starting (previous) x pos this.y //starting (previous) y pos ); }; }; //used for the texture of the cat var pattern = function(px, py, w, h, r, g, b, xf, yf, patch) { background(0, 0); var xoff = 0.0; for(var x = px; x < px + w; x++) { var yoff = 0.0; for(var y = py; y < py + h; y++) { var bright = map(noise(xoff, yoff), 0, 1, 0, 80); if(bright < patch) { //stroke(r, g, b); stroke(50, 50); } else { stroke(bright + r, bright + g, bright + b); } point(x, y); yoff += yf; } xoff += xf; } }; //shadow of the cat when the lightning strikes var catShadow = function(opacity) { noStroke(); fill(0, 0, 0, opacity); beginShape(); vertex(280, 518); bezierVertex(283, 500, 284, 482, 286, 464); bezierVertex(288, 448, 292, 442, 295, 430); bezierVertex(297, 407, 297, 393, 296, 382); bezierVertex(274, 378, 244, 371, 226, 358); bezierVertex(211, 349, 198, 331, 196, 317); bezierVertex(194, 317, 192, 318, 188, 321); bezierVertex(188, 294, 202, 265, 231, 249); bezierVertex(263, 234, 295, 232, 337, 234); bezierVertex(371, 237, 388, 254, 397, 267); bezierVertex(405, 281, 410, 290, 410, 302); bezierVertex(403, 302, 399, 300, 395, 298); bezierVertex(389, 315, 385, 338, 372, 353); bezierVertex(356, 367, 336, 375, 311, 382); bezierVertex(308, 398, 308, 406, 308, 418); bezierVertex(308, 437, 312, 450, 315, 463); bezierVertex(318, 473, 318, 486, 318, 510); bezierVertex(324, 494, 332, 478, 348, 464); bezierVertex(361, 456, 381, 452, 393, 457); bezierVertex(400, 463, 400, 472, 394, 476); bezierVertex(384, 474, 370, 474, 362, 477); bezierVertex(348, 482, 338, 492, 334, 499); bezierVertex(331, 505, 328, 510, 328, 517); vertex(280, 518); endShape(CLOSE); }; //the cat / jshint ignore: start / var Cat = function() { this.get = function() { background(0); //body stroke(0, 0, 0); strokeWeight(3); fill(227, 228, 232); beginShape(); vertex(280, 518); bezierVertex(283, 500, 284, 482, 286, 464); bezierVertex(288, 448, 292, 442, 295, 430); bezierVertex(297, 407, 297, 393, 296, 382); bezierVertex(274, 378, 244, 371, 226, 358); bezierVertex(211, 349, 198, 331, 196, 317); bezierVertex(194, 317, 192, 318, 188, 321); bezierVertex(188, 294, 202, 265, 231, 249); bezierVertex(263, 234, 295, 232, 337, 234); bezierVertex(371, 237, 388, 254, 397, 267); bezierVertex(405, 281, 410, 290, 410, 302); bezierVertex(403, 302, 399, 300, 395, 298); bezierVertex(389, 315, 385, 338, 372, 353); bezierVertex(356, 367, 336, 375, 311, 382); bezierVertex(308, 398, 308, 406, 308, 418); bezierVertex(308, 437, 312, 450, 315, 463); bezierVertex(318, 473, 318, 486, 318, 510); bezierVertex(324, 494, 332, 478, 348, 464); bezierVertex(361, 456, 381, 452, 393, 457); bezierVertex(400, 463, 400, 472, 394, 476); bezierVertex(384, 474, 370, 474, 362, 477); bezierVertex(348, 482, 338, 492, 334, 499); bezierVertex(331, 505, 328, 510, 328, 517); vertex(280, 518); endShape(CLOSE); var catShape = get(184, 227, 230, 290); pattern(184, 227, 230, 290, 219, 124, 51, 0.035, 0.16, 30); var catImage = get(184, 227, 230, 290); catImage.mask(catShape); background(0, 0); image(catImage, 184, 227); //Eyes stroke(0, 150); fill(255, 255, 255); beginShape(); vertex(249, 256); bezierVertex(283, 257, 294, 277, 298, 301); bezierVertex(299, 323, 296, 341, 264, 349); bezierVertex(226, 352, 204, 335, 203, 310); bezierVertex(201, 284, 216, 262, 249, 256); endShape(CLOSE); beginShape(); vertex(346, 246); bezierVertex(369, 248, 392, 271, 390, 293); bezierVertex(387, 317, 377, 335, 350, 339); bezierVertex(322, 340, 306, 329, 301, 307); bezierVertex(298, 290, 300, 278, 306, 268); bezierVertex(313, 256, 327, 247, 346, 246); endShape(CLOSE); //eye balls noStroke(); fill(0); ellipse(286, 300, 10, 10); ellipse(310, 298, 10, 10); //nose fill(0, 200); //ellipse(303, 327, 6, 8); //hair stroke(0, 150); strokeWeight(2); noFill(); bezier(270, 238, 279, 242, 284, 248, 286, 256); bezier(296, 235, 295, 239, 295, 245, 295, 251); bezier(313, 235, 308, 240, 307, 248, 306, 255); //wiskers strokeWeight(1); //right cheek bezier(371, 353, 376, 352, 380, 359, 384, 366); bezier(362, 359, 369, 363, 371, 370, 373, 378); bezier(355, 365, 360, 370, 362, 379, 362, 386); //left cheek bezier(222, 356, 214, 365, 211, 370, 209, 379); bezier(230, 361, 222, 370, 218, 375, 218, 384); bezier(236, 365, 231, 373, 229, 378, 228, 383); //tail stripes stroke(40, 40, 40, 150); strokeWeight(1); noFill(); bezier(379, 456, 373, 460, 372, 462, 370, 474); bezier(364, 458, 359, 460, 359, 463, 357, 479); bezier(348, 465, 343, 471, 343, 474, 345, 486); bezier(334, 479, 334, 480, 334, 484, 337, 493); bezier(328, 489, 327, 491, 327, 495, 330, 505); //return get(0, 0, width, height); return get(184, 227, 230, 290); }; this.img = this.get(); this.draw = function() { image(this.img, 184, 227); }; }; //rain drop object var Drop = function(config) { this.reset(config); }; Drop.prototype.reset = function(config) { this.x = config.x \|\| 0; this.y = config.y \|\| 0; this.speed = config.speed \|\| 5; this.length = config.length \|\| 10; this.angle = config.angle \|\| 50; this.zone = config.zone \|\| height; this.color = config.color \|\| color(random(100, 200)); this.thickness = config.thickness \|\| random(1, 3); //Calculations this.px = -this.length cos(this.angle); this.py = -this.length * sin(this.angle); this.vx = this.speed * cos(this.angle); this.vy = this.speed * sin(this.angle); }; Drop.prototype.move = function() { this.x+= this.vx; this.y+= this.vy; }; Drop.prototype.draw = function() { noFill(); stroke(this.color); strokeWeight(this.thickness); line(this.x, this.y, this.x - this.px, this.y - this.py); }; Drop.prototype.run = function() { this.move(); this.draw(); }; //the rain var RainSystem = function(config) { this.rain = []; this.puddles = []; this.splashes = []; this.d = config.d \|\| { x: { min: -300, max: width - 10 }, y: { min: -200, max: 0 }, speed: { min: 20, max: 40 }, length: { min: 10, max: 40 }, angle: { min: 60, max: 90 }, zone: { min: 520, max: 610 } }; this.get = function() { return { x: random(this.d.x.min, this.d.x.max), y: random(this.d.y.min, this.d.y.max), speed: random(this.d.speed.min, this.d.speed.max), length: random(this.d.length.min, this.d.length.max), angle: ~~random(this.d.angle.min, this.d.angle.max), zone: ~~random(this.d.zone.min, this.d.zone.max) }; }; this.init = function() { for(var i = 0; i < config.drops; i++) { this.rain.push( new Drop(this.get()) ); } }; this.init(); this.run = function() { //run each rain drop for(var i = 0; i < this.rain.length; i++) { var drop = this.rain[i]; drop.run(); //if drop reaches the bottom of the screen then reset it if(drop.y > height) { drop.reset(this.get()); } else if(drop.y > drop.zone) { this.puddles.push({ x: drop.x, y: drop.y, color: drop.color, w: ~~random(20, 30), opacity: ~~random(150, 240) }); this.splashes.push({ x: drop.x + drop.vx * 0.5, y: drop.y - drop.vy * 0.5, vx: drop.vx * 0.2, vy: -drop.vy * 0.2, color: drop.color, w: ~~random(5, 8), opacity: ~~random(150, 240), gravity: 0.5 }); drop.reset(this.get()); } } //display the puddles noStroke(); for(var i = this.puddles.length - 1; i >= 0; i--) { var puddle = this.puddles[i]; fill(puddle.color, puddle.opacity); ellipse(puddle.x, puddle.y, puddle.w, puddle.w * 0.3); puddle.opacity-= 5; if(puddle.opacity <= 0) { this.puddles.splice(i, 1); } } for(var i = this.splashes.length - 1; i >= 0; i--) { var splash = this.splashes[i]; fill(splash.color, splash.opacity); splash.x+= splash.vx; splash.y+= splash.gravity; ellipse(splash.x, splash.y, splash.w, splash.w); splash.opacity-= 25; if(splash.opacity <= 0) { this.splashes.splice(i, 1); } } }; }; var cat = new Cat(); var rainSystem = new RainSystem({ drops: 150 }); var lightning = new Lightning({}); var opacity = 0; draw = function() { background(68, 69, 69); if(random() < 0.01) { background(lightning.flashColor); opacity = 240; lightning.generate(); } opacity = constrain(opacity - 3, 0, 255); lightning.draw(); cat.draw(); if(opacity > 0) { catShadow(opacity); } //ground stroke(50, 50, 50, 100); strokeWeight(2); fill(87, 89, 89); rect(0, 516, width, 85); rainSystem.run(); };
Folds	22,91,94,114,117,146,151,256,258,260,264,266,267,282,283,286,287,292,293,296,299,405,409,411
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgM26z7KWCQw
Votes	223
Spin-Offs	4
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739376070972
Updated	10 months ago, 1739376078736
Source Deleted	unknown