exporting a processing sketch that uses microphone input to webpage - processing

i'm trying to get my processing sketch to work online with processing.js. It work fine when i just use a very simple processing sketch but when i try to uploade my actual code to the server it does not work
I know my code is pretty messy and stuff but i don't have time to clean up right now i just want it to show in a browser
here is my code :
`
/* OpenProcessing Tweak of *#*http://www.openprocessing.org/sketch/5488*#* */
/* !do not delete the line above, required for linking your tweak if you upload again */
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.signals.*;
Minim minim;
AudioInput in;
FFT fft;
float loudestFreqAmp = 0;
float loudestFreq = 0;
int timerCounter = 0;
/* #pjs preload="picture.jpg"; */
PImage img;
PImage noise;
void setup()
{
size(640, 1136, P2D);
frameRate(1);
img = loadImage("DD.jpg");
minim = new Minim(this);
minim.debugOn();
background(img);
noStroke();
// get a line in from Minim, default bit depth is 16
in = minim.getLineIn(Minim.STEREO, 1024);
fft = new FFT(in.bufferSize(), in.sampleRate());
}
void draw()
{
fft.window(FFT.HAMMING);
println();
for(int i = 0; i < fft.specSize(); i++)
{
// draw the line for frequency band i, scaling it by 4 so we can
//see it a bit better
//line(i, height, i, height - fft.getBand(i)*4);
// hvis fft.getBand(i) større end loudestFregAmp og fft.getBand(i) større end 10)
if (fft.getBand(i) > loudestFreqAmp && fft.getBand(i) > 2)
{
//println(loudestFreqAmp);
loudestFreqAmp = fft.getBand(i);
//println(fft.getBand(i));
loudestFreq = i * 4;
println(i);
//sine.setFreq(loudestFreq);
//fill(loudestFreq * 1, 30 - loudestFreq, loudestFreq * 20, 30 );
if(loudestFreq < 10)
{
rect(random(0,width), random(0,height), loudestFreqAmp, loudestFreqAmp);
}
else
{
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
fill(0);
ellipse(random(0,width), random(0,height),1,1);
fill(3);
ellipse(random(0,width), random(0,height),2,2);
fill(6);
ellipse(random(0,width), random(0,height),2,2);
//ellipse(loudestFreqAmp, loudestFreqAmp, random(1,width), random(1,height) );
}
timerCounter = 0;
}
}
loudestFreqAmp = 0;
// draw the waveforms
/* for(int i = 0; i < in.bufferSize() - 1; i++)
{
line(i, 50 + in.left.get(i)*50, i+1, 50 + in.left.get(i+1)*50);
line(i, 150 + in.right.get(i)*50, i+1, 150 + in.right.get(i+1)*50);
}*/
fft.forward(in.mix);
timerCounter++;
if(timerCounter >= 90)
{
//println("Clr screen");
fill(255, 255, 255, (timerCounter - 90) * 2);
rect(0, 0, width, height);
// point(width, height);
}
}
void stop()
{
// always close Minim audio classes when you are done with them
in.close();
minim.stop();
super.stop();
}

That's because minim (and most Processing libraries) are made in Java. When you are in "Java mode" your sketch is also in Java. When though you go to "Javascript mode" and you upload to server, your sketch is translated to javascript (a different language) but your library is not, thus it can not run. Your best bet is probably to find a way to embed your sketch as a Java applet!

Related

How to externally trigger datalabels-plugin (active) - ChartJS

I'm playing with this code:
https://jsfiddle.net/netquik/e3jp2k5o/37/
First created a plugin to hightlight Labels (ticks) on x axis when hovering on chart bars (used mousemove for now). Then i tried trigger externally setActiveElements for chart and tooltip. And it seems to work as intended.
expected result
My problem is i can't find a way to "update" datalabels at the same time so it can show me datalabels. In the code you can see i tried manually enable some $context property of $datalabels with no luck. After setActiveElements externally i see in debugging that datalabels trigger itself after chart update and try
display: function (context) {
return context.active; // display labels if active
},
but even if the element in chart is "active" ti return a false context.active.
Could be a problem of interaction modes? Thanks for your help.
trigger result without datalabel
var SCRIPTOBJ = null;
var LABEL = ["Gino", "Samantha", "Vercingetorige"];
var DATA = [5, 28, 500];
var MAX = Math.max(...DATA);
var ctx = $('#stat');
Chart.defaults.font.size = 14;
Chart.register(ChartDataLabels);
var lastLabelH = null;
var stat = new Chart(ctx, {
type: 'bar',
data: {
labels: LABEL,
datasets: [{
minBarLength: 15,
barPercentage: 1,
label: '# VOTES',
data: DATA,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132, 1.0)',
'rgba(54, 162, 235, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(153, 102, 255, 1.0)',
'rgba(255, 159, 64, 1.0)'
],
borderWidth: 1
}]
},
plugins: [{
id: 'LabelHighlight',
beforeEvent(c, args, pluginOptions) {
const event = args.event;
if (event.type === 'mouseout') {
if (lastLabelH != null) {
//c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
c.update();
lastLabelH = null;
}
} else if (event.type === 'mousemove') {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
if (c.scales.x._labelItems) {
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
}
if (lastLabelH != null && lastLabelH != labelindex) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
}
lastLabelH = labelindex;
} else {
if (lastLabelH != null) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
lastLabelH = null;
}
}
}
}
}],
options: {
responsive: false,
interaction: {
mode: 'index',
intersect: true
},
/* onHover: function (event, elements, c) {
if (elements && elements.length) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
lastLabelH = labelindex;
}
} else {
if (lastLabelH != null) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
lastLabelH = null;
}
}
}, */
layout: {
padding: {
top: 50,
left: 0,
right: 0,
bottom: 0
}
},
indexAxis: 'x',
scales: {
x: {
beginAtZero: true,
ticks: {
display: true,
color: 'rgba(255, 159, 64, 1)',
autoSkip: false,
maxRotation: 90,
minRotation: 90,
labelOffset: -8,
textStrokeColor: 'rgba(0, 0, 0, 0.5)',
textStrokeWidth: '2',
font: {
weight: 'bold',
family: 'Arial',
size: 16
},
align: 'start'
}
},
y: {
max: MAX + 1,
beginAtZero: true,
ticks: {
color: 'rgba(255, 159, 64, 1)',
stepSize: 1
}
}
},
plugins: {
legend: {
display: false
},
datalabels: {
listeners: {
enter: function(context) {
// Receives `enter` events for any labels of any dataset. Indices of the
// clicked label are: `context.datasetIndex` and `context.dataIndex`.
// For example, we can modify keep track of the hovered state and
// return `true` to update the label and re-render the chart.
context.hovered = true;
return true;
},
leave: function(context) {
// Receives `leave` events for any labels of any dataset.
context.hovered = false;
return true;
}
},
display: function(context) {
return context.active; // display labels with an odd index
},
font: {
size: '24px'
},
padding: '6',
align: 'end',
anchor: 'end',
borderRadius: 4,
backgroundColor: function(context) {
return context.active ? context.dataset.hoverBackgroundColor : context.dataset.backgroundColor;
},
borderColor: function(context) {
return context.dataset.borderColor;
},
borderWidth: 1,
color: 'rgb(253, 225, 186)',
textShadowBlur: 4,
textShadowColor: 'rgb(0, 0, 0)',
formatter: Math.round
}
}
}
});
if (stat) {
console.log(stat);
$('#activate').click(function() {
if (stat.getActiveElements().length > 0) {
stat.setActiveElements([]);
} else {
stat.setActiveElements([{
datasetIndex: 0,
index: 2,
}]);
//stat.$datalabels._hovered = true;
stat.$datalabels._datasets[0][1]._el.$context.active = true;
stat.$datalabels._datasets[0][1].$context.active = true;
stat.$datalabels._labels[1].$context.active = true;
stat.$datalabels._labels[1]._el.active = true;
stat.$datalabels._labels[1]._el.$context.active = true;
stat.$datalabels._datasets[0][1].update(stat.$datalabels._datasets[0][1].$context);
stat.$datalabels._labels[1].update(stat.$datalabels._labels[1].$context);
}
const tooltip = stat.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = stat.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
stat.update();
});
}
Found a solution
I just modified the display function for datalabels integrating my external variable lastLabelH
var SCRIPTOBJ = null;
var LABEL = ["Gino", "Samantha", "Vercingetorige"];
var DATA = [5, 28, 500];
var MAX = Math.max(...DATA);
var ctx = $('#stat');
Chart.defaults.font.size = 14;
Chart.register(ChartDataLabels);
var lastLabelH = null;
var stat = new Chart(ctx, {
type: 'bar',
data: {
labels: LABEL,
datasets: [{
minBarLength: 15,
barPercentage: 1,
label: '# USERS',
data: DATA,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132, 1.0)',
'rgba(54, 162, 235, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(153, 102, 255, 1.0)',
'rgba(255, 159, 64, 1.0)'
],
borderWidth: 1
}]
},
plugins: [{
id: 'LabelHighlight',
beforeEvent(c, args, pluginOptions) {
const event = args.event;
/* if (event.type === 'mouseout') {
if (lastLabelH != null) {
//c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
c.update();
lastLabelH = null;
}
} else */
labelcolor(c);
}
}],
options: {
responsive: false,
interaction: {
mode: 'index',
intersect: true
},
/* onHover: function (event, elements, c) {
if (elements && elements.length) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
lastLabelH = labelindex;
}
} else {
if (lastLabelH != null) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
lastLabelH = null;
}
}
}, */
layout: {
padding: {
top: 50,
left: 0,
right: 0,
bottom: 0
}
},
indexAxis: 'x',
scales: {
x: {
beginAtZero: true,
ticks: {
display: true,
color: function(c) {
return lastLabelH != null && c.index == lastLabelH ? "rgba(255, 255, 64, 1)" : "rgba(255, 159, 64, 1)";
},
autoSkip: false,
maxRotation: 90,
minRotation: 90,
labelOffset: -8,
textStrokeColor: 'rgba(0, 0, 0, 0.5)',
textStrokeWidth: '2',
font: {
weight: 'bold',
family: 'Arial',
size: 16
},
align: 'start'
}
},
y: {
max: MAX + 1,
beginAtZero: true,
ticks: {
color: 'rgba(255, 159, 64, 1)',
stepSize: 1
}
}
},
plugins: {
legend: {
display: false
},
datalabels: {
listeners: {
enter: function(context) {
// Receives `enter` events for any labels of any dataset. Indices of the
// clicked label are: `context.datasetIndex` and `context.dataIndex`.
// For example, we can modify keep track of the hovered state and
// return `true` to update the label and re-render the chart.
context.hovered = true;
return true;
},
leave: function(context) {
// Receives `leave` events for any labels of any dataset.
context.hovered = false;
return true;
}
},
display: function(context) {
return lastLabelH != null && context.dataIndex == lastLabelH || context.active;
},
font: {
size: '24px'
},
padding: '6',
align: 'end',
anchor: 'end',
borderRadius: 4,
backgroundColor: function(context) {
return context.active ? context.dataset.hoverBackgroundColor : context.dataset.backgroundColor;
},
borderColor: function(context) {
return context.dataset.borderColor;
},
borderWidth: 1,
color: 'rgb(253, 225, 186)',
textShadowBlur: 4,
textShadowColor: 'rgb(0, 0, 0)',
formatter: Math.round
}
}
}
});
function labelcolor(c) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
if (c.scales.x._labelItems) {
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
}
if (lastLabelH != null && lastLabelH != labelindex) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
}
lastLabelH = labelindex;
} else {
if (lastLabelH != null) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
lastLabelH = null;
c.update();
}
}
}
if (stat) {
$('#activate').click(function() {
if (stat.getActiveElements().length > 0) {
stat.setActiveElements([]);
} else {
stat.setActiveElements([{
datasetIndex: 0,
index: 2,
}]);
labelcolor(stat);
}
const tooltip = stat.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = stat.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
stat.update();
});
}
body {
background-color: grey;
}
#stat {
margin-top: auto;
}
#content {
width: 300px;
margin: auto;
}
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<div id="content">
<canvas id="stat" width="300" height="300" style="margin-top:10px"></canvas>
<input id="activate" type="button" value="Vergingetorige">
</div>
</div>
had to modify the color fuction to update when set null lastLabelH i also add color label from external trigger
updated jsfiddle
https://jsfiddle.net/netquik/e3jp2k5o/41/

Possible custom axis scale?

Is it possible to set my own scale for numerical results?
I need to set the scales with these values 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000
AmCharts v4 doesn't provide a way to directly influence the scale outside of setting minGridDistance on the axis. A workaround for this is to disable the axis' own generated labels and create your own using axis ranges. You'll also want to set your own min/max values on the axis.
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = <your min value>;
range = valueAxis.axisRanges.create();
range.value = <axis value>;
range.endValue = range.value;
range.label.text = range.value;
// ... repeat for each axis increment
valueAxis.max = <your max value>;
Here's a basic demo:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"value": 450,
"value2": 362,
"value3": 699
}, {
"date": new Date(2018, 0, 2),
"value": 269,
"value2": 450,
"value3": 841
}, {
"date": new Date(2018, 0, 3),
"value": 700,
"value2": 358,
"value3": 699
}, {
"date": new Date(2018, 0, 4),
"value": 490,
"value2": 367,
"value3": 500
}, {
"date": new Date(2018, 0, 5),
"value": 500,
"value2": 485,
"value3": 369
}, {
"date": new Date(2018, 0, 6),
"value": 550,
"value2": 354,
"value3": 250
}, {
"date": new Date(2018, 0, 7),
"value": 420,
"value2": 350,
"value3": 600
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = 0;
var rangeValue = 50;
for (var i = 0; i < 8; ++i) {
range = valueAxis.axisRanges.create();
range.value = (rangeValue += ((i + 2) * 25));
range.endValue = range.value;
range.label.text = range.value;
}
valueAxis.max = rangeValue;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
}
createSeries("value", "Series #1");
createSeries("value2", "Series #2");
createSeries("value3", "Series #3");
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width:100%; height: 500px;"></div>

How to draw a star shape in ProcessingJS

Here is my current project code:
size(500,500);
background(255, 255, 255);
fill(250,0,0);
ellipse(150, 230, 100, 200);
fill(10,0,0);
ellipse(180, 233, 30, 30);
fill(10,0,0);
ellipse(120, 233, 30, 30);
fill(250,250,250);
ellipse(120,233,10,20);
fill(250,250,250);
ellipse(180,233,10,20);
arc(150, 280, 60, 90, 0, PI/1);
fill(250,0,0);
rect(100,330,100,100);
fill(10,10,10);
rect(50,330,50,50);
fill(10,10,10);
rect(200,330,50,50);
fill(250,0,0);
rect(90,430,50,100);
fill(250,0,0);
rect(160,430,50,100);
fill(10,0,0);
triangle(60, 300, 101, 10, 50, 450);
Could someone please provide code on how to draw a basic 5 pointed star beside the deadpool character? (within the sized 500,500 dimensions)
See the processing documentation of PShapes where there is a very simple implementation of a star shape in the Custom PShapes section.
See the p5.js example which is very similar.
The code can be used in processing.js, too. You have to change createCanvas(500,500) to size(500,500) and push() respectively pop() to pushMatrix() respectively popMatrix():
function setup() {
createCanvas(500,500);
}
function draw() {
background(255, 255, 255);
// star
push();
translate(280, 290); // center of the star
fill(102);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape(CLOSE);
translate(100, 100);
pop();
// character
fill(250,0,0);
ellipse(150, 230, 100, 200);
fill(10,0,0);
ellipse(180, 233, 30, 30);
fill(10,0,0);
ellipse(120, 233, 30, 30);
fill(250,250,250);
ellipse(120,233,10,20);
fill(250,250,250);
ellipse(180,233,10,20);
arc(150, 280, 60, 90, 0, PI/1);
fill(250,0,0);
rect(100,330,100,100);
fill(10,10,10);
rect(50,330,50,50);
fill(10,10,10);
rect(200,330,50,50);
fill(250,0,0);
rect(90,430,50,100);
fill(250,0,0);
rect(160,430,50,100);
fill(10,0,0);
triangle(60, 300, 101, 10, 50, 450);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

I want to get a condition inside an if running for x seconds

PFont mono;
float x;
float y;
float speed;
int m=millis();
void setup() {
size(720, 480);
background(0);
mono = createFont("Helvetica", 100);
textFont(mono);
text("Ê", 90, 270);
text("X", 190, 270);
text("T", 295, 270);
text("A", 385, 270);
text("S", 480, 270);
text("E", 580, 270);
}
void draw() {
speed+=1.5;
if (260-speed<250) {
speed*=-1;
}
if (mouseX>85 && 95<mouseX && mouseY>220 && 320>mouseY) {
background(0);
fill(random(255), random(255), random(255));
text("Ê", 90+random(-10, 10), 270-speed);
fill(255);
text("X", 190, 270);
text("T", 295, 270);
text("A", 385, 270);
text("S", 480, 270);
text("E", 580, 270);
}
if (mouseX>185 && 195<mouseX && mouseY>220 && 320>mouseY) {
background(0);
fill(random(255), random(255), random(255));
text("X", 190+random(-10, 10), 270-speed);
fill(255);
text("Ê", 90, 270);
text("T", 295, 270);
text("A", 385, 270);
text("S", 480, 270);
text("E", 580, 270);
}
if (mouseX>290 && 300<mouseX && mouseY>220 && 320>mouseY) {
background(0);
fill(random(255), random(255), random(255));
text("T", 295+random(-10, 10), 270-speed);
fill(255);
text("Ê", 90, 270);
text("X", 190, 270);
text("A", 385, 270);
text("S", 480, 270);
text("E", 580, 270);
}
if (mouseX>380 && 390<mouseX && mouseY>220 && 320>mouseY) {
background(0);
fill(random(255), random(255), random(255));
text("A", 385+random(-10, 10), 270-speed);
fill(255);
text("S", 480, 270);
text("E", 580, 270);
text("Ê", 90, 270);
text("X", 190, 270);
text("T", 295, 270);
}
if (mouseX>475 && 480<mouseX && mouseY>220 && 320>mouseY) {
background(0);
fill(random(255), random(255), random(255));
text("S", 480+random(-10, 10), 270-speed);
fill(255);
text("E", 580, 270);
text("Ê", 90, 270);
text("X", 190, 270);
text("T", 295, 270);
text("A", 385, 270);
}
if (mouseX>575 && 585<mouseX && mouseY>220 && 320>mouseY) {
background(0);
fill(random(255), random(255), random(255));
text("E", 580+random(-10, 10), 270-speed);
fill(255);
text("Ê", 90, 270);
text("X", 190, 270);
text("T", 295, 270);
text("A", 385, 270);
text("S", 480, 270);
}
}
This is my code and i want to make it so that when the mouse has left a certain position it keeps doing the cicle for 5 seconds, and that after that it returns to the position that is the setup.
Thanks in advance
You're thinking about it a little bit backwards: you don't want to stay inside the if statement for 5 seconds. Instead, you want the if statement to evaluate to true for 5 seconds.
This might sound like nit-picking, but the big difference is that you want this to stay true between calls to the draw() function.
You can do that using a boolean variable, an int variable, and the millis() function.
Step 1: Use a boolean variable to keep track of whether you should be doing the thing. Set this to true when you want to start doing the thing.
Step 2: Use an int variable to keep track of when you started doing the thing. Set this to millis() when you start doing the thing.
Step 3: In your draw() function, check the boolean variable to decide whether to do the thing. If it's true, do the thing.
Step 4: Also in your draw() function, check the int variable against the current value of millis() to decide if enough time has elapsed. If so, set the boolean back to false.
Here's a small example that shows a circle for 5 seconds whenever the user clicks:
float circleX;
float circleY;
boolean showCircle = false;
int startTime;
void setup() {
size(500, 500);
}
void draw() {
if (millis() > startTime + 5*1000) {
showCircle = false;
}
if (mousePressed) {
circleX = mouseX;
circleY = mouseY;
startTime = millis();
showCircle = true;
}
background(0);
if (showCircle) {
ellipse(circleX, circleY, 100, 100);
}
}
If you still have questions, please work from an MCVE like this instead of posting your entire project.

Autorotation with navigation back button

I am creating an app which support all orientation.
I am using navigationController here.
for orientation i am using this code
- (void)willAnimateRotationToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {
if (interfaceOrientation == UIInterfaceOrientationPortrait
|| interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown)
{
category1.frame = CGRectMake(54, 68, 190, 174);
category2.frame = CGRectMake(291, 68, 190, 174);
category3.frame = CGRectMake(525, 68, 190, 174);
category4.frame = CGRectMake(54, 296, 190, 174);
category5.frame = CGRectMake(291, 296, 190, 174);
category6.frame = CGRectMake(525, 296, 190, 174);
category7.frame = CGRectMake(54, 527, 190, 174);
category8.frame = CGRectMake(291, 527, 190, 174);
category9.frame = CGRectMake(525, 527, 190, 174);
category10.frame = CGRectMake(291, 757, 190, 174);
extra1.frame = CGRectMake(80, 781, 138, 125);
extra2.frame = CGRectMake(551, 781, 138, 125);
}
else
{
category1.frame = CGRectMake(61, 50, 190, 174);
category2.frame = CGRectMake(298, 50, 190, 174);
category3.frame = CGRectMake(537, 50, 190, 174);
category4.frame = CGRectMake(774, 50, 190, 174);
category5.frame = CGRectMake(61, 278, 190, 174);
category6.frame = CGRectMake(298, 278, 190, 174);
category7.frame = CGRectMake(537, 278, 190, 174);
category8.frame = CGRectMake(774, 278, 190, 174);
category9.frame = CGRectMake(298, 509, 190, 174);
category10.frame = CGRectMake(537, 509, 190, 174);
extra1.frame = CGRectMake(80, 533, 120, 125);
extra2.frame = CGRectMake(800, 533, 120, 125);
}
}
It works perfectly in this view. when i tab button it goes to secondviewcontroller where i am showing tableview.
But , if i go back to the firstview via navigation back button ,the orientation is not showing perfectly.
Above code is not working for navigation back button.
What should i do for this problem??
Any suggestion ??
Thank you in advance.
Edited:
I have removed my above function from firstview and copy the code to this function.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
if (interfaceOrientation == UIInterfaceOrientationPortrait
|| interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown)
{
category1.frame = CGRectMake(54, 68, 190, 174);
category2.frame = CGRectMake(291, 68, 190, 174);
category3.frame = CGRectMake(525, 68, 190, 174);
category4.frame = CGRectMake(54, 296, 190, 174);
category5.frame = CGRectMake(291, 296, 190, 174);
category6.frame = CGRectMake(525, 296, 190, 174);
category7.frame = CGRectMake(54, 527, 190, 174);
category8.frame = CGRectMake(291, 527, 190, 174);
category9.frame = CGRectMake(525, 527, 190, 174);
category10.frame = CGRectMake(291, 757, 190, 174);
extra1.frame = CGRectMake(80, 781, 138, 125);
extra2.frame = CGRectMake(551, 781, 138, 125);
}
else
{
category1.frame = CGRectMake(61, 50, 190, 174);
category2.frame = CGRectMake(298, 50, 190, 174);
category3.frame = CGRectMake(537, 50, 190, 174);
category4.frame = CGRectMake(774, 50, 190, 174);
category5.frame = CGRectMake(61, 278, 190, 174);
category6.frame = CGRectMake(298, 278, 190, 174);
category7.frame = CGRectMake(537, 278, 190, 174);
category8.frame = CGRectMake(774, 278, 190, 174);
category9.frame = CGRectMake(298, 509, 190, 174);
category10.frame = CGRectMake(537, 509, 190, 174);
extra1.frame = CGRectMake(80, 533, 120, 125);
extra2.frame = CGRectMake(800, 533, 120, 125);
}
return YES;
}
in my second view controller i have done
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
When i go back to the firstview by tapping navigation back button else condition(landscape mode) works fine but i don't know why it is not working with if condition(Portraitmode).
Write all this code in the following function.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
//set all the frames according to the current interface orientation
return YES;
}
NEW EDIT :
Write this method into your detailviewcontroller.m file
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
UIViewController *controller = [self.navigationController.viewControllers objectAtIndex:0];
[controller shouldAutorotateToInterfaceOrientation:interfaceOrientation];
return YES;
}

Resources