Gist 155909

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.

81% match

Gist 147496

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.

76% match

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.

75% match

Gist 155981

The example compares expected and actual HTML output for a form-based user creation interface. It uses a raw HTML script tag with a JavaScript variable declaration (`int x_axis = 755`), though the syntax is not valid JavaScript. The visualization highlights a structural discrepancy: the expected output places the submit button inside a `<form>` with a POST action to `/users`, while the actual output moves the button outside the form and adds a stray text node containing "2". No external libraries or data sources are used; the comparison relies solely on static markup inspection.

72% match

TestOpenProcessing

A small canvas sketch uses p5.js to simulate a bouncing ball driven by accelerometer data. The ball's velocity and position update continuously from the device's acceleration values, with damping applied on wall collisions to create a physics-like response. The code reads `accelerationX` and `accelerationY` each frame, integrates them into velocity, and applies bounce multipliers at the canvas edges. The sketch renders a simple black ellipse on a white 100x100 background, with the current width value displayed as text in the corner.

YYannael

Gist 055a86617685691db7632fcb10fb8bc8

This example demonstrates a simulated cross-site scripting (XSS) attack via remote file inclusion, visually rendering a PHP script’s output as an alert dialog that exposes `document.cookie`. The visualization uses a plain HTML page to embed the PHP snippet, with the code directly echoing a `<script>` tag that triggers the alert. It relies on the browser’s native JavaScript execution rather than external libraries, showing the raw mechanism of injecting client-side code through a server-side include. The rendering approach is minimal, presenting the source code and its resulting runtime behavior side by side.

PPeleke

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu

TestOpenProcessing

A small p5.js sketch simulates a bouncing ball on a 100×100 canvas. The ball’s motion is driven by the device’s accelerometer data, with acceleration values from `accelerationX` and `accelerationY` feeding velocity and position updates each frame. The ball rebounds off the canvas edges with a damping factor, and the current x-coordinate is displayed as text in the corner. The code uses the p5.js `setup`, `draw`, `createCanvas`, `ellipse`, and `background` functions, with no external data source beyond live sensor input.

YYannael