Draw patterns using vertex

Programming Questions

synnefors

in Programming Questions • 4 months ago

Hi all,

I'm new to Processing and need some help with a spirograph sketchpad that I've created. I'm trying to make it possible to draw patterns with either points or lines. Right now it's possible to draw a pattern made out of points, but I can't figure out how to draw lines correctly.

I'm thinking that the lines should be drawn between each point by using vertex() (or maybe curveVertex()). I tried out a couple of different approaches to get it to work but the result isn't really what I'm looking for. Right now a straight line is drawn at each point but they are not connecting to each other. My coding attempts can be found at rows 86-105.

Press the mouse to draw, press 'v' to change between points and lines.

// *** SIZE VARIABLES *** //
float ringDiameter; //Diameter of the outer ring
float wheelDiameter; //Diameter of the inner wheel
float ringRadius; //Radius of the outer ring
float wheelRadius; //Radius of the inner wheel
float distance;
// *** ROTATION VARIABLES *** //
float wheelCenterRotation; //Start angle for the centerpoint of the wheel
float wheelCenterRotationInc; //Rotation increment
float lineRotation; //Start angle for the line inside the wheel
float lineRotationInc; //Rotation increment
// *** GRAPHICAL VARIABLES *** //
float penHue;
float penSat;
float penBright;
float penOpacity;
float penStrokeWeight;
float penOffset; //Position of the pen point
boolean penRainbowStroke; //Activate/inactivate rainbow coloured pen stroke
boolean showBackground; //Show/hide the background, i.e the outer ring and the inner wheel
boolean showGUIControls; //Show/hide the GUI controls
boolean drawLines; //Switch between drawing lines and points
PGraphics offscreen; //PGraphic off-screen to which the pattern is drawn
void setup () {
size(500, 700);
colorMode(HSB, 360, 100, 100, 100);
//Offscreen settings
offscreen = createGraphics(width, height, JAVA2D);
offscreen.beginDraw();
offscreen.colorMode(HSB, 360, 100, 100, 100);
offscreen.endDraw();
//Assigning variables
ringDiameter = 400;
wheelDiameter = 100;
ringRadius = ringDiameter/2;
wheelRadius = wheelDiameter/2;
distance = 300;
wheelCenterRotation = PI/4;
wheelCenterRotationInc = TWO_PI/distance;
lineRotation = PI/4;
lineRotationInc = wheelCenterRotationInc * (ringRadius - wheelRadius) / wheelRadius;
penHue = 300;
penSat = 90;
penBright = 90;
penOpacity = 75;
penStrokeWeight = 3;
penOffset = 66.666;
penRainbowStroke = false;
showBackground = true;
showGUIControls = true;
drawLines = false;
}
void update() {
//Re-calculate rotation if distance has changed
wheelCenterRotationInc = TWO_PI/distance;
//Rotation increment
wheelCenterRotation = wheelCenterRotation + wheelCenterRotationInc;
lineRotation = lineRotation + lineRotationInc;
}
// *** OFF-SCREEN CANVAS TO WHICH THE PATTERN IS DRAWN *** //
void drawOffscreen() {
offscreen.beginDraw();
offscreen.pushMatrix();
offscreen.translate(width/2, height/1.5);
offscreen.translate((ringRadius-wheelRadius)*cos(wheelCenterRotation), (ringRadius-wheelRadius)*sin(wheelCenterRotation));
offscreen.strokeWeight(penStrokeWeight);
offscreen.stroke(penHue, penSat, penBright, penOpacity);
//Rainbow stroke
if (penRainbowStroke) {
stroke(penHue, penSat, penBright, penOpacity);
penHue = penHue + 1;
if (penHue > 360) {
penHue = 0;
}
}
//Draw points
if (!drawLines){
offscreen.point(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
}
//Draw lines
if (drawLines){
offscreen.beginShape();
offscreen.vertex(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
offscreen.vertex(penOffset*sin(lineRotation+lineRotation), penOffset*cos(lineRotation+lineRotation));
//for (float i = 0; i < 2; i++) {
//float angle = i*wheelCenterRotationInc;
//offscreen.vertex(penOffset*sin(angle), penOffset*cos(angle));
//}
offscreen.endShape();
}
offscreen.popMatrix();
offscreen.endDraw();
}
// *** OUTER RING & INNER WHEEL *** //
void drawBackground() {
pushMatrix();
pushStyle();
//Re-calculate if the size of the wheel has changed
ringDiameter = ringDiameter;
wheelDiameter = wheelDiameter;
ringRadius = ringDiameter/2;
wheelRadius = wheelDiameter/2;
distance = distance;
//Re-calculate the rotation increment if the size of the wheel has changed
lineRotationInc = wheelCenterRotationInc * (ringRadius - wheelRadius) / wheelRadius;
//Print loops per lap
pushStyle();
noFill();
stroke(203, 71, 92);
strokeWeight(3);
ellipse(50, 310, 50, 50);
popStyle();
pushStyle();
fill(29, 99, 79);
textAlign(CENTER, CENTER);
textSize(12);
text("Loops per lap", 50, 270);
textSize(14);
text(ringDiameter/wheelDiameter, 50, 310);
textAlign(LEFT);
popStyle();
pushStyle();
fill(29, 99, 79);
textAlign(LEFT, CENTER);
textSize(10);
text("Tip! An integer, like", 20, 640);
text("3 or 8, requires one lap", 20, 655);
text("to draw a complete pattern.", 20, 670);
text("A no. like X.5 requires", 380, 640);
text("2 laps. A no. like X.25", 380, 655);
text("requires 4 laps & so forth.", 380, 670);
textAlign(LEFT);
popStyle();
translate(width/2, height/1.5);
//Outer ring
noFill();
stroke(29, 99, 79);
strokeWeight(3);
ellipse(0, 0, ringDiameter, ringDiameter);
//Calculate the new midpoint from where to draw the inner wheel
translate((ringRadius-wheelRadius)*cos(wheelCenterRotation), (ringRadius-wheelRadius)*sin(wheelCenterRotation));
//Inner wheel
noFill();
stroke(203, 71, 92);
strokeWeight(2);
wheelDiameter = min(wheelDiameter, ringDiameter/2);
ellipse(0, 0, wheelDiameter, wheelDiameter);
//Point to show the current 0-point
strokeWeight(5);
stroke(203, 71, 92);
point(0, 0);
//Line inside the inner wheel
stroke(203, 71, 92);
strokeWeight(2);
wheelDiameter = min(wheelDiameter, ringDiameter/2);
line(0, 0, wheelRadius*sin(lineRotation), wheelRadius*cos(lineRotation));
//Point to show the current position, colour and stroke weight of the pen point
stroke(penHue, penSat, penBright, penOpacity);
strokeWeight(5);
penOffset = min(penOffset, wheelRadius); //Constrain the offset point to the radius of the wheel
point(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
popStyle();
popMatrix();
}
// *** GUI CONTROLS *** //
void drawGUIControls () {
float yPosLine1 = 30;
float yPosLine2 = 55;
float yPosLine3 = 75;
float yPosLine4 = 95;
float yPosLine5 = 115;
float yPosLine6 = 135;
float yPosLine7 = 155;
float xPosCol1 = 15;
float xPosCol2 = width/2;
float yIndexStartLine1 = 47;
float yIndexEndLine1 = 63;
float yIndexStartLine2 = 67;
float yIndexEndLine2 = 83;
float yIndexStartLine3 = 87;
float yIndexEndLine3 = 103;
float yIndexStartLine4 = 107;
float yIndexEndLine4 = 123;
float yIndexStartLine5 = 127;
float yIndexEndLine5 = 143;
float keyStartPos1 = 105;
float keyEndPos1 = 215;
float windowStartPos1 = 130;
float windowEndPos1 = 210;
float keyStartPos2 = 325;
float keyEndPos2 = 455;
float windowStartPos2 = 350;
float windowEndPos2 = 450;
float rainbowDisp = 0.0;
float rainbowInc = TWO_PI/12.0;
//Background rectangles
pushStyle();
noStroke();
fill(199, 99, 59);
rect(2.5, 2.5, width-6, 245-2.5);
fill(29, 99, 79);
rect(5, 5, width-10, 245-6);
fill(203, 71, 92);
rect(6.5, 6.5, width-14, 245-10);
popStyle();
//Headlines column 1
pushStyle();
fill(360, 0, 100);
textSize(14);
text("SETTINGS", xPosCol1, yPosLine1);
textSize(12);
text("Ring Size", xPosCol1, yPosLine2);
text("Wheel Size", xPosCol1, yPosLine3);
text("Pen Position", xPosCol1, yPosLine4);
text("Point Distance", xPosCol1, yPosLine5);
text("Points or Line", xPosCol1, yPosLine6);
text("Pen Size", xPosCol1, yPosLine7);
//Headlines column 2
textSize(14);
text("STYLE", xPosCol2, yPosLine1);
textSize(12);
text("Current Colour", xPosCol2, yPosLine2);
text("Hue", xPosCol2, yPosLine3);
text("Saturation", xPosCol2, yPosLine4);
text("Brightness", xPosCol2, yPosLine5);
text("Opacity", xPosCol2, yPosLine6);
text("Rainbow", xPosCol2, yPosLine7);
popStyle();
//Instructions
pushStyle();
fill(360, 0, 100);
textSize(12);
text("Hold the mouse pressed to draw your own spirograph pattern!", xPosCol1, 190);
text("Press 'enter' to show/hide the guidelines and menu. Press 'delete' to reset the canvas.", xPosCol1, 210);
popStyle();
//Ring size
pushStyle();
textSize(12);
fill(360, 0, 100);
text("q <", keyStartPos1, yPosLine2);
text("> w", keyEndPos1, yPosLine2);
stroke(360, 0, 100);
line(windowStartPos1, 55, windowEndPos1, 55);
line(map(ringDiameter, 50, 400, windowStartPos1, windowEndPos1), yIndexStartLine1, map(ringDiameter, 50, 400, windowStartPos1, windowEndPos1), yIndexEndLine1);
popStyle();
//Wheel size
pushStyle();
textSize(12);
fill(360, 0, 100);
text("a <", keyStartPos1, yPosLine3);
text("> s", keyEndPos1, yPosLine3);
stroke(360, 0, 100);
line(windowStartPos1, 75, windowEndPos1, 75);
line(map(wheelDiameter, 20, ringRadius, windowStartPos1, windowEndPos1), yIndexStartLine2, map(wheelDiameter, 20, ringRadius, windowStartPos1, windowEndPos1), yIndexEndLine2);
popStyle();
//Pen position
pushStyle();
textSize(12);
fill(360, 0, 100);
text("z <", keyStartPos1, yPosLine4);
text("> x", keyEndPos1, yPosLine4);
stroke(360, 0, 100);
line(windowStartPos1, 95, windowEndPos1, 95);
line(map(penOffset, 0, wheelRadius, windowStartPos1, windowEndPos1), yIndexStartLine3, map(penOffset, 0, wheelRadius, windowStartPos1, windowEndPos1), yIndexEndLine3);
popStyle();
//Point distance
pushStyle();
textSize(12);
fill(360, 0, 100);
text("e <", keyStartPos1, yPosLine5);
text("> r", keyEndPos1, yPosLine5);
stroke(360, 0, 100);
line(windowStartPos1, 115, windowEndPos1, 115);
line(map(distance, 500, 100, windowStartPos1, windowEndPos1), yIndexStartLine4, map(distance, 500, 100, windowStartPos1, windowEndPos1), yIndexEndLine4);
popStyle();
//Pen size
pushStyle();
textSize(12);
fill(360, 0, 100);
text("g <", keyStartPos1, yPosLine7);
text("> h", keyEndPos1, yPosLine7);
popStyle();
pushStyle();
for (int i = 130; i <= 205; i = i + 15) {
stroke(penHue, penSat, penBright, penOpacity);
strokeWeight(penStrokeWeight);
point(i, 155);
}
popStyle();
//Current colour
pushStyle();
textSize(12);
stroke(360, 0, 100, 100);
fill(360, 0, 100, 100);
rect(windowStartPos2, 50, 100, 10);
stroke(penHue, penSat, penBright, penOpacity);
fill(penHue, penSat, penBright, penOpacity);
rect(windowStartPos2, 50, 100, 10);
popStyle();
//Hue
pushStyle();
textSize(12);
fill(360, 0, 100);
text("i <", keyStartPos2, yPosLine3);
text("> o", keyEndPos2, yPosLine3);
popStyle();
pushStyle();
for (int h = 0; h < 100; h = h + 1) {
strokeWeight(1);
stroke(h*3.6, 100, 100);
line(windowStartPos2+h, 70, windowStartPos2+h, 80);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penHue, 0, 360, windowStartPos2, windowEndPos2), yIndexStartLine2, map(penHue, 0, 360, windowStartPos2, windowEndPos2), yIndexEndLine2);
popStyle();
//Saturation
pushStyle();
textSize(12);
fill(360, 0, 100);
text("j <", keyStartPos2, yPosLine4);
text("> k", keyEndPos2, yPosLine4);
popStyle();
pushStyle();
for (int s = 0; s < 100; s = s + 1) {
stroke(penHue, s, 100);
line(windowStartPos2+s, 90, windowStartPos2+s, 100);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penSat, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine3, map(penSat, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine3);
popStyle();
//Brightness
pushStyle();
textSize(12);
fill(360, 0, 100);
text("n <", keyStartPos2, yPosLine5);
text("> m", keyEndPos2, yPosLine5);
popStyle();
pushStyle();
for (int b = 0; b < 100; b = b + 1) {
stroke(penHue, 100, b);
line(windowStartPos2+b, 110, windowStartPos2+b, 120);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penBright, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine4, map(penBright, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine4);
popStyle();
//Opacity
pushStyle();
textSize(12);
fill(360, 0, 100);
text("y <", keyStartPos2, yPosLine6);
text("> u", keyEndPos2, yPosLine6);
popStyle();
pushStyle();
for (int o = 0; o < 100; o = o + 1) {
stroke(penHue, 100, 100, o);
line(windowStartPos2+o, 130, windowStartPos2+o, 140);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penOpacity, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine5, map(penOpacity, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine5);
popStyle();
//Rainbow colour
pushStyle();
textSize(12);
text("b |", keyStartPos2, yPosLine7);
text("| b", keyEndPos2, yPosLine7);
popStyle();
//Rainbow colour ON
if (penRainbowStroke) {
pushStyle();
for (int i = 0; i < 100; i=i+5) {
strokeWeight(3);
stroke(i*3, penSat, penBright, penOpacity);
point(350+i, 150+sin(rainbowDisp)*6.0);
rainbowDisp = rainbowDisp + rainbowInc;
}
popStyle();
}
//Rainbow colour OFF
if (!penRainbowStroke) {
pushStyle();
textSize(12);
fill(360, 0, 100);
textAlign(CENTER);
text("OFF", 400, yPosLine7);
textAlign(LEFT);
popStyle();
}
}
// *** DRAW *** //
void draw() {
if (mousePressed) {
update();
drawOffscreen();
}
background(360, 0, 100);
if (showBackground) drawBackground();
if (showGUIControls) drawGUIControls();
image(offscreen, 0, 0);
}
// *** INPUTS *** //
void keyPressed() {
//Show/hide the background
if ((key == ENTER)||(key == RETURN)) {
showBackground = !showBackground;
showGUIControls = !showGUIControls;
}
//Reset the canvas
if ((key == BACKSPACE) || (key == DELETE)){
setup();
}
//Press z to activate/inactivate rainbow stroke
if (key == 'b') {
penRainbowStroke = !penRainbowStroke;
}
//Adjust the pen hue, constrained to values between 0 - 360
if (key == 'o') {
penHue = min(penHue + 5, 360);
}
if (key == 'i') {
penHue = max(penHue - 5, 0);
}
//Adjust the pen saturation, constrained to values between 0 - 100
if (key == 'k') {
penSat = min(penSat + 5, 100);
}
if (key == 'j') {
penSat = max(penSat - 5, 0);
}
//Adjust the pen brightness, constrained to values between 0 - 100
if (key == 'm') {
penBright = min(penBright + 5, 100);
}
if (key == 'n') {
penBright = max(penBright - 5, 0);
}
//Adjust the pen opacity, constrained to values between 0 - 100
if (key == 'u') {
penOpacity = min(penOpacity + 5, 100);
}
if (key == 'y') {
penOpacity = max(penOpacity - 5, 0);
}
//Adjust stroke weight, constrained to values between 2 - 5
if (key == 'h') {
penStrokeWeight = min(penStrokeWeight + 1, 8);
}
if (key == 'g') {
penStrokeWeight = max(penStrokeWeight - 1, 2);
}
//Adjust the size of the inner wheel, constrained to values between 20 and the radius of the outer ring
if (key == 's') {
wheelDiameter = min(wheelDiameter + 5, ringRadius);
}
if (key == 'a') {
wheelDiameter = max(wheelDiameter - 5, 20);
}
//Adjust the offset of the penpoint, constrained to the radius of the wheel
if (key == 'x') {
penOffset = min(penOffset + 10, wheelRadius);
}
if (key == 'z') {
penOffset = max(penOffset - 10, 0);
}
//Adjust the distance between each point
if (key == 'e') {
distance = min(distance + 10, 500);
}
if (key == 'r') {
distance = max(distance - 10, 100);
}
//Adjust the size of the outer ring, constrained to values between 50 and 400
if (key == 'w') {
ringDiameter = min(ringDiameter + 5, 400);
}
if (key == 'q') {
ringDiameter = max(ringDiameter - 5, 50);
}
//Press v to draw lines/points
if (key == 'v') {
drawLines = !drawLines;
}
}

Replies(5)

Chrisir

Re: Draw patterns using vertex

4 months ago

I would save the last x and y at the end of draw()

oldX=penOffset*sin(lineRotation);
oldY=penOffset*cos(lineRotation);

draw the line with

offscreen.line(oldX,oldY, penOffset*sin(lineRotation), penOffset*cos(lineRotation));

To make sure the first time you do so, the program doesn't crash or look ugly (since oldX and oldY are 0 it could give you an ugly line from 0,0 to your 1st point), say

boolean firstTime=true;

before setup().

And in draw()

if (firstTime) {
offscreen.point(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
firstTime=false;
}
else
{
offscreen.line(oldX,oldY,penOffset*sin(lineRotation), penOffset*cos(lineRotation));
}

Greetings

synnefors

Re: Draw patterns using vertex

4 months ago

Thank you so much! I've still got a small problem though; if I change any settings that affects the pen position a line is drawn between the last position and the new one.

Here's how I'm thinking: Each time the mouse is pressed I need to check whether any setting changes has been made that affects the position of the pen point before starting to draw the lines. If any changes have been made I need to set "firstTime" to "true".

I would like to code something like "if the current penOffset position is different than the last penOffset position; firstTime = true". I tried out a couple of different if statements within update but I couldn't get it to work.

Any suggestions? :)

Here's the code:

/* @pjs font="/uploads/84/ptsans-web-regular.ttf"; */
/* @pjs font="/uploads/84/boldptsansweb.ttf"; */
PFont PTSansReg;
PFont PTSansBold;
// *** SIZE VARIABLES *** //
float ringDiameter; //Diameter of the outer ring
float wheelDiameter; //Diameter of the inner wheel
float ringRadius; //Radius of the outer ring
float wheelRadius; //Radius of the inner wheel
float distance;
// *** ROTATION VARIABLES *** //
float wheelCenterRotation; //Start angle for the centerpoint of the wheel
float wheelCenterRotationInc; //Rotation increment
float lineRotation; //Start angle for the line inside the wheel
float lineRotationInc; //Rotation increment
// *** GRAPHICAL VARIABLES *** //
float penHue;
float penSat;
float penBright;
float penOpacity;
float penStrokeWeight;
float penOffset; //Position of the pen point
boolean penRainbowStroke; //Activate/inactivate rainbow coloured pen stroke
boolean showBackground; //Show/hide the background, i.e the outer ring and the inner wheel
boolean showGUIControls; //Show/hide the GUI controls
boolean drawLines; //Switch between drawing lines and points
boolean firstTime; //Used to assign correct values the first time lines are drawn
PGraphics offscreen; //PGraphic off-screen to which the pattern is drawn
// Some variables to store the calculated current and previous positions of the pen
float penX, penY, ppenX, ppenY;
void setup () {
size(500, 700);
colorMode(HSB, 360, 100, 100, 100);
PTSansReg = createFont("http://peepproject.com/uploads/84/ptsans-web-regular.ttf",12);
PTSansBold = createFont("http://peepproject.com/uploads/84/boldptsansweb.ttf", 12);
//Offscreen settings
offscreen = createGraphics(width, height, JAVA2D);
offscreen.beginDraw();
offscreen.colorMode(HSB, 360, 100, 100, 100);
offscreen.endDraw();
//Assigning variables
ringDiameter = 400;
wheelDiameter = 100;
ringRadius = ringDiameter/2;
wheelRadius = wheelDiameter/2;
distance = 300;
wheelCenterRotation = PI/4;
wheelCenterRotationInc = TWO_PI/distance;
lineRotation = PI/4;
lineRotationInc = wheelCenterRotationInc * (ringRadius - wheelRadius) / wheelRadius;
penHue = 300;
penSat = 90;
penBright = 90;
penOpacity = 75;
penStrokeWeight = 3;
penOffset = 66.666;
penRainbowStroke = false;
showBackground = true;
showGUIControls = true;
drawLines = false;
firstTime = true;
// Calculate position relative to the center of the ring for the first point
penX = (ringRadius-wheelRadius)*cos(wheelCenterRotation) + penOffset*sin(lineRotation);
penY = (ringRadius-wheelRadius)*sin(wheelCenterRotation) + penOffset*cos(lineRotation);
// Copy first point to the previous pen point, in case 'v' is pressed before the mouse
ppenX = penX;
ppenY = penY;
}
void update() {
//Re-calculate rotation if distance has changed
wheelCenterRotationInc = TWO_PI/distance;
//Rotation increment
wheelCenterRotation = wheelCenterRotation + wheelCenterRotationInc;
lineRotation = lineRotation + lineRotationInc;
}
// *** OFF-SCREEN CANVAS TO WHICH THE PATTERN IS DRAWN *** //
void drawOffscreen() {
offscreen.beginDraw();
offscreen.pushMatrix();
offscreen.translate(width/2, height/1.5);
// NOTE: Removed the translation to the center of the wheel so that points
// are calculated relative to a fixed point (i.e. the center of the ring)
offscreen.strokeWeight(penStrokeWeight);
offscreen.stroke(penHue, penSat, penBright, penOpacity);
//Rainbow stroke
if (penRainbowStroke) {
stroke(penHue, penSat, penBright, penOpacity);
penHue = penHue + 1;
if (penHue > 360) {
penHue = 0;
}
}
// Copy the current pen position to the previous pen position
ppenX = penX;
ppenY = penY;
// Calculate the current pen position relative to the center of the wheel
penX = (ringRadius-wheelRadius)*cos(wheelCenterRotation) + penOffset*sin(lineRotation);
penY = (ringRadius-wheelRadius)*sin(wheelCenterRotation) + penOffset*cos(lineRotation);
//Draw points
if (!drawLines){
offscreen.point(penX, penY);
}
//Draw lines
if (drawLines){
if (firstTime) {
offscreen.point(penX, penY);
firstTime = false;
}
else {
offscreen.line(ppenX, ppenY, penX, penY);
}
}
offscreen.popMatrix();
offscreen.endDraw();
}
// *** OUTER RING & INNER WHEEL *** //
void drawBackground() {
pushMatrix();
pushStyle();
//Re-calculate if the size of the wheel has changed
ringDiameter = ringDiameter;
wheelDiameter = wheelDiameter;
ringRadius = ringDiameter/2;
wheelRadius = wheelDiameter/2;
distance = distance;
//Re-calculate the rotation increment if the size of the wheel has changed
lineRotationInc = wheelCenterRotationInc * (ringRadius - wheelRadius) / wheelRadius;
//Print loops per lap
pushStyle();
noFill();
stroke(203, 71, 92);
strokeWeight(3);
ellipse(50, 310, 50, 50);
popStyle();
pushStyle();
fill(29, 99, 79);
textFont(PTSansReg);
textAlign(CENTER, CENTER);
textSize(12);
text("Loops per lap", 50, 270);
textFont(PTSansBold);
textSize(14);
text(ringDiameter/wheelDiameter, 50, 310);
textAlign(LEFT);
popStyle();
pushStyle();
fill(29, 99, 79);
textFont(PTSansReg);
textAlign(LEFT, CENTER);
textSize(10);
text("Tip! An integer, like", 20, 640);
text("3 or 8, requires one lap", 20, 655);
text("to draw a complete pattern.", 20, 670);
text("A no. like X.5 requires", 380, 640);
text("2 laps. A no. like X.25", 380, 655);
text("requires 4 laps & so forth.", 380, 670);
textAlign(LEFT);
popStyle();
translate(width/2, height/1.5);
//Outer ring
noFill();
stroke(29, 99, 79);
strokeWeight(3);
ellipse(0, 0, ringDiameter, ringDiameter);
//Calculate the new midpoint from where to draw the inner wheel
translate((ringRadius-wheelRadius)*cos(wheelCenterRotation), (ringRadius-wheelRadius)*sin(wheelCenterRotation));
//Inner wheel
noFill();
stroke(203, 71, 92);
strokeWeight(2);
wheelDiameter = min(wheelDiameter, ringDiameter/2);
ellipse(0, 0, wheelDiameter, wheelDiameter);
//Point to show the current 0-point
strokeWeight(5);
stroke(203, 71, 92);
point(0, 0);
//Line inside the inner wheel
stroke(203, 71, 92);
strokeWeight(2);
wheelDiameter = min(wheelDiameter, ringDiameter/2);
line(0, 0, wheelRadius*sin(lineRotation), wheelRadius*cos(lineRotation));
//Point to show the current position, colour and stroke weight of the pen point
stroke(penHue, penSat, penBright, penOpacity);
strokeWeight(5);
penOffset = min(penOffset, wheelRadius); //Constrain the offset point to the radius of the wheel
point(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
popStyle();
popMatrix();
}
// *** GUI CONTROLS *** //
void drawGUIControls () {
float yPosLine1 = 30;
float yPosLine2 = 55;
float yPosLine3 = 75;
float yPosLine4 = 95;
float yPosLine5 = 115;
float yPosLine6 = 135;
float yPosLine7 = 155;
float xPosCol1 = 15;
float xPosCol2 = width/2;
float yIndexStartLine1 = 47;
float yIndexEndLine1 = 63;
float yIndexStartLine2 = 67;
float yIndexEndLine2 = 83;
float yIndexStartLine3 = 87;
float yIndexEndLine3 = 103;
float yIndexStartLine4 = 107;
float yIndexEndLine4 = 123;
float yIndexStartLine5 = 127;
float yIndexEndLine5 = 143;
float keyStartPos1 = 105;
float keyEndPos1 = 215;
float windowStartPos1 = 130;
float windowEndPos1 = 210;
float keyStartPos2 = 325;
float keyEndPos2 = 455;
float windowStartPos2 = 350;
float windowEndPos2 = 450;
float rainbowDisp = 0.0;
float rainbowInc = TWO_PI/12.0;
//Background rectangles
pushStyle();
noStroke();
fill(199, 99, 59);
rect(2.5, 2.5, width-6, 245-2.5);
fill(29, 99, 79);
rect(5, 5, width-10, 245-6);
fill(203, 71, 92);
rect(6.5, 6.5, width-14, 245-10);
popStyle();
//Headlines column 1
pushStyle();
fill(360, 0, 100);
textSize(14);
textFont(PTSansBold);
text("SETTINGS", xPosCol1, yPosLine1);
textFont(PTSansReg);
textSize(12);
text("Ring Size", xPosCol1, yPosLine2);
text("Wheel Size", xPosCol1, yPosLine3);
text("Pen Position", xPosCol1, yPosLine4);
text("Point Distance", xPosCol1, yPosLine5);
text("Points or Line", xPosCol1, yPosLine6);
text("Pen Size", xPosCol1, yPosLine7);
//Headlines column 2
textSize(14);
textFont(PTSansBold);
text("STYLE", xPosCol2, yPosLine1);
textFont(PTSansReg);
textSize(12);
text("Current Colour", xPosCol2, yPosLine2);
text("Hue", xPosCol2, yPosLine3);
text("Saturation", xPosCol2, yPosLine4);
text("Brightness", xPosCol2, yPosLine5);
text("Opacity", xPosCol2, yPosLine6);
text("Rainbow", xPosCol2, yPosLine7);
popStyle();
//Instructions
pushStyle();
fill(360, 0, 100);
textFont(PTSansReg);
textSize(12);
text("Hold the mouse pressed to draw your own spirograph pattern!", xPosCol1, 190);
text("Press 'enter' to show/hide the guidelines and menu. Press 'delete' to reset the canvas.", xPosCol1, 210);
popStyle();
//Ring size
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("q <", keyStartPos1, yPosLine2);
text("> w", keyEndPos1, yPosLine2);
stroke(360, 0, 100);
line(windowStartPos1, 55, windowEndPos1, 55);
line(map(ringDiameter, 50, 400, windowStartPos1, windowEndPos1), yIndexStartLine1, map(ringDiameter, 50, 400, windowStartPos1, windowEndPos1), yIndexEndLine1);
popStyle();
//Wheel size
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("a <", keyStartPos1, yPosLine3);
text("> s", keyEndPos1, yPosLine3);
stroke(360, 0, 100);
line(windowStartPos1, 75, windowEndPos1, 75);
line(map(wheelDiameter, 20, ringRadius, windowStartPos1, windowEndPos1), yIndexStartLine2, map(wheelDiameter, 20, ringRadius, windowStartPos1, windowEndPos1), yIndexEndLine2);
popStyle();
//Pen position
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("z <", keyStartPos1, yPosLine4);
text("> x", keyEndPos1, yPosLine4);
stroke(360, 0, 100);
line(windowStartPos1, 95, windowEndPos1, 95);
line(map(penOffset, 0, wheelRadius, windowStartPos1, windowEndPos1), yIndexStartLine3, map(penOffset, 0, wheelRadius, windowStartPos1, windowEndPos1), yIndexEndLine3);
popStyle();
//Point distance
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("e <", keyStartPos1, yPosLine5);
text("> r", keyEndPos1, yPosLine5);
stroke(360, 0, 100);
line(windowStartPos1, 115, windowEndPos1, 115);
line(map(distance, 500, 100, windowStartPos1, windowEndPos1), yIndexStartLine4, map(distance, 500, 100, windowStartPos1, windowEndPos1), yIndexEndLine4);
popStyle();
//Pen size
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("g <", keyStartPos1, yPosLine7);
text("> h", keyEndPos1, yPosLine7);
popStyle();
pushStyle();
for (int i = 130; i <= 205; i = i + 15) {
stroke(penHue, penSat, penBright, penOpacity);
strokeWeight(penStrokeWeight);
point(i, 155);
}
popStyle();
//Current colour
pushStyle();
textFont(PTSansReg);
textSize(12);
stroke(360, 0, 100, 100);
fill(360, 0, 100, 100);
rect(windowStartPos2, 50, 100, 10);
stroke(penHue, penSat, penBright, penOpacity);
fill(penHue, penSat, penBright, penOpacity);
rect(windowStartPos2, 50, 100, 10);
popStyle();
//Hue
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("i <", keyStartPos2, yPosLine3);
text("> o", keyEndPos2, yPosLine3);
popStyle();
pushStyle();
for (int h = 0; h < 100; h = h + 1) {
strokeWeight(1);
stroke(h*3.6, 100, 100);
line(windowStartPos2+h, 70, windowStartPos2+h, 80);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penHue, 0, 360, windowStartPos2, windowEndPos2), yIndexStartLine2, map(penHue, 0, 360, windowStartPos2, windowEndPos2), yIndexEndLine2);
popStyle();
//Saturation
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("j <", keyStartPos2, yPosLine4);
text("> k", keyEndPos2, yPosLine4);
popStyle();
pushStyle();
for (int s = 0; s < 100; s = s + 1) {
stroke(penHue, s, 100);
line(windowStartPos2+s, 90, windowStartPos2+s, 100);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penSat, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine3, map(penSat, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine3);
popStyle();
//Brightness
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("n <", keyStartPos2, yPosLine5);
text("> m", keyEndPos2, yPosLine5);
popStyle();
pushStyle();
for (int b = 0; b < 100; b = b + 1) {
stroke(penHue, 100, b);
line(windowStartPos2+b, 110, windowStartPos2+b, 120);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penBright, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine4, map(penBright, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine4);
popStyle();
//Opacity
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
text("y <", keyStartPos2, yPosLine6);
text("> u", keyEndPos2, yPosLine6);
popStyle();
pushStyle();
for (int o = 0; o < 100; o = o + 1) {
stroke(penHue, 100, 100, o);
line(windowStartPos2+o, 130, windowStartPos2+o, 140);
}
popStyle();
pushStyle();
strokeWeight(1);
stroke(360, 0, 100, 100);
line(map(penOpacity, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine5, map(penOpacity, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine5);
popStyle();
//Rainbow colour
pushStyle();
textFont(PTSansReg);
textSize(12);
text("b |", keyStartPos2, yPosLine7);
text("| b", keyEndPos2, yPosLine7);
popStyle();
//Rainbow colour ON
if (penRainbowStroke) {
pushStyle();
for (int i = 0; i < 100; i=i+5) {
strokeWeight(3);
stroke(i*3, penSat, penBright, penOpacity);
point(350+i, 150+sin(rainbowDisp)*6.0);
rainbowDisp = rainbowDisp + rainbowInc;
}
popStyle();
}
//Rainbow colour OFF
if (!penRainbowStroke) {
pushStyle();
textFont(PTSansReg);
textSize(12);
fill(360, 0, 100);
textAlign(CENTER);
text("OFF", 400, yPosLine7);
textAlign(LEFT);
popStyle();
}
/*
//Grid
for (int i = 0; i <= 200; i = i + 20) {
stroke(360, 0, 100);
strokeWeight(1);
line(0, i, width, i);
}
for (int i = 0; i <= width; i = i + 20) {
strokeWeight(1);
line(i, 0, i, 200);
}
stroke(360, 100, 100);
strokeWeight(1);
line(width/2, 0, width/2, 200);
stroke(360, 100, 100);
strokeWeight(1);
line(0, 100, width, 100); */
}
// *** DRAW *** //
void draw() {
if (mousePressed) {
update();
drawOffscreen();
}
background(360, 0, 100);
if (showBackground) drawBackground();
if (showGUIControls) drawGUIControls();
image(offscreen, 0, 0);
}
// *** INPUTS *** //
void keyPressed() {
//Show/hide the background
if ((key == ENTER)||(key == RETURN)) {
showBackground = !showBackground;
showGUIControls = !showGUIControls;
}
//Reset the canvas
if ((key == BACKSPACE) || (key == DELETE)){
setup();
}
//Press z to activate/inactivate rainbow stroke
if (key == 'b') {
penRainbowStroke = !penRainbowStroke;
}
//Adjust the pen hue, constrained to values between 0 - 360
if (key == 'o') {
penHue = min(penHue + 5, 360);
}
if (key == 'i') {
penHue = max(penHue - 5, 0);
}
//Adjust the pen saturation, constrained to values between 0 - 100
if (key == 'k') {
penSat = min(penSat + 5, 100);
}
if (key == 'j') {
penSat = max(penSat - 5, 0);
}
//Adjust the pen brightness, constrained to values between 0 - 100
if (key == 'm') {
penBright = min(penBright + 5, 100);
}
if (key == 'n') {
penBright = max(penBright - 5, 0);
}
//Adjust the pen opacity, constrained to values between 0 - 100
if (key == 'u') {
penOpacity = min(penOpacity + 5, 100);
}
if (key == 'y') {
penOpacity = max(penOpacity - 5, 0);
}
//Adjust stroke weight, constrained to values between 2 - 5
if (key == 'h') {
penStrokeWeight = min(penStrokeWeight + 1, 8);
}
if (key == 'g') {
penStrokeWeight = max(penStrokeWeight - 1, 2);
}
//Adjust the size of the inner wheel, constrained to values between 20 and the radius of the outer ring
if (key == 's') {
wheelDiameter = min(wheelDiameter + 5, ringRadius);
}
if (key == 'a') {
wheelDiameter = max(wheelDiameter - 5, 20);
}
//Adjust the offset of the penpoint, constrained to the radius of the wheel
if (key == 'x') {
penOffset = min(penOffset + 10, wheelRadius);
}
if (key == 'z') {
penOffset = max(penOffset - 10, 0);
}
//Adjust the distance between each point
if (key == 'e') {
distance = min(distance + 10, 500);
}
if (key == 'r') {
distance = max(distance - 10, 100);
}
//Adjust the size of the outer ring, constrained to values between 50 and 400
if (key == 'w') {
ringDiameter = min(ringDiameter + 5, 400);
}
if (key == 'q') {
ringDiameter = max(ringDiameter - 5, 50);
}
//Press v to draw lines/points
if (key == 'v') {
drawLines = !drawLines;
}
}

Chrisir

Re: Draw patterns using vertex

4 months ago

can't you set firstTime to true here?

// *** DRAW *** //
void draw() {
if (mousePressed) {
update();
drawOffscreen();
// XXXXX here
}

synnefors

Re: Draw patterns using vertex

4 months ago

Tried and it doesn't solve it :(

It just sets "firstTime" to "true" all the time which causes it to get stuck within the if statement on rows 124-127 and therefor drawing points instead of lines.

Thanks anyway!

Chrisir

Re: Draw patterns using vertex

4 months ago

you want to connect the points with lines - but sometimes, you want to have no connecting lines between groups of lines, right?

if I change any settings that affects the pen position a line is drawn between the last position and the new one.

So during paintint, you change settings that affect the pen position.

Which changes are these?

at all those place where changes are made, just put firstTime=true; ?

Top Reply