Viewing Program

Program Data

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

Title	Fractal Tree
ID	5205909638512640
Created	6 years ago, 1537930852147
Updated	6 years ago, 1538253813017
Code	//This project was made for a challenge /** GUI Stuff / var config = { slider: { w: 150, strokeWeight: 2, value: 0, thumb: { r: 12 }, fill: { primary: color(0, 0, 0), secondary: color(200), disabled: color(200) } }, toggle: { w: 40, h: 25, r: "auto", strokeWeight: 2, thumb: { r: 10 }, fill: { primary: color(0), secondary: color(200), disabled: color(200) } } }; //Gui Element Object { var GuiElement = function(label, x, y, w, h, func) { this.x = x; this.y = y; this.x2 = x + w; this.y2 = y + h; this.w = w; this.h = h; this.label = label; this.function = func; this.selected = false; this.transition = 0; }; GuiElement.prototype.updateCheck = function() { var values = ''; for (var key in this) { if (this.hasOwnProperty(key) && typeof this[key] !== 'function' && this[key] !== this.info) { values += this[key]; } } if (values !== this.info) { this.init(); this.info = values; return true; } }; GuiElement.prototype.mouseOver = function() { return this.disabled ? false : mouseX >= this.x && mouseX <= this.x2 && mouseY >= this.y && mouseY <= this.y2; }; GuiElement.prototype.mousePressed = function() { if (this.mouseOver() && !this.disabled) { this.selected = true; } }; GuiElement.prototype.mouseReleased = function() { if (this.mouseOver() && this.selected && !this.disabled) { this.function(); } this.selected = false; }; //} //Slider Object { var Slider = function(x, y, params) { params.w = params.w \|\| config.slider.w; params.h = params.h \|\| config.slider.thumb.r 2; GuiElement.call(this, params.label, x, y, params.w, params.h, params.function); this.y2 = this.y + this.h / 2; this.init = function() { this.params = params; this.disabled = this.disabled \|\| this.params.disabled \|\| false; this.vertical = this.vertical \|\| this.params.vertical \|\| false; this.min = params.min; this.max = params.max; this.value = this.value \|\| params.value \|\| 0; if (!params.fill) { params.fill = false; } if (!params.thumb) { params.thumb = false; } if (!this.disabled) { this.primary = this.params.fill.primary \|\| (params.inverted ? color(255) : config.slider.fill.primary); this.secondary = this.params.fill.secondary \|\| config.slider.fill.secondary; this.stroke = this.params.stroke \|\| (params.inverted ? config.slider.fill.primary : lerpColor(this.primary, color(0), 0.1)); } else { this.primary = config.slider.fill.disabled; this.secondary = config.slider.fill.disabled; this.stroke = lerpColor(this.primary, color(0), 0.1); } var r = this.params.thumb.r \|\| config.slider.thumb.r; this.thumb = { x: !this.vertical ? map(this.value, this.min, this.max, this.x + r, this.x2 - r) : this.x + r + 0.5, y: !this.vertical ? this.y + r : map(this.value, this.min, this.max, this.y + this.w - r + 2.5, this.y - 2.5), r: r }; }; this.init(); this.function(); }; Slider.prototype = Object.create(GuiElement.prototype); Slider.prototype.draw = function() { if (!this.selected) { this.animate(); this.outerShadow(); } strokeWeight(config.slider.strokeWeight); stroke(this.secondary); if (!this.vertical) { line(this.x, this.y2, this.x2, this.y2); } else { line(this.x + this.thumb.r, this.y, this.x + this.thumb.r, this.y + this.w); } strokeWeight(config.slider.strokeWeight); stroke(this.stroke); fill(this.primary); ellipse(this.thumb.x, this.thumb.y, this.thumb.r * 2, this.thumb.r * 2); this.innerShadow(); strokeWeight(2); noStroke(); noFill(); this.updateCheck(); }; Slider.prototype.animate = function() { if (this.mouseOver()) { this.transition += 0.08; cursor("POINTER"); } else { this.transition -= 0.1; if (this.transition > 0.5) { cursor(); } } this.transition = constrain(this.transition, 0, 1); }; Slider.prototype.innerShadow = function() { if (this.selected && !this.disabled) { stroke(0, 0, 0, 5); noFill(); for (var i = 1; i < 10; i++) { strokeWeight(i); ellipse(this.thumb.x, this.thumb.y, this.thumb.r * 2, this.thumb.r * 2); } } }; Slider.prototype.outerShadow = function() { stroke(0, 0, 0, 10); noFill(); for (var i = 1; i < (this.raised ? 10 : this.transition * 10); i++) { strokeWeight(i); ellipse(this.thumb.x, this.thumb.y, this.thumb.r * 2, this.thumb.r * 2); } }; Slider.prototype.mouseOver = function() { return this.disabled ? false : dist(mouseX, mouseY, this.thumb.x, this.thumb.y) < this.thumb.r; }; Slider.prototype.mouseReleased = function() { this.selected = false; }; Slider.prototype.mouseDragged = function() { if (this.selected) { if (!this.vertical) { this.thumb.x = constrain(mouseX, this.x + this.thumb.r - 2.5, this.x2 - this.thumb.r + 2.5); this.value = map(this.thumb.x, this.x + this.thumb.r - 2.5, this.x2 - this.thumb.r + 2.5, this.min, this.max); } else { this.thumb.y = constrain(mouseY, this.y - 2.5 + this.thumb.r, this.y + this.w - this.thumb.r + 2.5); this.value = map(this.thumb.y, this.y + this.w - this.thumb.r + 2.5, this.y - 2.5, this.min, this.max); } this.function(); } }; //} //Toggle Object { var Toggle = function(x, y, params) { params.w = params.w \|\| config.toggle.w; params.h = params.h \|\| config.toggle.h; GuiElement.call(this, params.label, x, y, params.w, params.h, params.function); this.toggled = params.toggled && params.toggled; this.init = function() { this.params = params; this.transition2 = this.transition2 \|\| (this.toggled ? 1 : 0); this.r = config.toggle.r === "auto" ? this.h : config.toggle.r; if (!params.fill) { params.fill = false; } if (!params.thumb) { params.thumb = false; } if (!this.disabled) { this.primary = this.params.fill.primary \|\| (params.inverted ? color(255) : config.toggle.fill.primary); this.secondary = this.params.fill.secondary \|\| config.toggle.fill.secondary; this.stroke = this.params.stroke \|\| (params.inverted ? config.toggle.fill.primary : lerpColor(this.primary, color(0), 0.1)); } else { this.primary = config.toggle.fill.disabled; this.secondary = config.toggle.fill.disabled; this.stroke = lerpColor(this.primary, color(0), 0.1); } var r = this.params.thumb.r \|\| config.toggle.thumb.r; this.thumb = { x: map(this.transition2, 0, 1, this.x + r + 2.75, this.x2 - r - 2.75), y: this.y + r + 2.75, r: r }; }; this.init(); }; Toggle.prototype = Object.create(GuiElement.prototype); Toggle.prototype.draw = function() { this.animate(); strokeWeight(config.toggle.strokeWeight); stroke(this.secondary); fill(255); rectMode(LEFT); rect(this.x, this.y, this.w, this.h, this.r); fill(this.secondary); rect(this.x, this.y, lerp(this.thumb.r * 2.25, this.w, this.transition2), this.h, this.r); this.outerShadow(); strokeWeight(config.toggle.strokeWeight); stroke(this.stroke); fill(this.primary); ellipse(this.thumb.x, this.thumb.y, this.thumb.r * 2, this.thumb.r * 2); this.innerShadow(); this.updateCheck(); }; Toggle.prototype.animate = function() { if (this.toggled) { this.transition2 += 0.2; } else { this.transition2 -= 0.2; } if (this.mouseOver()) { this.transition += 0.1; cursor("POINTER"); } else { this.transition -= 0.1; if (this.transition > 0.5) { cursor(); } } this.transition = constrain(this.transition, 0, 1); this.transition2 = constrain(this.transition2, 0, 1); }; Toggle.prototype.innerShadow = function() { if (this.selected && !this.disabled) { stroke(0, 0, 0, 5); noFill(); for (var i = 1; i < 10; i++) { strokeWeight(i); ellipse(this.thumb.x, this.thumb.y, this.thumb.r * 2, this.thumb.r * 2); } } }; Toggle.prototype.outerShadow = function() { stroke(0, 0, 0, 10); noFill(); for (var i = 1; i < this.transition * 10; i++) { strokeWeight(i); ellipse(this.thumb.x, this.thumb.y, this.thumb.r * 2, this.thumb.r * 2); } }; Toggle.prototype.mouseReleased = function() { if (this.mouseOver() && this.selected && !this.disabled) { this.function(); this.toggled = this.toggled ? false : true; } this.selected = false; }; //} /** Actual Tree Stuff / var theta = 60; var branches = 120; var animated = false; var colored = false; var branch = function(height) { height = 0.66; if (height > 2) { if (colored) { colorMode(HSB); stroke(height * 10, 255, 255); } else { stroke(0); } colorMode(RGB); strokeWeight(height / 10); pushMatrix(); rotate(theta); line(0, 0, 0, -height); translate(0, -height); branch(height); popMatrix(); pushMatrix(); rotate(-theta); line(0, 0, 0, -height); translate(0, -height); branch(height); popMatrix(); } }; /** Making the GUI Components / var thetaSlider = new Slider(25, 360, { w: 150, min: 0, max: 180, value: theta, inverted: true, function: function() { theta = this.value; } }); var animateToggle = new Toggle(345, 337.5, { function: function() { animated = animated ? false : true; thetaSlider.disabled = thetaSlider.disabled ? false : true; } }); var colorToggle = new Toggle(345, 365, { function: function() { colored = colored ? false : true; } }); /* Drawing all the Stuff / translate(width / 2, height / 2); draw = function() { if (animated) { theta = sin(frameCount) 100; } pushMatrix(); background(200); strokeCap(SQUARE); branch(branches); strokeWeight(20); if (colored) { stroke(255, 0, 0); } else { stroke(0); } line(0, branches, 0, 0); popMatrix(); stroke(0, 0, 0, 0); fill(255, 255, 255, 100); rectMode(CENTER); rect(0, 162.5, width, 75); pushMatrix(); resetMatrix(); fill(0, 0, 0); textAlign(CENTER, CENTER); text("THETA", 25 + thetaSlider.w / 2, 345); textAlign(RIGHT, CENTER); text("ANIMATE", height - 60, 350); text("COLORED", height - 60, 376); thetaSlider.draw(); animateToggle.draw(); colorToggle.draw(); popMatrix(); if(animateToggle.toggled) { thetaSlider.value = abs(sin(frameCount) * 100); } }; /** Event Handling */ mousePressed = function() { thetaSlider.mousePressed(); animateToggle.mousePressed(); colorToggle.mousePressed(); }; mouseReleased = function() { thetaSlider.mouseReleased(); animateToggle.mouseReleased(); colorToggle.mouseReleased(); }; mouseDragged = function() { thetaSlider.mouseDragged(); animateToggle.mouseDragged(); colorToggle.mouseDragged(); };
Folds	3,31,32,72,73,182,183,278,328,332,374,378,379,383,384,388
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPLV9NefCQw
Votes	72
Spin-Offs	1
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Aliquis
Author Name	bhavjitChauhan
Author ID	kaid_376749826184384230772276
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1709884404375
Updated	10 months ago, 1709884404375
Source Deleted	unknown