Skip to main content
SimilarExport ZIP
100%

resizeable sketch in Processing (with notification of new size)

✓ Published0🌍 Public
RRandomEtc
Last edited Mar 28, 2012
Created on Mar 28, 2012

This example demonstrates how to create a resizable Processing sketch window that announces its new dimensions whenever the user changes its size. It shows a simple animation loop where the background color shifts with the frame count, updated continuously as the window is resized. The code uses Processing’s `size()`, `frame.setResizable(true)`, and overrides the `setBounds()` method from the underlying Java AWT `Frame` class to print the new width and height to the console. No external data source is involved; the rendering relies solely on Processing’s built-in drawing functions.

AI-generated description

Similar vizzes

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can dynamically respond to browser window resizing. It shows a green X shape that stretches and scales to fill the entire viewport, using an SVG canvas. The code uses CSS to size a chart container and then extracts its computed dimensions via `clientWidth` and `clientHeight`. A `redraw` function updates the SVG’s width and height attributes and redraws two intersecting lines. A window `resize` event listener triggers this function, ensuring the graphic always matches the current viewport size. It uses D3.js v5 for SVG element creation and manipulation.

VVijay2051
61% match
Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a full-window SVG that redraws an X shape whenever the browser viewport changes size. It uses a CSS-fixed `#chart` container to compute the available width and height via `clientWidth` and `clientHeight`, then updates the SVG’s `width` and `height` attributes inside a `redraw()` function. The code attaches a `window` `resize` event listener to call `redraw()` continuously, ensuring the two thick green lines always span the new dimensions. Built with D3 v5, it selects elements with `d3.select` and uses the `merge` method to update the line positions.

Aaksniks
61% match
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser window resizing. It uses a CSS-styled container that fills the viewport, and a redraw function extracts the container’s current clientWidth and clientHeight to update the SVG dimensions. Two green, semi-transparent lines are drawn across the full width and height to form an X, visually confirming the resized area. The code relies on window.addEventListener("resize", redraw) and D3’s selection.merge pattern to update the existing line elements efficiently.

Mmyskotima130
61% match
Loading thumbnail…

Responding to Resize

This example demonstrates a simple SVG visualization that responds to browser window resizing. It uses CSS to stretch a fixed-position chart container and JavaScript to redraw the graphic whenever the window dimensions change. The code reads the container’s `clientWidth` and `clientHeight`, sets the SVG’s width and height attributes accordingly, and draws two green diagonal lines forming an X using d3.select, `attr`, and line elements. A window `resize` event listener triggers the `redraw` function, ensuring the graphic always fills the viewport.

YYuShuenWang
60% match
Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can automatically respond to changes in the browser window size. It draws a green X spanning the full width and height of the viewport, with thick, semi-transparent strokes. The code uses CSS to make a chart container fill the screen, then relies on the `resize` event listener to trigger a redraw. Within the `redraw` function, D3 v5 selects the container and sets the SVG’s `width` and `height` attributes based on `clientWidth` and `clientHeight`, using a data-driven approach to update the lines’ coordinates.

AAustin Hill
60% match
Loading thumbnail…

Responding to Resize

This example demonstrates a full-window SVG chart that automatically redraws itself whenever the browser window is resized. The code uses CSS fixed positioning to make a container div fill the viewport, then reads its `clientWidth` and `clientHeight` properties inside a `redraw()` function. It sets the SVG’s `width` and `height` attributes accordingly and renders two diagonal green lines forming an X, using the data-join pattern with `svg.selectAll("line").data()` and the `merge()` method. A global `resize` event listener triggers the redraw on every window size change.

Ssetom
60% match
Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed
60% match
Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that fills the entire browser window and redraws its content whenever the viewport size changes. The page uses CSS to stretch a chart container to full screen, then d3.js extracts the container’s clientWidth and clientHeight on each resize event to update the SVG’s width and height attributes. Two diagonal lines form a green X marker whose endpoints adjust to the current dimensions, showcasing how to bind data containing the new coordinates and re-render with a selection merge. The code relies on d3.select, selection.attr, and window.addEventListener for the resize handling.

Ddok0086m
60% match