Curves along a path / an arc


Hello oF community !

I’m working on reproducing the image below with oF and I’m stuck figuring out which tool to use for building the curves.

My first guess was to look into the addVertex() / toBezier() methods of ofPolyline but I’m not sure working with two control points will give me the effect I want.

I’m currently looking into the curveTo() method for ofPolyline - however again I’m not sure how much control I can have over the curve generated between two points.

(below) - image I would like to reproduce

(below) - the current sketch of my sketch in oF

Intuitively I’m thinking there must be a way to do this using sinwaves…

So my question to you is - does anyone see what would be the best way (aka which method) to go about achieving a replicate of the curves on the image above ?


mmm, I would probably use curveTo.
What you’ve drawn is a good starting point. Now you have to find the points that defines your curve.
As you see, the right part of the circle(having the picture in front of you) has smaller “waves” than the right part. Using polar coordinates, you can find the points that you need to draw the curves. See this terrible draw in attachment:

Starting from 0 radians, you can increment the angle of PI/10 (ten is the number of parts that defines the segments on the left part of the circle). Then you alternate the length of the radius, depending on which of the 3 circles your point has to be.
Once you have done the left part, you can use the same technic for the right part, but this time you have to increment by PI/6, starting from PI.
I hope this explanation is clear enough to get started at least :wink:


thats actually much easier. it is just like drawing a circle but modulating its radius using a sin wave.


#pragma once
#include "ofMain.h"
#include "ofxGui.h"
class ofApp : public ofBaseApp{
		void setup();
		void draw();
		ofxPanel gui;
		ofParameter<int> numPoints;
		ofParameter<float> radius, modulationDepth, leftModMultiplier, rightModMultiplier;


#include "ofApp.h"

void ofApp::setup(){

	//number of points that will make the circle
	 //the initial radius of the circle
	gui.add(radius.set("radius",300, 0,500));
	// how much you will modulate the radius.

	// multiplier for the left side modulation
	// multiplier for the right side modulation


void ofApp::draw(){
	ofMesh m;

	glm::vec3 center(ofGetWidth()/2, ofGetHeight()/2, 0);
	for(int i = 0; i < numPoints; i++){
		float angle = ofMap(i, 0, numPoints, 0, glm::two_pi<float>());
		float mod;
		if(i > numPoints/2){
			mod = sin(ofMap(i, 0, numPoints, 0, glm::pi<float>()*leftModMultiplier));
			mod = cos(ofMap(i, 0, numPoints, 0, glm::pi<float>()*rightModMultiplier));
		float modRadius = radius + modulationDepth * mod;
		m.addVertex(glm::vec3(sin(angle) * modRadius, cos(angle) * modRadius,0)+ center);
	m. draw();
	//the following is just to draw the gray circles.
	ofDrawCircle(center, radius);
	ofDrawCircle(center, radius + modulationDepth);
	ofDrawCircle(center, radius - modulationDepth);


you’ll have to change the radius and modulationdepth for the right side to make it look the same as the reference drawing.



Thanks @edapx !

I quickly prototyped this idea of connecting a set of points with curveTo(). Right now it’s looking a bit eh because the values I’m reading aren’t precise. (They are my mouse’s xy coordinates when hovering over the shape). So I’ll properly calculate the coordinate of every point and match those to the polyline drawing.

One thing I’m more concerned with is the awkward curve on the left segment. Maybe should try a different approach for that one. :slight_smile:


Thanks @roymacdonald I’ll give this a go and keep you posted :slight_smile: !


@roymacdonald @edapx

Turns out the ofxPathFitter addon does a pretty good job :grinning: