Git Product home page Git Product logo

-dashed-lines-for-processing-'s Introduction

Dashed Lines for Processing

Dashed Line

Couldn't be any simpler, just a Processing library to draw geometry with dashed strokes!

Installation

You can install the library from Processing's Contribution Manager.

Alternatively, you can extract the distribution file on your Processing's sketchbook. Download dashedlines.zip from the dist folder. Now go to your sketchbook folder (in Windows it will be something like C:\Users\JohnDoe\Documents\Processing), go inside libraries, and extract the contents of the .zip file to a folder called dashedlines. Once finished, your library should be found under: C:\Users\JohnDoe\Documents\Processing\libraries\dashedlines\library\dashedlines.jar.

Still having trouble? Read this.

Hello Dash

Let's take a look at a basic example on how to draw a simple dashed line:

// Import the library
import garciadelcastillo.dashedlines.*;

// Declare the main DashedLines object
DashedLines dash;

void setup() {
  // Initialize it, passing a reference to the current PApplet
  dash = new DashedLines(this);

  // Set the dash-gap pattern in pixels
  dash.pattern(10, 5);
}

void draw() {
  background(127);

  // Call the line method of the 'dash' object,
  // as if it was Processing's native
  dash.line(10, 10, 90, 90);
  dash.line(10, 90, 90, 10);
}

And voilà!

Hello Dash!

Features

Dashed Lines for Processing provides a Processing-like API to draw the same basic or complex shapes you would natively, but with dashed strokes. It computes stroke segments based on your pattern choice, and adapts the drawing to a best-fit solution. This is specially useful for example for animations:

dash.pattern(20, 10);
dash.line(n1.x, n1.y, n2.x, n2.y);

Dashed Line

Dashed Lines contains methods to draw all (under development, still kinks here and there) types of geometry that you would normally do in Processing. It inherits inherit Processing's styles, such as stroke(), fill(), strokeWeight() and shape modes like rectMode(). Additionally, it provides some options to customize the dash-gap pattern() or to add offset() to the pattern for 'walking ants' effect on animations.

For example, for 2D primitives:

dash.pattern(30, 10, 15, 10);

// Dashed objects inherit Processing's style properties, including shape modes.
fill(255, 0, 0, 100);
rectMode(CORNERS);
dash.rect(n[0].x, n[0].y, n[1].x, n[1].y);

fill(0, 255, 0, 100);
ellipseMode(CORNERS);
dash.ellipse(n[2].x, n[2].y, n[3].x, n[3].y);

fill(0, 0, 255, 100);
dash.triangle(n[4].x, n[4].y, n[5].x, n[5].y, n[6].x, n[6].y);

fill(255, 0, 255, 100);
dash.quad(n[7].x, n[7].y, n[8].x, n[8].y, n[9].x, n[9].y, n[10].x, n[10].y);

// Animate dashes with 'walking ants' effect
dash.offset(dist);
dist += 1;

2D Primitives

For Bézier curves:

dash.pattern(30, 10);

noFill();
dash.bezier(n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y);

dash.offset(dist);
dist += 1;

Bezier Curve

And for more complex shapes, you can use the .beginShape(), .vertex() and .endShape() interface, just like you would in Processing! :)

strokeCap(SQUARE);
strokeJoin(BEVEL);
dash.pattern(30, 10);

// Start the shape with the .beginShape() method
dash.beginShape();
// Add vertices like you would in Processing
for (int i = 0; i < n.length; i++) {
  dash.vertex(n[i].x, n[i].y);
}
// Finish drawing the shape
dash.endShape();

dash.offset(dist);
dist += 1;

Open Shape

Including the option to use any of Processing's shape modes:

// Shapes accept all the same modes as Processing's native implementation:
fill(255, 0, 0, 100);
dash.beginShape(TRIANGLES);
for (int i = 0; i < n.length; i++) {
  dash.vertex(n[i].x, n[i].y);
}
dash.endShape(CLOSE);

TRIANGLES Shape

Contribute

There is still a lot to do, so if you have some time and are excited about computational geometry, feel free to fork and contribute, report bugs or submit feature requests.

Also, if you found this library useful and did something cool with it, send your creation my way! I am always happy to hear about cool projects people are working on.

Acknowledgments

My deepest gratitude to all the folks at the Processing Foundation and the great community that make this project so special and awesome.

Thanks to Nono for having pushed me to stick my head out of the books and make something useful, for once!

Kuddos to Pomax for his amazing Primer on Bézier Curves, it was incredibly helpful for the math behind these curves.

If you do something cool with this, tweet me! @garciadelcast

-dashed-lines-for-processing-'s People

Contributors

garciadelcastillo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

-dashed-lines-for-processing-'s Issues

Cannot seem to draw to alt Graphics space

Using Creategraphics to write offscreen/alt canvas and then display doesn't seem to work?
I tried PG.dash.ellipse and dash.PG.ellipse.

Is this possible?

Thank you for the great tool

Feature request: Functionality for dash.bezierVertex()

I would really like to connect several bezier curves and then add a .offset(value) to animate the line in and out. Just like you would do in After Effects or with SVG dash strokes. With only seperate dash.bezier() calls you don't get the right effect because the dashes don't line up when joined.

How do I draw inside a class?

How do I draw inside a class?

I'm creating a game for a university project and I would like to make a dashed circle indicating the area that the player has to reach to follow the path, however when I use "dashed = new DashedLines(this);" the program says that "The constructor DashedLines(CUBWAY_Ver_4_2.ObstaculoNvl3) is undefined".

I would like to know how I can solve this.

This is the class in question, I would like to know what I have to put in place of "this". Sorry if it's obvious, I'm still learning.

//

DashedLines tracejado;

class ObstaculoNvl3 {

int NdPontas;
float PX0, PY0, PX1, PY1;
int Raio;
float Ang;

float RaioT;

float m = radians(0);

float dist = 0;

ObstaculoNvl3 (int NdP, float X, float Y, int R) {
NdPontas = NdP;

Raio = R;

Ang = radians(360/NdP);

PX0 = X;
PY0 = Y;

RaioT = (Raio*2)/3;

tracejado = new DashedLines(this);
tracejado.pattern(30, 10);

}

void desenhaHorario () {

//Circulo
stroke(148, 56, 173);
strokeWeight(3);
noFill();
tracejado.ellipse(PX0, PY0, RaioT, RaioT);
//circle(PX0, PY0, RaioT);

tracejado.offset(dist);
dist += 1;

//Linha
for (int i = 0; i < NdPontas; i++) {
  PX1 = PX0+(Raio*cos((Ang)*(i+m)));
  PY1 = PY0+(Raio*sin((Ang)*(i+m)));

  strokeWeight(10);
  stroke(0);

  line(PX0, PY0, PX1, PY1);
}
m = m + radians(0.5);

}

void desenhaAntiHorario () {

//Circulo
stroke(148, 56, 173);
strokeWeight(1);
noFill();
tracejado.ellipse(PX0, PY0, RaioT, RaioT);
//circle(PX0, PY0, RaioT);

/*tracejado.offset(dist);
 dist += 1;*/

//Linha
for (int j = 0; j < NdPontas; j++) {
  PX1 = PX0+(Raio*cos((Ang)*(j-m)));
  PY1 = PY0+(Raio*sin((Ang)*(j-m)));

  strokeWeight(10);
  stroke(0);

  line(PX0, PY0, PX1, PY1);
}
m = m + radians(0.5);

}
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.