Viewing Program

Program Data

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

Title	faking html
ID	4571365788008448
Created	7 days ago, 1735669278607
Updated	5 days ago, 1735781852579
Code	/* yes! we have a square! yall don't know how much went in to making that square fit the width of the screen remember: borders calculated in sizing math? / function error() { var m = "error: "; for(var i = 0; i < arguments.length; i++) { m += arguments[i]; } println(m); } var fonts = { normal: createFont("trebuchet MS"), italic: createFont("trebuchet MS Italic"), bold: createFont("trebuchet MS Bold"), mono: createFont("monospace"), monoBold: createFont("monospace Bold"), monoItalic: createFont("monospace Italic"), }; var DEFAULT_STYLE = { background: color(0, 0, 0, 20), border: color(51, 51, 51), borderWidth: 1, borderRadius: 0, padding: 20, margin: 0, fontSize: 18, fontFamily: fonts.normal, color: color(0), textAlign: "left", // left, center, right justifyContent: "left", // left, center, right alignItems: "top", // top, center, bottom arrangeChildren: "vertical", // horizontal, vertical // whether or not the element expands to fill its parent element // or shrinks to the minimum size that fits its contents spaceFillX: "fill", // fit, fill spaceFillY: "fit", display: "block", // block, hidden, none }; var CLASSES = { "container": { }, "heading": { fontFamily: fonts.normal }, "paragraph": { fontFamily: fonts.normal }, "button": { spaceFillX: "fit", }, }; var IDS = { "body": { spaceFillY: "fill", margin: 0, }, }; var doc = { x: 0, y: 0, width: width, height: height, parent: undefined, body: {}, style: (function() { var s = {}; for(var i in DEFAULT_STYLE) { s[i] = DEFAULT_STYLE[i]; } return s; })(), }; doc.calculateDocument = function() { this.body.calculateSize(); this.body.calculateChildPosition(); }; doc.draw = function() { this.body.drawChildren(); }; // don't touch. Used to ID elements var ELEMENT_COUNT = 0; var NAMED_IDS = {}; // Element constructor [ function Element(cssLabels) { ELEMENT_COUNT++; this.x = 0; this.y = 0; this.width = 0; this.height = 0; this.fitWidth = 0; this.fitHeight = 0; this.fillWidth = 0; this.fillHeight = 0; this.parent = undefined; this.children = []; this.classList = []; this.id = ""; this.elementId = ELEMENT_COUNT; this.style = {}; this.initializeStyles(cssLabels); } Element.prototype.initializeStyles = function(cssLabels) { // handle initial styling of the element. this.resetStyle(); if(cssLabels !== undefined) { var spl = cssLabels.split(" "); for(var j = 0; j < spl.length; j++) { // handle ids if(spl[j][0] === "#") { // remove the '#' character spl[j] = spl[j].slice(1, Infinity); this.id = spl[j]; // update this element's style sheet this.addStyle(IDS[spl[j]]); NAMED_IDS[spl[j]] = this; // handle class names } else { this.classListAdd(spl[j].slice(1, Infinity)); } } } }; Element.prototype.applyStyle = function(style) { for(var i in DEFAULT_STYLE) { if(style[i] !== undefined) { this.style[i] = style[i]; } else { this.style[i] = DEFAULT_STYLE[i]; } } }; Element.prototype.addStyle = function(style) { for(var i in style) { this.style[i] = style[i]; } }; Element.prototype.resetStyle = function() { for(var i in DEFAULT_STYLE) { this.style[i] = DEFAULT_STYLE[i]; } }; Element.prototype.appendChild = function(childElement) { childElement.parent = this; this.children.push(childElement); }; Element.prototype.classListAdd = function(className) { this.classList.push(className); this.addStyle(CLASSES[className]); }; // element sizing will 'waterfall' up the tree from the leaf nodes Element.prototype.calculateFillSize = function() { this.fillWidth = this.parent.width - max(this.parent.style.padding, this.style.margin); this.fillHeight = this.parent.height - max(this.parent.style.padding, this.style.margin); }; Element.prototype.calculateFitSize = function() { if(this.style.arrangeChildren === "vertical") { this.calculateFitSizeVertical(); // or, horizontal } else { this.calculateFitSizeHorizontal(); } }; Element.prototype.calculateFitSizeHorizontal = function() { this.fitWidth = 0; this.fitHeight = 0; if(this.children.length > 0) { // start with adding the margin/padding on the left and right to the element width. // whichever is bigger: child's margin or parent's padding this.fitWidth += max(this.padding, this.children[0].style.margin); this.fitWidth += max(this.padding, this.children[this.children.length - 1].style.margin); // add the widths of the children for(var i = 0; i < this.children.length; i++) { this.fitWidth += this.children[i].width; } // add the margins between children for(var i = 1; i < this.children.length; i++) { this.fitWidth += max(this.children[i - 1].style.margin, this.children[i].style.margin); } // find the tallest child, including max(child-margin, parent-padding) for(var i = 0; i < this.children.length; i++) { var childH = this.children[i].height + max(this.children[i].style.margin, this.style.padding)2; this.fitHeight = max(childH, this.fitHeight); } // or, no children elements } else { this.fitWidth = this.style.padding2; this.fitHeight = this.style.padding2; } }; Element.prototype.calculateFitSizeVertical = function() { this.fitWidth = 0; this.fitHeight = 0; if(this.children.length > 0) { // start with adding the margin/padding on the top and bottom to the element width. // whichever is bigger: child's margin or parent's padding this.fitHeight += max(this.style.padding, this.children[0].style.margin); this.fitHeight += max(this.style.padding, this.children[this.children.length - 1].style.margin); // add the heights of the children for(var i = 0; i < this.children.length; i++) { this.fitHeight += this.children[i].height; } // add the margins between children for(var i = 1; i < this.children.length; i++) { this.fitHeight += max(this.children[i - 1].style.margin, this.children[i].style.margin); } // find the widest child, including max(child-margin, parent-padding) for(var i = 0; i < this.children.length; i++) { var childW = this.children[i].width + max(this.children[i].style.margin, this.style.padding)2; this.fitWidth = max(childW, this.fitWidth); } // or, no children elements } else { this.fitWidth = this.style.padding2; this.fitHeight = this.style.padding2; } }; // element positioning waterfalls down once element sizing is fixed Element.prototype.calculatePosition = function() { var spacing = max(this.style.margin, this.parent.style.padding); this.height = this.fitHeight; this.width = this.fitWidth; if(this.style.spaceFillX === "fit") { if(this.style.justifyContent === "right") { this.x = this.parent.x + this.parent.width - (this.width + spacing); } if(this.style.justifyContent === "center") { this.x = this.parent.x + this.parent.width0.5 - this.width0.5; } else { this.x = this.parent.x + spacing; } } else { this.x = this.parent.x + spacing; this.width = this.parent.width - spacing2; } if(this.style.spaceFillY === "fill") { this.y = this.parent.y + spacing; this.height = this.parent.height - spacing2; } else { //println(this.fitHeight); if(this.style.alignItems === "bottom") { this.y = this.parent.y + this.parent.height - (this.height + spacing); } if(this.style.alignItems === "center") { this.y = this.parent.y + this.parent.height0.5 - this.height0.5; } else { this.y = this.parent.y + spacing; } } }; Element.prototype.calculateSize = function() { this.calculateFillSize(); for(var i = 0; i < this.children.length; i++) { this.children[i].calculateSize(); } this.calculateFitSize(); if(this.style.spaceFillX === "fit") { this.width = this.fitWidth; } else { this.width = this.fillWidth; } if(this.style.spaceFillY === "fill") { this.height = this.fillWidth; } else { this.height = this.fitWidth; } }; Element.prototype.calculateChildPosition = function() { //this.calculatePosition(); if(this.children.length > 0) { if(this.style.arrangeChildren === "horizontal") { for(var i = 0; i < this.children.length; i++) { } } else { var y = this.y + max(this.style.padding, this.children[0].style.margin); this.children[0].y = y; y += this.children[0].height; for(var i = 1; i < this.children.length; i++) { y += max(this.children[i - 1].style.margin, this.children[i].style.margin); this.children[i].y = y; y += this.children[i].height; } if(this.style.justifyContent === "center") { for(var i = 0; i < this.children.length; i++) { this.children[i].x = this.x + this.width0.5 - this.children[i].width*0.5; } } else if(this.style.justifyContent === "right") { for(var i = 0; i < this.children.length; i++) { this.children[i].x = this.x + this.width - (this.children[i].width + this.style.padding); } } else { for(var i = 0; i < this.children.length; i++) { this.children[i].x = this.x + this.style.padding; } } } for(var i = 0; i < this.children.length; i++) { this.children[i].calculateChildPosition(); } } }; Element.prototype.boxDraw = function() { fill(this.style.background); if(this.style.border === "none") { noStroke(); } else { stroke(this.style.border); strokeWeight(this.style.borderWidth); } rect(this.x, this.y, this.width, this.height, this.style.borderRadius); }; Element.prototype.draw = function() { this.boxDraw(); }; Element.prototype.drawChildren = function() { this.draw(); for(var i = 0; i < this.children.length; i++) { this.children[i].draw(); } }; // ] function Container(cssLabels) { Element.call(this, cssLabels); this.classListAdd("container"); } Container.prototype = Object.create(Element.prototype); function Heading(text, cssLabels) { Element.call(this, cssLabels); this.value = text; this.classListAdd("heading"); } Heading.prototype = Object.create(Element.prototype); Heading.prototype.calculateSize = function() { textSize(this.style.fontSize); //textFont(this.style.fontFamily); this.width = textWidth(this.value); this.height = textAscent() + textDescent(); }; Heading.prototype.draw = function() { this.boxDraw(); textSize(this.style.fontSize); //textFont(this.style.fontFamily); textAlign(LEFT, BOTTOM); fill(this.style.color); text(this.value, this.x, this.y + this.height); }; function Paragraph(text, cssLabels) { Element.call(this, cssLabels); this.classListAdd("paragraph"); this.value = text; this.words = text.split(" "); textSize(this.style.fontSize); for(var i = 0; i < this.words.length; i++) { this.words[i] = [this.words[i] + " ", textWidth(this.words[i] + " ")]; } } Paragraph.prototype = Object.create(Element.prototype); Paragraph.prototype.calculateSize = function() { textSize(this.style.fontSize); this.width = textWidth(this.value); this.height = textAscent() + textDescent(); }; Paragraph.prototype.draw = function() { this.boxDraw(); textSize(this.style.fontSize); //textFont(this.style.fontFamily); textAlign(LEFT, BOTTOM); fill(this.style.color); text(this.value, this.x, this.y + this.height); }; var body = new Element("#body"); body.parent = doc; doc.body = body; doc.body.appendChild(new Heading("Hello you 1")); doc.body.appendChild(new Heading("Hello you - 2")); doc.body.appendChild(new Heading("Hello you --- 3")); doc.body.appendChild(new Paragraph("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ipsum sit amet nunc volutpat semper a a urna. Nulla quis bibendum mauris. Vivamus lobortis tincidunt ex ac semper. Ut eros dolor, laoreet ut tincidunt in, molestie eget libero. In pellentesque sem vel accumsan dictum. Curabitur in tempus ipsum. Morbi feugiat viverra lorem vulputate mollis. Suspendisse et arcu in elit sagittis bibendum. Donec sed mauris congue, congue odio vel, sollicitudin felis. Aliquam erat volutpat. Nam at ipsum interdum, rutrum ante vel, congue ante.")); doc.calculateDocument(); doc.draw();
Folds	12,19,82,99,100,103,104,106,114,139,140,166,168,176,177,181,182,186,188,191,192,195,198,201,203,214,215,248,249,283,286,319,320,339,388,397,401,406,417,421,423,430,431,440
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLvPoLSPCAw
Votes	11
Spin-Offs	0
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Levi F.
Author Name	LeviCoder
Author ID	kaid_1152620490185361154142770
Author Profile Access	PUBLIC

Archive Data

Added	5 days ago, 1735856142591
Updated	5 days ago, 1735856142591
Source Deleted	unknown