Gist 147496

100%

✓ Published0🌍 Public

Last edited Jul 15, 2009

Created on Jul 15, 2009

This example renders a Processing sketch inside an HTML canvas using the HAML template engine. The code defines a helper method that outputs the text “HELLO!” and embeds it directly into the Processing source code via a `%script` tag with the `application/processing` MIME type, targeting a canvas named “login” with fixed 100-pixel dimensions. The Processing script, generated dynamically from the Ruby helper, draws onto that canvas. It demonstrates how to mix server-side template logic with client-side Processing rendering in a single page.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 155911

The example demonstrates a user-creation form rendered with a dynamic Processing sketch embedded in the page header. The layout uses HAML with a Sinatra-style `form_for` helper, while the header includes a random selection between two Processing logo sketches via `partial "logos/logo_#{rand(2) + 3}"`. The Processing code initializes either an `x_axis` or `y_axis` variable, but no drawing or interaction is defined, so the sketch remains static and incomplete. The data source is the embedded Processing script, served through the Haml template’s partial mechanism.

XXXX

79% match

Loading thumbnail…

Gist 155909

A Processing.js sketch embedded in a page renders a single line of code, `int x_axis = 755;`, but the browser’s HTML parser moves the submit button outside its intended form and inserts a stray `0` into the form’s action. The example highlights a mismatch between the expected Processing canvas container and the actual DOM structure after script execution. It uses the `application/processing` script type with a `data-canvas_name` attribute, while the form submission markup relies on standard HTML `form` and `input` elements, revealing how script placement can disrupt document layout.

XXXX

76% match

Loading thumbnail…

Gist 155908

This example shows a form-based user creation interface where the browser’s HTML parser rearranges the submitted markup. The code uses a Processing.js script inside a `script` tag to define a canvas variable, but the actual rendered page moves the submit button outside the form and inserts a literal `0` inside the form element. The discrepancy arises from how the browser handles unclosed form tags and embedded scripts, resulting in a different DOM structure than the expected source. The form action points to `/users`, but the visible output contains no functional form controls.

XXXX

67% match

Loading thumbnail…

Gist 155450

This example demonstrates how a Ruby web application can dynamically render page fragments by combining HAML templates with a randomized helper method. It shows a structured layout where the `.foo` and `.bar` sections incorporate a partial template (`_my_header.html.haml`) and a form builder for user data. The helper `my_helper` generates a different partial path each time by appending a random integer (0, 1, or 2) to the string `"some/partial_"`. The code uses HAML’s partial rendering and the `form_for` helper from Rails’ form builder API, though it does not specify the actual data source or visual output.

XXXX

64% match

Loading thumbnail…

Gist e0d36dea72b5cd332eef9e4265715ff9

This generative sketch displays a cartoon face rendered through layered procedural drawing commands, with a wall of overlapping code text scrolling horizontally in the background. The sketch uses the Processing.js (p5.js) API to draw shapes like ellipses, arcs, triangles, and rectangles, while the foreground text repeatedly includes the literal substrings “ITPIsAwesomeWeLoveCodingtrain” and “Codingsohard,” suggesting a playful commentary on learning to code. The face alternates between static and animated states, with randomized cheek positions and a frame rate change, all triggered by a variable that switches between two drawing branches. The code also manipulates a global offset variable to create the continuous text slide.

CChelseaChenC

63% match

Loading thumbnail…

Gist 155982

This visualization demonstrates a web form interface built with Haml markup that creates a user account through a submit action. The code uses the Haml templating engine, embedded Ruby (ERB) for partial inclusion, and a form helper API that binds to a `@user` object. A JavaScript logo partial defines an integer variable `x` with a value of 755, though the visual output of this variable is not shown in the provided code. The example relies on standard HTML form submission rather than a visualization library, with the layout structured through nested Haml indentation.

XXXX

62% match

Loading thumbnail…

Untitled

This visualization demonstrates a simple HTML page that displays the text “Hello HTML!” in large, centered type. Built using plain HTML and CSS, it loads the p5.js library and a separate sketch file, although no p5.js drawing or CSV data loading is actively implemented in the displayed output. The example serves as a minimal starter template for integrating p5.js into a React-based project, with the main visual being a static styled message.

SSimon Hackbert

62% match

Loading thumbnail…

HTML Starter

This example displays a single HTML page that renders the text “Hello HTMfL” in large, centered type using inline CSS. It demonstrates a minimal web page structure with a `<script>` tag that logs “Hello JavaScript!” to the browser’s developer console. The page relies on standard HTML and JavaScript APIs, with no external libraries or data sources, serving as a bare-bones starting point for web visualization projects.

YYufeng Zhao

61% match