How to make text output curve in a circle range?

I have problem with making text lines output in my canvas curve in a circle move?
Have anyone or can anyone do that? :smile:

1 Like

Hi there, welcome to the forum ! :slight_smile:

Could you be more precise about the problem you are facing at?
Do you want to rotate the text in a circular way?

If you have examples of code, you are welcome to post it here (with the </> button).

1 Like

Website, tutorials, trigonometry

Place text of x, y of a circle circumference

Hi Josephh, :smiley:

I want that my HOW and HOW1 and How2 is curved align with the circle and also the WHAT output in my canvas. I know that my how output only I one word at times, and my WHAT output I a line/message string. I uploaded the code under her ;

I can’t share my code ? do you have I mail or something so you can se my code

Why can’t you share your code ?
This is what I said : when you write a message on the forum, just use the </> button and put your code inside like this :

```
Your code here
```

1 Like

var bgcolor;
var button;
//var slider;
var nameInput;
var nameP;
var nameW;
var nameHow;
var nameWhat; 
var nameWInput;
var nameHowInput;
var nameHow1Input;
var nameWhatInput;

let saveButton;

let panelX = 0;
let panelY = -23;

//let maskButton;
//let bordButton;
//let foreButton;


let img;


function preload() {
  img = loadImage("assets/images/Compass-idna.png");
}


function setup() {
  canvas = createCanvas(windowWidth, screen.availHeight);
  bgcolor = color(220);
    strokeWeight(1.5);
  colorMode(HSB, 360, 100, 100);
  pixelDensity(2); //increase for better resolution images.
  
  //create interface background box (button)
  foreButton = createButton('');
  foreButton.style('width', '300px');
foreButton.style('height', '810px');
foreButton.style('background-color', '#dddddd');
  //foreButton.style('border-color', 'black');
  //foreButton.style('border-width', '2px');
  //foreButton.style('border-radius', '5px');
  foreButton.style('color', 'white');
 foreButton.position(50 + panelX, 35 + panelY);	
  
  
  nameA = createP('Compass IDna Group');
    nameA.style('width','200px');
   nameA.style('height','40px');
   nameA.position(10 + panelX, 25 + panelY);
  
   nameB = createP('Code Created by Line Brinkmann');
    nameB.style('width','300px');
   nameB.style('height','40px');
   nameB.position(10 + panelX, 60 + panelY);
  
  
  //topmål
  
  nameP = createP('Topmål'); 
   nameP.style('width','200px');
   nameP.style('height','40px');
   nameP.position(10 + panelX, 125 + panelY);
  createP('');
  nameInput = createInput('TOPMÅL');
   nameInput.style('width','200px');
   nameInput.style('height','40px');
   nameInput.position(70 + panelX, 125 + panelY);
  
 // slider = createSlider(10, 100, 86);
  
  
 //why  
  nameP = createP('Why');
   nameP.style('width','200px');
   nameP.style('height','40px');
   nameP.position(10 + panelX, 180 + panelY);
  
  nameWInput = createInput('WHY');
    nameWInput.style('width','200px');
   nameWInput.style('height','50px');
   nameWInput.position(70 + panelX, 180 + panelY);

  //how
  nameP = createP('How'); 
   nameP.style('width','200px');
   nameP.style('height','40px');
   nameP.position(10 + panelX, 239 + panelY);
  
  nameHowInput = createInput('HOW');
  nameHowInput.style('width','200px');
   nameHowInput.style('height','30px');
   nameHowInput.position(70 + panelX, 245 + panelY);
  
  
    //how
  nameP = createP('How1'); 
   nameP.style('width','200px');
   nameP.style('height','40px');
   nameP.position(10 + panelX, 279 + panelY);
  
  nameHow1Input = createInput('HOW1');
  nameHow1Input.style('width','200px');
   nameHow1Input.style('height','30px');
   nameHow1Input.position(70 + panelX, 285 + panelY);
  
  
    //how
  nameP = createP('How2'); 
   nameP.style('width','200px');
   nameP.style('height','40px');
   nameP.position(10 + panelX, 315 + panelY);
  
  nameHow2Input = createInput('HOW2');
  nameHow2Input.style('width','200px');
   nameHow2Input.style('height','30px');
   nameHow2Input.position(70 + panelX, 325 + panelY);
  
  //what
  nameP = createP('What'); 
   nameP.style('width','200px');
   nameP.style('height','40px');
   nameP.position(10 + panelX, 371 + panelY);
  
  nameWhatInput = createInput('WHAT');
  nameWhatInput.style('width','200px');
   nameWhatInput.style('height','50px');
   nameWhatInput.position(70 + panelX, 370 + panelY);
 
  
  
  (5, 26, 5, 26, 73, 24, 73, 61)
  
 //nameInput.changed(updateText);
  
  //create a button to save a frame.
  saveButton=createButton('SAVE JPG');
  saveButton.style('width', '205px');
  saveButton.style('height', '30px');
  saveButton.style('background-color', 'White');
  saveButton.style('border-color', 'black');
	//saveButton.style('border-width', '2px');
  saveButton.style('border-radius', '10px');
  saveButton.style('color', 'black');
	saveButton.style('font-family', 'Helvetica');
  //saveButton.style('font-weight', 'bold');
	saveButton.style('font-size', '12px');	
   
  
}

function updateText() {
  nameP.html(nameInput.value());
}

function updateText() {
  nameW.html(nameInput.value());
}

function updateText() {
  nameHow.html(nameInput.value());
}

function updateText() {
  nameHow1.html(nameInput.value());
}

function updateText() {
  nameHow2.html(nameInput.value());
}

function updateText() {
  nameWhat.html(nameInput.value());
}


function draw() {
  
  
 background(bgcolor);
 // fill(255, 0, 175);
   
    image(img, 400, 80);
  
  //set the upper left corner of the control panel
  foreButton.position(0 + panelX, 24 + panelY);

  //ellipse(100, 100, slider.value(), slider.value());
  //nameP.html(input.value());
  
  

  text(nameInput.value(), 735, 160);
  text(nameWInput.value(), 745, 435);
  text(nameHowInput.value(), 638, 455);
   text(nameHowInput.value(), 638, 455);
  
  
  
  
   text(nameHow1Input.value(), 745, 555);
    text(nameHow2Input.value(), 848, 455);
  text(nameWhatInput.value(), 745, 610);
 saveButton.position(70 + panelX, 430);
  
  saveButton.mousePressed(function saveImg(){save('IDna-Group-Compas.jpg');})
}


	
1 Like

Can you se the code ? :slight_smile:

I think that what you are looking for is drawing text along a curve like this (at the bottom of the page) :

https://processing.org/tutorials/text/

You could make a function that takes a string, a radius, an angle and the orientation of the text and draw the text on the corresponding circle.

2 Likes

Thank you so much Josephh

1 Like