Eliminating Stroke Processing: Strategies For Efficient Data Handling

Stroke processing is a crucial aspect of computer graphics, enabling the rendering of lines and borders around shapes. However, in certain scenarios, you may want to disable stroke processing to achieve specific visual effects or simplify the rendering process. This can be achieved using the noStroke() function, which disables the stroke for lines, points, and shape outlines. It's important to note that combining noStroke() with noFill() will result in nothing being drawn on the screen for those shapes. The noStroke() function provides flexibility in controlling the appearance of graphical elements, allowing for more intricate designs and customization.

Use noStroke() command

The noStroke() function is used to remove the outline or stroke around shapes. By default, a black outline is set for shapes. The noStroke() function is an inbuilt function in p5.js that does not accept any parameters. When used, it disables the possibility of drawing strokes or fills of any kind for a shape.

CreateCanvas(400, 400);

// Shape defined just below will not have any outline

// Fill light-green color to shape

Fill('lightgreen');

Rect(20, 20, 160, 160);

In the above code, a canvas of size 400x400 is created. Then, a rectangle is drawn with a light green fill and no outline, achieved by using the noStroke() function.

It is important to note that the noStroke() function only removes the outline of a shape and does not affect the fill color. If both the noStroke() and noFill() functions are called, nothing will be drawn to the screen.

Size(400, 400);

NoStroke();

Rect(120, 80, 220, 220);

In this code, a canvas of size 400x400 is created, and the noStroke() function is used to disable the drawing of the stroke. Then, a rectangle is drawn with no outline.

The noStroke() function is a powerful tool that allows you to control the appearance of shapes in your code. It is important to understand its behaviour to create the desired output.

Use noFill() command

The noFill() command in Processing is used to disable the fill inside shapes. In other words, it turns off the colour or pattern that fills a shape. When you use noFill(), any shapes drawn after that command will have no fill. This means they will appear hollow, with only their outline or stroke visible.

Here's an example code snippet to illustrate this:

Ellipse(100, 100, 200, 200);

NoFill();

Ellipse(120, 120, 200, 250);

In this code, the first ellipse will be drawn normally, with both a stroke and a fill. However, the second ellipse, which is drawn after the noFill() command, will only have a stroke and no fill. So, it will appear as a hollow circle.

It's important to note that noFill() only affects shapes drawn after the command is called. If you want to remove the fill from a shape that has already been drawn, you need to use the noFill() command before drawing that specific shape.

Additionally, the noFill() command can be used together with noStroke(). When both of these commands are used, nothing will be drawn to the screen for shapes created after the commands are called. This is because noFill() disables the fill colour, and noStroke() disables the outline or border. So, when used together, they prevent any visual representation of the shape.

Here's an example to demonstrate this:

NoStroke();

NoFill();

Rect(100, 50, 200, 100);

In this code, the rectangle will not be visible on the screen because both the fill and stroke have been disabled.

To restore the fill for subsequent shapes, you can use the fill() command after calling noFill(). This will enable the fill again, allowing you to specify a colour or pattern for the interior of your shapes.

Use pushStyle() and popStyle()

The pushStyle() and popStyle() functions can be used to get rid of stroke processing. These functions allow you to change the style settings and later return to the previous settings.

The pushStyle() function saves the current style settings, and popStyle() restores the prior settings. They are always used together and can be embedded to provide more control over the style settings. When a new style is started with pushStyle(), it builds on the current style information.

For example, in the code snippet below, the left circle is drawn with the default style settings. The pushStyle() function is then used to start a new style with a thicker stroke weight and a yellow fill color. The middle circle is drawn with these new style settings. The popStyle() function is then used to restore the original style settings, and the right circle is drawn with the default style.

Size(400, 400);

Ellipse(0, 200, 132, 132); // Left circle

PushStyle(); // Start a new style

StrokeWeight(40);

Fill(204, 153, 0);

Ellipse(200, 200, 132, 132); // Middle circle

PopStyle(); // Restore original style

Ellipse(400, 200, 132, 132); // Right circle

You can also use nested pushStyle() and popStyle() functions to create more complex styles. In the example below, the left-middle circle is drawn with the same style as the middle circle, but with a blue fill color. The right-middle circle is drawn with a new style that has a thicker stroke weight and a green fill color. The popStyle() functions are then used to restore the previous styles.

Size(400, 400);

Ellipse(0, 200, 132, 132); // Left circle

PushStyle(); // Start a new style

StrokeWeight(40);

Fill(204, 153, 0);

Ellipse(132, 200, 132, 132); // Left-middle circle

PushStyle(); // Start another new style

Stroke(0, 102, 153);

Ellipse(264, 200, 132, 132); // Right-middle circle

PopStyle(); // Restore the previous style

PopStyle(); // Restore original style

Ellipse(400, 200, 132, 132); // Right circle

It is important to note that the pushStyle() and popStyle() functions should be used in a well-structured manner to avoid any errors or unintended style changes.

Use strokeWeight(0)

The strokeWeight(0) function in p5.js is used to set the width of the stroke used for lines, points, and the border around shapes. The stroke weight is set using pixels. Setting the stroke weight to 0 means that there will be no stroke.

The strokeWeight() function accepts a single parameter, weight, which stores the weight (in pixels) of the stroke. The default line width is 1. Increasing the stroke weight results in thicker lines.

For example, to set the stroke width to 10, you would use the following code:

StrokeWeight(10);

To remove the stroke, you can set the stroke weight to 0:

StrokeWeight(0);

This will result in lines or shapes with no stroke, creating a more minimal appearance.

Use set fill colour to background colour

To get rid of stroke processing and set the fill colour to the background colour, follow these steps:

• First, open the desired image or object in a suitable editing software, such as Adobe Illustrator or Processing.
• Locate the "Stroke" or "Stroke Colour" settings within the software. This may be found in the Tools panel, Properties panel, Control panel, or Colour panel.
• To remove the stroke, select the "None" option or deselect the stroke box. This will eliminate the stroke processing.
• Now, to set the fill colour to the background colour, identify the "Fill" or "Fill Colour" settings.
• Choose the desired background colour by using the Colour Picker or selecting a specific colour code (RGB, HSB, or hexadecimal notation).
• Apply the selected colour to the fill.
• If needed, adjust the opacity of the fill using the "Fill Opacity" setting.
• Finally, save your changes, and the stroke processing will be removed, with the fill colour matching the background colour.

Frequently asked questions