I have problem with making text lines output in my canvas curve in a circle move?
Have anyone or can anyone do that? 
1 Like
Hi there, welcome to the forum ! 
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, 
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 ?
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